本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来HTML5的video标签操作视频详解,HTML5的video标签操作视频的注意事项有哪些,下面就是实战案例,一起来看一下。在现在对于网站制作的研究中,各方面的人员使用没有停止过,一直在不停的专研,其中HTML5的使用就是很大的一突破,对于HTML5的video标签相信很多人还不知道怎么控制播放,这里文章就给大家介绍下具体控制播放的方法,感兴趣的一起来了解下。
本文的目录:
1.获取影片总时长
2.播放、暂停
3.获取影片已播放时间和设置播放点
4.音量的获取和设置
第一、获取影片总时长
对播放器(video)操作,首先要得到的是影片的一些信息,其中一个就是总时长,除了内容以为,总时长也是第一时间要显示的。在对video进行操作的的前先给video标签添加一个ID,这样方便我们获取video元素
复制代码
代码如下:
设置一个ID后,那么就可以开始操作了,要获取总时长,要用到video的一个事件-loadedmetadata,这个事件的触发表示元数据(媒体的一些基本信息)已经加载完成,用addEventListener监听事件
复制代码
代码如下:
1 2 3 4 | var myVideo = document.getElementById('myVideo');//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
//要执行的代码
});
|
好了,已经监听了,那么接下来要做的就是获取总时长,其实就是一个属性-duration
1 2 3 4 5 | var myVideo = document.getElementById('myVideo')//获取video元素
,tol = 0;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//获取总时长
});
|
需要注意的是获取到的在总时长的单位为秒,显示的时候根据需要去转换。
第二、播放、暂停
对播放器来说最基本的一个功能就是播放和暂停了,而在获取总时长后,接着的操作也就是播放和暂停。这个时候用到了video的两个方法就是play和pause
复制代码
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 | 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属性
复制代码
代码如下:
1 2 3 4 5 | //播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
var currentTime = myVideo.currentTime;//获取当前播放时间
console.log(currentTime);//在调试器中打印
});
|
运行后会在控制台看到很多数据...
我们经常会接到一个要求,那就是上次看到了10分钟了,这次看要从第十分钟开始看,那么这个时候就需要设置播放点了,设置播放点用得还是currentTime属性,currentTime属性是可读写的,要注意的是设置值的单位是秒,如果播放点不是秒为单位那就要进行转换
1 2 3 4 | //设置播放点
function playBySeconds(num){
myVideo.currentTime = num;
}
|
第四、音量的获取和设置
播放器播放的过程中能暂停、播放,知道现在播放到哪里了和可以从某个时间点开始播放,那么接下来操作的就是音量了。这一点跟第三相似,获取音量可以直接用volume属性就可以了,但是在这里还要介绍的是音量改变的触发事件,方面以后需要自定义UI使用,那就是volumechange事件
1 2 3 4 5 | myVideo.addEventListener( "volumechange" , function (){
var volume = myVideo.volume;
console.log(volume);
});
|
当你通过控制条来改变音量时,你会看到调试里面有很多数据。要注意的是音量的范围值为0~1,一般在UI中都是用百分比,所以需要的时候要进行转换。
音量是可以通过改变属性来设置的,跟播放的时间点是相似的,只不过音量设置的是volume属性
1 2 3 4 | function setVol(num){
myVideo.volume = num;
}
|
下面是完整的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!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属性的读写来完成的,熟悉这四点即可灵活的在使用播放器,再根据应用场景来调整即可。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
django控件及传参使用详解
Echarts实现动态变色柱状图
jQuery操作textarea输入字数限制
以上就是HTML5的video标签操作视频详解的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
妙味课堂HTML5视频资料分享
html中header定义什么意思
HTML5比flash好在哪
HTML5/css3 3d立方体旋转动画经典案例
htnl5利用svg页面高斯模糊的方法
HTML5动画有什么用?
利用HTML5的一个特性- deviceorientation来实现手机上摇一摇功能
HTML5文件上传插件遇到的技术问题
HTML5表单新增元素与属性
详解HTML5 postmessage解决跨域通信的问题
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5的video标签操作视频详解