JavaScript怎么实现控制视频
发表于：2022-08-12 作者：安全数据网编辑
编辑最后更新 2022年08月12日，这篇"JavaScript怎么实现控制视频"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这
这篇"JavaScript怎么实现控制视频"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"JavaScript怎么实现控制视频"文章吧。
具体代码如下所示：
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[xss_clean] = tTimeStr;}//当视频当前播放时间更新的时候video.ontimeupdate = function() {var cTime = video.currentTime; //获取当前播放时间 var cTimeStr = getTimeStr(cTime);console.log(cTimeStr);currTime[xss_clean] = 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></pre><p class="introduction">以上就是关于"JavaScript怎么实现控制视频"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。</p> </div> <div class="diggit"><a href="#"> 很赞哦！ </a></div> <div class="clear"></div> <div class="keywords"> <a target="_blank" href="https://www.cyuyanhs.com/tags-2376293.html">c语言网络技术和编程语言总结</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2326764.html">c语言对应的三级考试网络技术</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2377603.html">网站服务器后台如何加防护密码</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2140800.html">c语言软件开发步骤</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2356419.html">c语言中网络技术知识点</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2377614.html">服务器对权限提升的防护措施</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-999423.html">怎么在阿里云租服务器</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-800000.html">黑苹果能做web服务器吗</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2244145.html">c语言和网络技术哪个好考</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-797219.html">云服务器2核4G是什么性能</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1422645.html">数据库in的效率</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1943110.html">抢庄牛牛有什么软件开发</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1277990.html">数据库怎么设置ip白名单访问</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1115601.html">互联网金融向科技金融的转型</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1343741.html">数据库关系表达式举例</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1604486.html">关于数据库的开源软件</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2091248.html">王一已经在智宏软件开发公司</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2276463.html">麟灵网络技术有限公司</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-882748.html">unitymmorpg服务器</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-840124.html">服务器独享10m带宽多少钱</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-745197.html">魔兽世界的第一个服务器叫什么</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-452820.html">网络安全周金融日活动总结</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-323773.html">玉林市网络安全报告会</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1966369.html">有各种软件开发书籍的app</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2184496.html">887网络技术传媒有限公司</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1110513.html">济南美桔互联网科技有限公司</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1590671.html">数据库自增函数</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1551394.html">单元格前删除一行数据库</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-977750.html">7800瓦服务器配多大电池</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-304809.html">2019网络安全公司</a> <a target="_blank" href="https://www.cyuyanhs.com/s-基础平台软件开发待遇">基础平台软件开发待遇</a> <a target="_blank" href="https://www.cyuyanhs.com/s-数据库系统开发意义">数据库系统开发意义</a> <a target="_blank" href="https://www.cyuyanhs.com/s-管理服务器怎么找">管理服务器怎么找</a> <a target="_blank" href="https://www.cyuyanhs.com/s-数据库自动备份命名规范">数据库自动备份命名规范</a> <a target="_blank" href="https://www.cyuyanhs.com/s-安徽名优网络技术服务机构">安徽名优网络技术服务机构</a> <a target="_blank" href="https://www.cyuyanhs.com/s-软件开发的几大要点">软件开发的几大要点</a> <a target="_blank" href="https://www.cyuyanhs.com/s-学校网络安全规划">学校网络安全规划</a> <a target="_blank" href="https://www.cyuyanhs.com/s-软件开发外包面试多久反馈">软件开发外包面试多久反馈</a> <a target="_blank" href="https://www.cyuyanhs.com/s-数据库价格厂商">数据库价格厂商</a> <a target="_blank" href="https://www.cyuyanhs.com/s-代理服务器连接被重置">代理服务器连接被重置</a> </div> <div class="share"><img src="https://www.cyuyanhs.com/static/zsymb/images/wxgzh.jpg"> <div class="share-text"> <p>扫描关注C语言学习网微信公众号，第一时间获取内容更新动态</p> <p>转载请说明来源于"C语言学习网"</p> <p>本文地址：<a href="https://www.cyuyanhs.com/article-99544.html" target="_blank">https://www.cyuyanhs.com/article-99544.html</a></p> </div> </div> <div class="clear"></div> <div class="info-pre-next"> <ul> <li><a href="https://www.cyuyanhs.com/article-99538.html"><i><em>上一篇</em><img src="https://www.cyuyanhs.com/static/assets/images/nopic-5.webp"></i> <h2>JavaScript中如何操作数组</h2> <p>这篇文章主要介绍了JavaScript中如何操作数组的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript中如何操作数组文章都会有所收获，下面我们一起来看看吧</p> </a></li> <li><a href="https://www.cyuyanhs.com/article-99546.html"><i><em>下一篇</em><img src="https://www.cyuyanhs.com/uploadfile/thumb/39/fa695bb2.jpg"></i> <h2>mysql数据库的身份认证和角色授权方式</h2> <p>这篇文章主要介绍"mysql数据库的身份认证和角色授权方式"，在日常操作中，相信很多人在mysql数据库的身份认证和角色授权方式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家</p> </a></li> </ul> </div> </div> </div> <div class="clear blank"></div> <div class="otherlink whitebg"> <div class="news-title"> <h2>相关文章</h2> </div> <ul> <li><a href="https://www.cyuyanhs.com/article-46689.html" title="版本控制系统（git + gitolite）">版本控制系统（git + gitolite）</a></li> <li><a href="https://www.cyuyanhs.com/article-19385.html" title="如何搭建母婴社区">如何搭建母婴社区</a></li> <li><a href="https://www.cyuyanhs.com/article-94950.html" title="云平台短信验证码通知短信java/php/.net开发实现">云平台短信验证码通知短信java/php/.net开发实现</a></li> <li><a href="https://www.cyuyanhs.com/article-21247.html" title="Java学习（随笔）—Spring boot简介以及Grad">Java学习（随笔）—Spring boot简介以及Grad</a></li> <li><a href="https://www.cyuyanhs.com/article-73476.html" title="VK1628 LED数显芯片,LED驱动显示液晶驱动兼用TM1628">VK1628 LED数显芯片,LED驱动显示液晶驱动兼用TM1628</a></li> <li><a href="https://www.cyuyanhs.com/article-28032.html" title="jira问题总结1">jira问题总结1</a></li> <li><a href="https://www.cyuyanhs.com/article-1210.html" title="jmeter基础系列——关联">jmeter基础系列——关联</a></li> <li><a href="https://www.cyuyanhs.com/article-47695.html" title="SpringBoot项目的parent依赖和配置文件*.properties、*.yml详解">SpringBoot项目的parent依赖和配置文件*.properties、*.yml详解</a></li> <li><a href="https://www.cyuyanhs.com/article-53698.html" title="家具定制跟踪管理系统，web开发工具【活字格】助企业一步跨入">家具定制跟踪管理系统，web开发工具【活字格】助企业一步跨入</a></li> <li><a href="https://www.cyuyanhs.com/article-63593.html" title="自建git服务器连接Pycharm系列一：使用centos7">自建git服务器连接Pycharm系列一：使用centos7</a></li> <!-- <li><a target="_blank" href="/">制作是这么收费的？</a></li> --> </ul> </div> </div> <!-- . end of left-box --> <!-- right aside start--> <aside class="side-section right-box"> <div class="side-tab"> <ul id="sidetab"> <li class="sidetab-current">站长推荐</li> <li>点击排行</li> </ul> <div id="sidetab-content"> <section> <div class="tuijian"> <section class="topnews imgscale"><a href="https://www.cyuyanhs.com/article-93983.html" title="怎么用开发技术赚外快？"><img src="https://www.cyuyanhs.com/static/assets/images/nopic.gif" alt="怎么用开发技术赚外快？"><span>怎么用开发技术赚外快？</span></a></section> <ul> <li><a href="https://www.cyuyanhs.com/article-84878.html" title="《网络安全法》，让安全与发展并行"><i><img src="https://www.cyuyanhs.com/static/assets/images/nopic.gif" alt="《网络安全法》，让安全与发展并行"></i> <p>《网络安全法》，让安全与发展并行</p> </a></li> <li><a href="https://www.cyuyanhs.com/article-71093.html" title="怎么在Redis中使用哨兵模式"><i><img src="https://www.cyuyanhs.com/uploadfile/thumb/b8/6ee0b100.jpg" alt="怎么在Redis中使用哨兵模式"></i> <p>怎么在Redis中使用哨兵模式</p> </a></li> <li><a href="https://www.cyuyanhs.com/article-34961.html" title="使用C语言怎么制作一个三子棋小游戏"><i><img src="https://www.cyuyanhs.com/uploadfile/thumb/31/3cbc7fcd.jpg" alt="使用C语言怎么制作一个三子棋小游戏"></i> <p>使用C语言怎么制作一个三子棋小游戏</p> </a></li> <li><a href="https://www.cyuyanhs.com/article-32927.html" title="IDEA 2020.3 版本的新特性有哪些"><i><img src="https://www.cyuyanhs.com/uploadfile/thumb/30/a06c517d.jpg" alt="IDEA 2020.3 版本的新特性有哪些"></i> <p>IDEA 2020.3 版本的新特性有哪些</p> </a></li> </ul> <section class="topnews imgscale"><a href="https://www.cyuyanhs.com/article-21837.html" title="使用PHP怎么对在线用户的数量进行统计"><img src="https://www.cyuyanhs.com/uploadfile/thumb/6f/416f14c6.jpg" alt="使用PHP怎么对在线用户的数量进行统计"><span>使用PHP怎么对在线用户的数量进行统计</span></a></section> <ul> <li><a href="https://www.cyuyanhs.com/article-12365.html" title="webstorm如何新建vue.js的项目"><i><img src="https://www.cyuyanhs.com/uploadfile/thumb/cc/9aba204c.jpg" alt="webstorm如何新建vue.js的项目"></i> <p>webstorm如何新建vue.js的项目</p> </a></li> <li><a href="https://www.cyuyanhs.com/article-21061.html" title="react中怎么优雅的使用svg"><i><img src="https://www.cyuyanhs.com/uploadfile/thumb/e4/97d664a8.jpg" alt="react中怎么优雅的使用svg"></i> <p>react中怎么优雅的使用svg</p> </a></li> <li><a href="https://www.cyuyanhs.com/article-67957.html" title="如何使用swoole搭建聊天室程序"><i><img src="https://www.cyuyanhs.com/uploadfile/thumb/2b/26c3ce13.jpg" alt="如何使用swoole搭建聊天室程序"></i> <p>如何使用swoole搭建聊天室程序</p> </a></li> <li><a href="https://www.cyuyanhs.com/article-3193.html" title="怎样编辑公众号"><i><img src="https://www.cyuyanhs.com/uploadfile/thumb/af/6e57b0cc.jpg" alt="怎样编辑公众号"></i> <p>怎样编辑公众号</p> </a></li> </ul> </div> </section> <section> <div class="paihang"> <section class="topnews imgscale"><a href="https://www.cyuyanhs.com/article-64997.html" title="Android中怎么对cookie进行处理"><img src="https://www.cyuyanhs.com/static/assets/images/nopic-8.webp" alt="Android中怎么对cookie进行处理"><span>Android中怎么对cookie进行处理</span></a></section> <ul> <li><i></i><a href="https://www.cyuyanhs.com/article-30795.html" title="怎么解决DNS被污染的问题">怎么解决DNS被污染的问题</a></li> <li><i></i><a href="https://www.cyuyanhs.com/article-56185.html" title="如何解决win10电脑卡慢问题">如何解决win10电脑卡慢问题</a></li> <li><i></i><a href="https://www.cyuyanhs.com/article-37092.html" title="Redis在Docker中的数据持久化是什么意思">Redis在Docker中的数据持久化是什么意思</a></li> <li><i></i><a href="https://www.cyuyanhs.com/article-98129.html" title="jquery如何改变元素对象的值">jquery如何改变元素对象的值</a></li> <li><i></i><a href="https://www.cyuyanhs.com/article-73474.html" title="安卓9.0正式定名Android Pie 暂仅支持Pixel手机">安卓9.0正式定名Android Pie 暂仅支持Pixel手机</a></li> <li><i></i><a href="https://www.cyuyanhs.com/article-68697.html" title="Jquery的Ajax使用方法有哪些">Jquery的Ajax使用方法有哪些</a></li> <li><i></i><a href="https://www.cyuyanhs.com/article-66626.html" title="MVC4制作中网站如何开发添加栏目">MVC4制作中网站如何开发添加栏目</a></li> <li><i></i><a href="https://www.cyuyanhs.com/article-61081.html" title="Python中Pandas如何对时间进行处理">Python中Pandas如何对时间进行处理</a></li> </ul> <section class="topnews imgscale"><a href="https://www.cyuyanhs.com/article-57430.html" title="Android中如何解决RecyclerView各种点击事件"><img src="https://www.cyuyanhs.com/static/assets/images/nopic-5.webp" alt="Android中如何解决RecyclerView各种点击事件"><span>Android中如何解决RecyclerView各种点击事件</span></a></section> </div> </section> </div> </div> <div class="whitebg cloud"> <h2 class="side-title">标签云</h2> <ul> <a target="_blank" href="https://www.cyuyanhs.com/tags-2376293.html">c语言网络技术和编程语言总结</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2326764.html">c语言对应的三级考试网络技术</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2377603.html">网站服务器后台如何加防护密码</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2140800.html">c语言软件开发步骤</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2356419.html">c语言中网络技术知识点</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2377614.html">服务器对权限提升的防护措施</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-999423.html">怎么在阿里云租服务器</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-800000.html">黑苹果能做web服务器吗</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2244145.html">c语言和网络技术哪个好考</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-797219.html">云服务器2核4G是什么性能</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2377868.html">租用服务器怎么防护</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1500002.html">云数据库的连接以及配置</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1199642.html">数据库优化的几种方法</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-999750.html">个人电脑变成网站服务器</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-798255.html">服务器账号密码找回</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-797824.html">如何选择电子商务网站服务器</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2137844.html">软件开发最厉害的是c语言吗</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2377869.html">服务器cc防护解决方案</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2377587.html">云服务器邮箱防护</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1999522.html">移动软件开发的相关资料</a> </ul> </div> <div class="clear blank"></div> <div class="whitebg suiji"> <h2 class="side-title">猜你喜欢</h2> <ul> <li><a href="https://www.cyuyanhs.com/article-57164.html" title="MySQL出现1067错误怎么解决">MySQL出现1067错误怎么解决</a></li> <li><a href="https://www.cyuyanhs.com/article-52343.html" title="企业域名是什么">企业域名是什么</a></li> <li><a href="https://www.cyuyanhs.com/article-46780.html" title="Redis分布式锁该怎么实现续期">Redis分布式锁该怎么实现续期</a></li> <li><a href="https://www.cyuyanhs.com/article-26435.html" title="jQuery+PHP实现图片上传并提交功能">jQuery+PHP实现图片上传并提交功能</a></li> <li><a href="https://www.cyuyanhs.com/article-74296.html" title="Linux中如何实现crontab定时执行任务">Linux中如何实现crontab定时执行任务</a></li> <li><a href="https://www.cyuyanhs.com/article-73059.html" title="PHP怎么实现文件上传后台处理脚本">PHP怎么实现文件上传后台处理脚本</a></li> <li><a href="https://www.cyuyanhs.com/article-70111.html" title="华为pot-al00a是什么型号（华为pot-al00a是什么型号）">华为pot-al00a是什么型号（华为pot-al00a是什么型号）</a></li> <li><a href="https://www.cyuyanhs.com/article-66096.html" title="怎么用CSS3+DIV实现小三角形边框效果">怎么用CSS3+DIV实现小三角形边框效果</a></li> <li><a href="https://www.cyuyanhs.com/article-65771.html" title="Java怎么实现六边形架构">Java怎么实现六边形架构</a></li> <li><a href="https://www.cyuyanhs.com/article-62022.html" title="数据库篇——完全、增量备份和恢复">数据库篇——完全、增量备份和恢复</a></li> </ul> </div> </aside> <!-- right aside end--> </article> <div class="clear blank"></div> <!--footer start--> <footer> <div class="footer box"> <div class="wxbox"> <ul> <li><img src="https://www.cyuyanhs.com/static/zsymb/images/wxgzh.jpg"><span>微信公众号</span></li> <li><img src="https://www.cyuyanhs.com/static/zsymb/images/wx.png"><span>我的微信</span></li> </ul> </div> <div class="endnav"> <p><b>站点声明：</b></p> <p>所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。</p> <p>Copyright © 2009-2022 <a href="https://www.cyuyanhs.com/" target="_blank">C语言学习网</a> All Rights Reserved. <a href="/sitemap.xml">网站地图</a> <a href="/about/">关于我们</a> <a href="/contact-us/">联系我们</a> </p> </div> </div> </footer> <a href="#" title="返回顶部" class="icon-top"></a> <!--footer end--> <div style="display:none"> <!-- site_tongji --> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-8NB007QMMH"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-8NB007QMMH'); </script> <!-- baidu_push --> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> <div style="display:none"> <span class="dr_show_hits_99544">0</span><script type="text/javascript"> $.ajax({ type: "GET", url:"/index.php?s=api&c=module&siteid=1&app=article&m=hits&id=99544", dataType: "jsonp", success: function(data){ if (data.code) { $(".dr_show_hits_99544").html(data.msg); } else { dr_tips(0, data.msg); } } }); </script></div> <!--本页面URL https://www.cyuyanhs.com/article-99544.html --> <!--本页面于2022-08-12 17:09:50更新--> </body> </html>