客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
上一篇介绍了html5标签video（播放器）初始化需要做的一些工作，如何简单快速使用html5的播放器，本文将重点介绍如何用JS来操作video标签，也就是如何对video做一些简单基本的操作，包括了播放器的播放、暂停，音量的读取、设置等写相关操作，从而开始播放器的扩展之路。 本文的目录： 1.获取影片总时长 第一、获取影片总时长 对播放器（video）操作，首先要得到的是影片的一些信息，其中一个就是总时长，除了内容以为，总时长也是第一时间要显示的。在对video进行操作的的前先给video标签添加一个ID，这样方便我们获取video元素 复制代码 代码如下:<video id="myVideo" controls preload="auto" width=300 height="165" poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"> </video> 设置一个ID后，那么就可以开始操作了，要获取总时长，要用到video的一个事件-loadedmetadata，这个事件的触发表示元数据（媒体的一些基本信息）已经加载完成，用addEventListener监听事件 复制代码 代码如下:var myVideo = document.getElementById('myVideo');//获取video元素 myVideo.addEventListener("loadedmetadata", function(){ //要执行的代码 }); 好了，已经监听了，那么接下来要做的就是获取总时长，其实就是一个属性-duration var myVideo = document.getElementById('myVideo')//获取video元素 ,tol = 0 ; myVideo.addEventListener("loadedmetadata", function(){ tol = myVideo.duration;//获取总时长 }); 需要注意的是获取到的在总时长的单位为秒，显示的时候根据需要去转换。 第二、播放、暂停 对播放器来说最基本的一个功能就是播放和暂停了，而在获取总时长后，接着的操作也就是播放和暂停。这个时候用到了video的两个方法就是play和pause 复制代码 代码如下:var myVideo = document.getElementById('myVideo')//获取video元素 ,tol = 0 ; myVideo.addEventListener("loadedmetadata", function(){ tol = myVideo.duration;//获取总时长 });</p> <p> //播放 function play(){ myVideo.play(); }</p> <p> //暂停 function pause(){ myVideo.pause(); } 需要注意的是，当播放结束后再运行play方法将会从头播放。 第三、获取影片的播放时间和设置播放点 播放器能播放和暂停后，那么接下来需要看到的就是影片播放了多久，播放到哪个时间点了。这个操作跟获取总时长很相似，都是需要监听一个事件和获取一个属性的值，那么用到的是video的timeupdate事件和currentTime属性 复制代码 代码如下://播放时间点更新时 myVideo.addEventListener("timeupdate", function(){ var currentTime = myVideo.currentTime;//获取当前播放时间 console.log(currentTime);//在调试器中打印 }); 运行后会在控制台看到很多数据... 我们经常会接到一个要求，那就是上次看到了10分钟了，这次看要从第十分钟开始看，那么这个时候就需要设置播放点了，设置播放点用得还是currentTime属性，currentTime属性是可读写的，要注意的是设置值的单位是秒，如果播放点不是秒为单位那就要进行转换 复制代码 代码如下://设置播放点 function playBySeconds(num){ myVideo.currentTime = num; } 第四、音量的获取和设置 播放器播放的过程中能暂停、播放，知道现在播放到哪里了和可以从某个时间点开始播放，那么接下来操作的就是音量了。这一点跟第三相似，获取音量可以直接用volume属性就可以了，但是在这里还要介绍的是音量改变的触发事件，方面以后需要自定义UI使用，那就是volumechange事件 复制代码 代码如下://音量改变时 myVideo.addEventListener("volumechange", function(){ var volume = myVideo.volume;//获取当前音量 console.log(volume);//在调试器中打印 }); 当你通过控制条来改变音量时，你会看到调试里面有很多数据。要注意的是音量的范围值为0~1，一般在UI中都是用百分比，所以需要的时候要进行转换。 音量是可以通过改变属性来设置的，跟播放的时间点是相似的，只不过音量设置的是volume属性 复制代码 代码如下://设置音量 function setVol(num){ myVideo.volume = num; } 下面是完整的代码： 复制代码 代码如下:<!DOCTYPE html> <html> <head> <title>Video step2</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> <video id="myVideo" controls preload="auto" width=300 height="165" poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"> </video> <script> var myVideo = document.getElementById('myVideo')//获取video元素 ,tol = 0 //总时长 ; myVideo.addEventListener("loadedmetadata", function(){ tol = myVideo.duration;//获取总时长 });</p> <p>//播放 function play(){ myVideo.play(); }</p> <p>//暂停 function pause(){ myVideo.pause(); }</p> <p>//播放时间点更新时 myVideo.addEventListener("timeupdate", function(){ var currentTime = myVideo.currentTime;//获取当前播放时间 console.log(currentTime);//在调试器中打印 });</p> <p>//设置播放点 function playBySeconds(num){ myVideo.currentTime = num; }</p> <p>//音量改变时 myVideo.addEventListener("volumechange", function(){ var volume = myVideo.volume;//获取当前音量 console.log(volume);//在调试器中打印 });</p> <p>//设置音量 function setVol(num){ myVideo.volume = num; } </script> </body> </html> 总结：通过这四个步骤来了解html5标签video（播放器）的基本操作，而这些操作主要是通过JS来监听video的事件和对video属性的读写来完成的，熟悉这四点即可灵活的在使用播放器，再根据应用场景来调整即可。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论