HTML5 视频播放(video),JavaScript控制视频的实例代码


Posted in HTML / CSS onOctober 08, 2018

具体代码如下所示:

 

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
figcaption {
text-align: center;
line-height: 150px;
font-family: "Microsoft Yahei";
font-size: 24px;
}
.player {
width: 720px;
height: 360px;
margin: 10px auto;
border: 1px solid #000;
background-color: #000;
position: relative;
border-radius: 6px;
}
.player video {
width: 720px;
height: 360px;
}
.controls {
width: 700px;
height: 40px;
background-color: rgba(255,255,0,0.3);
position: absolute;
bottom: 10px;
left: 10px;
border-radius: 10px;
}
.switch {
position: absolute;
width: 22px;
height: 22px;
background-color: red;
left: 10px;
top: 9px;
border-radius: 50%;
}
.progress {
width: 432px;
height: 10px;
position: absolute;
background-color: rgba(255,255,255,0.4);
left: 40px;
top: 15px;
border-radius: 4px;
overflow: hidden;
}
.curr-progress {
width: 0%;
height: 100%;
background-color: #fff;
}
.time {
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #fff;
position: absolute;
left: 510px;
top: 10px;
}
.extend {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
right: 10px;
top: 10px;
}
style>
head>
<body>
<figure>  
<figcaption>视频案例figcaption>
<div class="player">
<video src="11.mp4">video>
<div class="controls">
<a href="#" class="switch">a>
<div class="progress">
<div class="curr-progress">div>
div>
<div class="time">
<span class="curr-time">00:00:00span>/
<span class="total-time">00:00:00span>
div>
<a href="#" class="extend">a>
div>
div>
figure>
<script>
var video = document.querySelector('video');
var playBtn = document.querySelector('.switch');
var currProgress = document.querySelector('.curr-progress');
var currTime = document.querySelector('.curr-time');
var totalTime = document.querySelector('.total-time');
var extend = document.querySelector('.extend');
var tTime = 0;
playBtn.onclick = function() {
if(video.paused){  // 如果视频是暂停的
video.play();    //play()播放  load()重新加载  pause()暂停
}else{
video.pause();
}
}
//当视频能播放(已经通过网络加载完成)时
video.oncanplay = function() {
tTime = video.duration;  //获取视频总时长(单位秒)
var tTimeStr = getTimeStr(tTime);
totalTime.innerHTML = tTimeStr;
}
//当视频当前播放时间更新的时候
video.ontimeupdate = function() {
var cTime = video.currentTime;  //获取当前播放时间 
var cTimeStr = getTimeStr(cTime);
console.log(cTimeStr);
currTime.innerHTML = cTimeStr;
currProgress.style.width = cTime/tTime*100+"%";
}
extend.onclick = function() {
video.webkitRequestFullScreen();  //视频全屏
}
//将以秒为单位的时间变成“00:00:00”格式的字符串
function getTimeStr(time) {
var h = Math.floor(time/3600);
var m = Math.floor(time%3600/60);
var s = Math.floor(time%60);
h = h>=10?h:"0"+h;
m = m>=10?m:"0"+m;
s = s>=10?s:"0"+s;
return h+":"+m+":"+s;
}
script>
body>
html>

总结

以上所述是小编给大家介绍的HTML5 视频播放(video),JavaScript控制视频的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3教程(1):什么是CSS3
Apr 02 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 #HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 #HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 #HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 #HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 #HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 #HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 #HTML / CSS
You might like
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
php MessagePack介绍
2013/10/06 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
python插入排序算法实例分析
2015/07/03 Python
python随机取list中的元素方法
2018/04/08 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
详解python中的装饰器
2018/07/10 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
简单了解如何封装自己的Python包
2020/07/08 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
捷科时代的软件测试笔试题
2015/11/09 面试题
幼儿园消防演练方案
2014/02/13 职场文书
外国人聘用意向书
2014/04/01 职场文书
协议书怎么写
2014/04/21 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
神农溪导游词
2015/02/11 职场文书
校本研修个人总结
2015/02/28 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
Django框架中表单的用法
2022/06/10 Python