大佬教程收集整理的这篇文章主要介绍了html5标签video(播放器)学习笔记(二)-基本操作,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
上一篇介绍了html5标签video(播放器)初始化需要做的一些工作,如何简单快速使用html5的播放器,本文将重点介绍如何用JS来操作video标签,也就是如何对video做一些简单基本的操作,包括了播放器的播放、暂停,音量的读取、设置等写相关操作,从而开始播放器的扩展之路。
第一、获取影片总时长
对播放器(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元素,function(){ tol = myVideo.duration;//获取总时长 }); //播放 function play(){ myVideo.play(); } //暂停 function pause(){ myVideo.pause(); }
第三、获取影片的播放时间和设置播放点
播放器能播放和暂停后,那么接下来需要看到的就是影片播放了多久,播放到哪个时间点了。这个操作跟获取总时长很相似,都是需要监听一个事件和获取一个属性的值,那么用到的是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;//获取总时长 }); //播放 function play(){ myVideo.play(); } //暂停 function pause(){ myVideo.pause(); } //播放时间点更新时 myVideo.addEventListener("timeupdate",function(){ var currentTime = myVideo.currentTime;//获取当前播放时间 console.log(currentTimE);//在调试器中打印 }); //设置播放点 function playBySeconds(num){ myVideo.currentTime = num; } //音量改变时 myVideo.addEventListener("volumechange",function(){ var volume = myVideo.volume;//获取当前音量 console.log(volumE);//在调试器中打印 }); //设置音量 function setVol(num){ myVideo.volume = num; } </script> </body> </html>
总结:通过这四个步骤来了解html5标签video(播放器)的基本操作,而这些操作主要是通过JS来监听video的事件和对video属性的读写来完成的,熟悉这四点即可灵活的在使用播放器,再根据应用场景来调整即可。
以上是大佬教程为你收集整理的html5标签video(播放器)学习笔记(二)-基本操作全部内容,希望文章能够帮你解决html5标签video(播放器)学习笔记(二)-基本操作所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。