JavaScript怎么实现控制视频
发表于：2022-12-09 作者：安全数据网编辑
编辑最后更新 2022年12月09日，这篇"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-455215.html">逆向是网络安全方向吗</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1949503.html">端游是用什么软件开发的</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-326244.html">网络安全有哪些特征</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-408827.html">所有人这份网络安全小贴士请收好</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-453146.html">公共场所网络安全</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-382228.html">疫情期间网络安全风险研判</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1036416.html">步道乐跑啥时候关服务器</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2336363.html">测控网络技术考试0</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-784882.html">国家反诈未找到主机名的服务器</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1499334.html">数据库中没有织梦系统</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2335259.html">广州营易网络技术有限公司电话</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-742482.html">华为5885HV5服务器密码</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-80129.html">做网络安全的研究生有出路吗</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1467730.html">爬取表格数据库</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1830452.html">软件开发菜鸟什么样子</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1394254.html">数据库要避免外键吗</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-2223508.html">营口奇点网络技术有限公司</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1033202.html">dell服务器系统</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1537915.html">为什么要有分布式数据库</a> <a target="_blank" href="https://www.cyuyanhs.com/tags-1331205.html">db数据库精确查询语句</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-万得数据库如何剔除st">万得数据库如何剔除st</a> <a target="_blank" href="https://www.cyuyanhs.com/s-oracle数据库三个范式">oracle数据库三个范式</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-1.html" title="怎样使用CSS实现盒子水平垂直居中"><img src="https://www.cyuyanhs.com/uploadfile/thumb/f9/63075a7a.jpg" alt="怎样使用CSS实现盒子水平垂直居中"><span>怎样使用CSS实现盒子水平垂直居中</span></a></section> <ul> <li><i></i><a href="https://www.cyuyanhs.com/article-3.html" title="inner join与left join的区别是什么">inner join与left join的区别是什么</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-57430.html" title="Android中如何解决RecyclerView各种点击事件">Android中如何解决RecyclerView各种点击事件</a></li> <li><i></i><a href="https://www.cyuyanhs.com/article-64997.html" title="Android中怎么对cookie进行处理">Android中怎么对cookie进行处理</a></li> <li><i></i><a href="https://www.cyuyanhs.com/article-897.html" title="怎么使用weixin-java-miniapp配置进行单个小程序">怎么使用weixin-java-miniapp配置进行单个小程序</a></li> <li><i></i><a href="https://www.cyuyanhs.com/article-725.html" title="Oracle11g 的 HR 样例用户的建立">Oracle11g 的 HR 样例用户的建立</a></li> <li><i></i><a href="https://www.cyuyanhs.com/article-860.html" title="腾科张老师教你如何在cisco路由器上部署和使用FTP/TFTP">腾科张老师教你如何在cisco路由器上部署和使用FTP/TFTP</a></li> <li><i></i><a href="https://www.cyuyanhs.com/article-723.html" title="怎样利用Raspberry Pi的硬件和 Python语言来完成一个机器人制作">怎样利用Raspberry Pi的硬件和 Python语言来完成一个机器人制作</a></li> </ul> <section class="topnews imgscale"><a href="https://www.cyuyanhs.com/article-760.html" title="V8引擎如何执行JavaScript代码"><img src="https://www.cyuyanhs.com/uploadfile/thumb/e9/ad012ff7.jpg" alt="V8引擎如何执行JavaScript代码"><span>V8引擎如何执行JavaScript代码</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-66467.html" title="docker图形化管理工具Portainer怎么用">docker图形化管理工具Portainer怎么用</a></li> <li><a href="https://www.cyuyanhs.com/article-30795.html" title="怎么解决DNS被污染的问题">怎么解决DNS被污染的问题</a></li> <li><a href="https://www.cyuyanhs.com/article-56185.html" title="如何解决win10电脑卡慢问题">如何解决win10电脑卡慢问题</a></li> <li><a href="https://www.cyuyanhs.com/article-6057.html" title="10.nessus漏扫系统的下载和更新插件">10.nessus漏扫系统的下载和更新插件</a></li> <li><a href="https://www.cyuyanhs.com/article-37092.html" title="Redis在Docker中的数据持久化是什么意思">Redis在Docker中的数据持久化是什么意思</a></li> <li><a href="https://www.cyuyanhs.com/article-36800.html" title="PHP能不能不用Apache运行">PHP能不能不用Apache运行</a></li> <li><a href="https://www.cyuyanhs.com/article-98129.html" title="jquery如何改变元素对象的值">jquery如何改变元素对象的值</a></li> <li><a href="https://www.cyuyanhs.com/article-68697.html" title="Jquery的Ajax使用方法有哪些">Jquery的Ajax使用方法有哪些</a></li> <li><a href="https://www.cyuyanhs.com/article-66626.html" title="MVC4制作中网站如何开发添加栏目">MVC4制作中网站如何开发添加栏目</a></li> <li><a href="https://www.cyuyanhs.com/article-61081.html" title="Python中Pandas如何对时间进行处理">Python中Pandas如何对时间进行处理</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-12-09 00:32:45更新--> </body> </html>