HTML5 video标识(播发器)学习培训笔记(2):播发

日期:2021-02-25 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

上1篇详细介绍了html5标识video(播发器)原始化必须做的1些工作中,怎样简易迅速应用html5的播发器,本文将关键详细介绍怎样用JS来实际操作video标识,也便是怎样对video做1些简易基础的实际操作,包含了播发器的播发、中止,声音的载入、设定等写有关实际操作,从而刚开始播发器的拓展之路。

本文的文件目录:   

1.获得影片总时长
2.播发、中止
3.获得影片已播发時间和设定播发点
4.声音的获得和设定

第1、获得影片总时长

对播发器(video)实际操作,最先要获得的是影片的1些信息内容,在其中1个便是总时长,除內容认为,总时长也是第1時间要显示信息的。在对video开展实际操作的的前先给video标识加上1个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>

设定1个ID后,那末便可以刚开始实际操作了,要获得总时长,要用到video的1个恶性事件-loadedmetadata,这个恶性事件的开启表明元数据信息(新闻媒体的1些基础信息内容)早已载入进行,用addEventListener监视恶性事件

拷贝编码
编码以下:

var myVideo = document.getElementById('myVideo');//获得video元素
myVideo.addEventListener("loadedmetadata", function(){
//要实行的编码
});
好了,早已监视了,那末接下来要做的便是获得总时长,实际上便是1个特性-duration
var myVideo = document.getElementById('myVideo')//获得video元素
,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//获得总时长
});

必须留意的是获得到的在总时长的企业为秒,显示信息的情况下依据必须去变换。   

第2、播发、中止

对播发器来讲最基础的1个作用便是播发和中止了,而在获得总时长后,接着的实际操作也便是播发和中止。这个情况下用到了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方式可能从头开始播发。

    第3、获得影片的播发時间和设定播发点

    播发器能播发和中止后,那末接下来必须看到的便是影片播发了多久,播发到哪一个時间点了。这个实际操作跟获得总时长很类似,全是必须监视1个恶性事件和获得1个特性的值,那末用到的是video的timeupdate恶性事件和currentTime特性

拷贝编码
编码以下:

//播发時间点升级时
myVideo.addEventListener("timeupdate", function(){
var currentTime = myVideo.currentTime;//获得当今播发時间
console.log(currentTime);//在调节器中复印
});

    运作后会在操纵台看到许多数据信息...

    大家常常会接到1个规定,那便是之前看到了10分钟了,这次看要从第10分钟刚开始看,那末这个情况下就必须设定播发点了,设定播发点用得還是currentTime特性,currentTime特性是可读写能力的,要留意的是设定值的企业是秒,假如播发点并不是秒为企业那就要开展变换

拷贝编码
编码以下:

//设定播发点
function playBySeconds(num){
myVideo.currentTime = num;
}

    第4、声音的获得和设定

    播发器播发的全过程中能中止、播发,了解如今播发到哪里了和能够从某个時间点刚开始播发,那末接下来实际操作的便是声音了。这1点跟第3类似,获得声音能够立即用volume特性便可以了,可是在这里还要详细介绍的是声音更改的开启恶性事件,层面之后必须自定UI应用,那便是volumechange恶性事件

拷贝编码
编码以下:

//声音更改时
myVideo.addEventListener("volumechange", function(){
var volume = myVideo.volume;//获得当今声音
console.log(volume);//在调节器中复印
});

    当你根据操纵条来更改声音时,你会看到调节里边有许多数据信息。要留意的是声音的范畴值为0~1,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⑻"/>
</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>

    总结:根据这4个流程来掌握html5标识video(播发器)的基础实际操作,而这些实际操作关键是根据JS来监视video的恶性事件和对video特性的读写能力来进行的,熟习这4点便可灵便的在应用播发器,再依据运用情景来调剂便可。