HTML5 视频播放(video),JavaScript控制视频的实例代码
分类：HTML5作者：脚本之家
具体代码如下所示：
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.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,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><p class="text-muted" style="margin-top:20px;">版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。</p>
</div><div class="topcard-tags"><a href="https://www.jb51.cc/tag/jsp/" class="tag_link" target="_blank">js</a><a href="https://www.jb51.cc/tag/shipin/" class="tag_link" target="_blank">视频</a><a href="https://www.jb51.cc/tag/shipinp/" class="tag_link" target="_blank">视频</a><a href="https://www.jb51.cc/tag/shipinbofang/" class="tag_link" target="_blank">视频播放</a></div></div>
</div>
</div>
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<h3>相关推荐</h3>
<hr />
<div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673264.html" title="HTML5和CSS3实现3D展示商品信息的代码">HTML5和CSS3实现3D展示商品信息的代码</a></div>
<div class="summary">HTML5和CSS3实现3D展示商品信息的代码</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673263.html" title="利用HTML5中的Canvas绘制笑脸的代码">利用HTML5中的Canvas绘制笑脸的代码</a></div>
<div class="summary">利用HTML5中的Canvas绘制笑脸的代码</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673262.html" title="Html5剪切板功能的实现">Html5剪切板功能的实现</a></div>
<div class="summary">Html5剪切板功能的实现</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673261.html" title="如何通过HTML5触摸事件实现移动端简易进度条">如何通过HTML5触摸事件实现移动端简易进度条</a></div>
<div class="summary">如何通过HTML5触摸事件实现移动端简易进度条</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673260.html" title="Html5移动端获奖无缝滚动动画实现">Html5移动端获奖无缝滚动动画实现</a></div>
<div class="summary">Html5移动端获奖无缝滚动动画实现</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673259.html" title="关于HTML5和CSS3实现机器猫的代码">关于HTML5和CSS3实现机器猫的代码</a></div>
<div class="summary">关于HTML5和CSS3实现机器猫的代码</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673258.html" title="HTML5使用DOM进行自定义控制">HTML5使用DOM进行自定义控制</a></div>
<div class="summary">HTML5使用DOM进行自定义控制</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673257.html" title="使用HTML5 Canvas绘制阴影效果的方法">使用HTML5 Canvas绘制阴影效果的方法</a></div>
<div class="summary">使用HTML5 Canvas绘制阴影效果的方法</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673256.html" title="使用PHP和HTML5 FormData实现无刷新文件上传">使用PHP和HTML5 FormData实现无刷新文件上传</a></div>
<div class="summary">使用PHP和HTML5 FormData实现无刷新文件上传</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673255.html" title="如何解决HTML5 虚拟键盘出现挡住输入框的问题">如何解决HTML5 虚拟键盘出现挡住输入框的问题</a></div>
<div class="summary">如何解决HTML5 虚拟键盘出现挡住输入框的问题</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673254.html" title="HTML5中div和section以及article的区别分析">HTML5中div和section以及article的区别分析</a></div>
<div class="summary">HTML5中div和section以及article的区别分析</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673253.html" title="html5和CSS 实现禁止IOS长按复制粘贴功能">html5和CSS 实现禁止IOS长按复制粘贴功能</a></div>
<div class="summary">html5和CSS 实现禁止IOS长按复制粘贴功能</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673252.html" title="html5 touch事件实现触屏页面上下滑动">html5 touch事件实现触屏页面上下滑动</a></div>
<div class="summary">html5 touch事件实现触屏页面上下滑动</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673251.html" title="canvas 模拟实现电子彩票刮刮乐的代码">canvas 模拟实现电子彩票刮刮乐的代码</a></div>
<div class="summary">canvas 模拟实现电子彩票刮刮乐的代码</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673250.html" title="HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能">HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能</a></div>
<div class="summary">HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673249.html" title="Android自定义环形LoadingView效果">Android自定义环形LoadingView效果</a></div>
<div class="summary">Android自定义环形LoadingView效果</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673248.html" title="HTML5 canvas绘制五角星的方法">HTML5 canvas绘制五角星的方法</a></div>
<div class="summary">HTML5 canvas绘制五角星的方法</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673247.html" title="html5使用html2canvas实现浏览器截图">html5使用html2canvas实现浏览器截图</a></div>
<div class="summary">html5使用html2canvas实现浏览器截图</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673246.html" title="使用Canvas处理图片的方法介绍">使用Canvas处理图片的方法介绍</a></div>
<div class="summary">使用Canvas处理图片的方法介绍</div>
</div><div class="list_con">
<div class="title"><a href="https://www.jb51.cc/html5/4673245.html" title="利用Canvas模仿百度贴吧客户端loading小球的方法">利用Canvas模仿百度贴吧客户端loading小球的方法</a></div>
<div class="summary">利用Canvas模仿百度贴吧客户端loading小球的方法</div>
</div></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<!-- jb51-article-300x600 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="7541177540"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<!-- row end -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">热门文章</label>
<ul class="n-list"><li><a href="https://www.jb51.cc/html5/4673264.html" title="HTML5和CSS3实现3D展示商品信息的代码">• HTML5和CSS3实现3D展示商品信息的代码</a></li><li><a href="https://www.jb51.cc/html5/4673263.html" title="利用HTML5中的Canvas绘制笑脸的代码">• 利用HTML5中的Canvas绘制笑脸的代码</a></li><li><a href="https://www.jb51.cc/html5/4673262.html" title="Html5剪切板功能的实现">• Html5剪切板功能的实现</a></li><li><a href="https://www.jb51.cc/html5/4673261.html" title="如何通过HTML5触摸事件实现移动端简易进度条">• 如何通过HTML5触摸事件实现移动端简易进…</a></li><li><a href="https://www.jb51.cc/html5/4673260.html" title="Html5移动端获奖无缝滚动动画实现">• Html5移动端获奖无缝滚动动画实现</a></li><li><a href="https://www.jb51.cc/html5/4673259.html" title="关于HTML5和CSS3实现机器猫的代码">• 关于HTML5和CSS3实现机器猫的代码</a></li><li><a href="https://www.jb51.cc/html5/4673258.html" title="HTML5使用DOM进行自定义控制">• HTML5使用DOM进行自定义控制</a></li><li><a href="https://www.jb51.cc/html5/4673257.html" title="使用HTML5 Canvas绘制阴影效果的方法">• 使用HTML5 Canvas绘制阴影效果的方法</a></li><li><a href="https://www.jb51.cc/html5/4673256.html" title="使用PHP和HTML5 FormData实现无刷新文件上传">• 使用PHP和HTML5 FormData实现无刷新文件…</a></li><li><a href="https://www.jb51.cc/html5/4673255.html" title="如何解决HTML5 虚拟键盘出现挡住输入框的问题">• 如何解决HTML5 虚拟键盘出现挡住输入框…</a></li></ul>
</div>
</div>
</div>
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">最新文章</label>
<ul class="n-list"><li><a href="https://www.jb51.cc/html5/4673264.html" title="HTML5和CSS3实现3D展示商品信息的代码">• HTML5和CSS3实现3D展示商品信息的代码</a></li><li><a href="https://www.jb51.cc/html5/4673263.html" title="利用HTML5中的Canvas绘制笑脸的代码">• 利用HTML5中的Canvas绘制笑脸的代码</a></li><li><a href="https://www.jb51.cc/html5/4673262.html" title="Html5剪切板功能的实现">• Html5剪切板功能的实现</a></li><li><a href="https://www.jb51.cc/html5/4673261.html" title="如何通过HTML5触摸事件实现移动端简易进度条">• 如何通过HTML5触摸事件实现移动端简易进…</a></li><li><a href="https://www.jb51.cc/html5/4673260.html" title="Html5移动端获奖无缝滚动动画实现">• Html5移动端获奖无缝滚动动画实现</a></li><li><a href="https://www.jb51.cc/html5/4673259.html" title="关于HTML5和CSS3实现机器猫的代码">• 关于HTML5和CSS3实现机器猫的代码</a></li><li><a href="https://www.jb51.cc/html5/4673258.html" title="HTML5使用DOM进行自定义控制">• HTML5使用DOM进行自定义控制</a></li><li><a href="https://www.jb51.cc/html5/4673257.html" title="使用HTML5 Canvas绘制阴影效果的方法">• 使用HTML5 Canvas绘制阴影效果的方法</a></li><li><a href="https://www.jb51.cc/html5/4673256.html" title="使用PHP和HTML5 FormData实现无刷新文件上传">• 使用PHP和HTML5 FormData实现无刷新文件…</a></li><li><a href="https://www.jb51.cc/html5/4673255.html" title="如何解决HTML5 虚拟键盘出现挡住输入框的问题">• 如何解决HTML5 虚拟键盘出现挡住输入框…</a></li></ul>
</div>
</div>
</div>
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">热门标签<a href="https://www.jb51.cc/all" class="pull-right">更多</a>
</label>
<div class="topcard-tags"><a href="https://www.jb51.cc/tag/python/" title="python">python</a><a href="https://www.jb51.cc/tag/JavaScript/" title="JavaScript">JavaScript</a><a href="https://www.jb51.cc/tag/java/" title="java">java</a><a href="https://www.jb51.cc/tag/HTML/" title="HTML">HTML</a><a href="https://www.jb51.cc/tag/PHP/" title="PHP">PHP</a><a href="https://www.jb51.cc/tag/reactjs/" title="reactjs">reactjs</a><a href="https://www.jb51.cc/tag/C/" title="C#">C#</a><a href="https://www.jb51.cc/tag/Android/" title="Android">Android</a><a href="https://www.jb51.cc/tag/CSS/" title="CSS">CSS</a><a href="https://www.jb51.cc/tag/Nodejs/" title="Node.js">Node.js</a><a href="https://www.jb51.cc/tag/sql/" title="sql">sql</a><a href="https://www.jb51.cc/tag/rp/" title="r">r</a><a href="https://www.jb51.cc/tag/python3x/" title="python-3.x">python-3.x</a><a href="https://www.jb51.cc/tag/MysqL/" title="MysqL">MysqL</a><a href="https://www.jb51.cc/tag/jQuery/" title="jQuery">jQuery</a><a href="https://www.jb51.cc/tag/c4343/" title="c++">c++</a><a href="https://www.jb51.cc/tag/pandas/" title="pandas">pandas</a><a href="https://www.jb51.cc/tag/flutter/" title="Flutter">Flutter</a><a href="https://www.jb51.cc/tag/angular/" title="angular">angular</a><a href="https://www.jb51.cc/tag/IOS/" title="IOS">IOS</a><a href="https://www.jb51.cc/tag/django/" title="django">django</a><a href="https://www.jb51.cc/tag/linux/" title="linux">linux</a><a href="https://www.jb51.cc/tag/swift/" title="swift">swift</a><a href="https://www.jb51.cc/tag/typescript/" title="typescript">typescript</a><a href="https://www.jb51.cc/tag/luyouqi/" title="路由器">路由器</a><a href="https://www.jb51.cc/tag/JSON/" title="JSON">JSON</a><a href="https://www.jb51.cc/tag/luyouqishezhi/" title="路由器设置">路由器设置</a><a href="https://www.jb51.cc/tag/wuxianluyouqi/" title="无线路由器">无线路由器</a><a href="https://www.jb51.cc/tag/h3c/" title="h3c">h3c</a><a href="https://www.jb51.cc/tag/huasan/" title="华三">华三</a><a href="https://www.jb51.cc/tag/huasanluyouqishezhi/" title="华三路由器设置">华三路由器设置</a><a href="https://www.jb51.cc/tag/huasanluyouqi/" title="华三路由器">华三路由器</a><a href="https://www.jb51.cc/tag/diannaoruanjianjiaocheng/" title="电脑软件教程">电脑软件教程</a><a href="https://www.jb51.cc/tag/arrays/" title="arrays">arrays</a><a href="https://www.jb51.cc/tag/docker/" title="docker">docker</a><a href="https://www.jb51.cc/tag/ruanjiantuwenjiaocheng/" title="软件图文教程">软件图文教程</a><a href="https://www.jb51.cc/tag/C/" title="C">C</a><a href="https://www.jb51.cc/tag/vuejs/" title="vue.js">vue.js</a><a href="https://www.jb51.cc/tag/laravel/" title="laravel">laravel</a><a href="https://www.jb51.cc/tag/springboot/" title="spring-boot">spring-boot</a></div>
</div>
</div>
</div>
<div class="row row-sm rbox">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<!-- jb51-article-300x600 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="7541177540"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container" style="width:1440px;">
<div class="row hidden-xs">
<div class="col-sm-12 col-md-9 col-lg-9 site-link">
<ul class="list-inline">
<li>友情链接:</li><li><a href="https://www.runoob.com/" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank" rel="nofollow">菜鸟教程</a></li><li><a href="https://ai.jb51.cc/" title="ai导航是编程之家旗下ai方向的ai资讯、ai工具类集合导航站。" target="_blank" rel="nofollow">ai导航</a></li></ul>
<ul class="list-inline">
<li><a href="https://www.jb51.cc" title="编程之家">编程之家</a></li>-<li><a href="https://t5m44pq3f7.jiandaoyun.com/f/638ca61b7b079a000a5d2dd6" rel="nofollow" title="我要投稿" target="_blank">我要投稿</a></li>-<li><a target="_blank" rel="nofollow" href="https://t5m44pq3f7.jiandaoyun.com/f/638ca8c69ad234000a79561f" title="广告合作">广告合作</a></li>-<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></li>-<li><a href="https://www.jb51.cc/disclaimers.html" title="免责声明">免责声明</a></li>-<li><a href="https://www.jb51.cc/sitemap/all/index.xml" title="网站地图" target="_blank">网站地图</a></li>
</ul>
<div>版权所有 © 2018编程之家<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3"><img src="https://www.jb51.cc/qrcode.jpg" width="90" alt="微信公众号搜索 “ 程序精选 ” ，选择关注！">
<div class="pull-right">微信公众号搜<span class="text-danger">"程序精选"</span>关注<br />微信扫一扫可直接关注哦！</div>
</div>
</div>
</div>
</footer>
<script src="https://www.jb51.cc/js/count.js"></script>
</body>
</html> 
