定义:
<video.src="./movie.mp4"></video>
或
<video>
<source src="./movie1.mp4">
<source src="./movie2.mp4">
<source src="./movie3.mp4">
</video>
video的事件
canplay() 视频可以播放的时候执行
timeupdate() 播放时间改变就会触发
video的方法:
play() 播放视频
pause() 暂停视频
全屏:对应浏览器内核+RequestFullScreen()
mozRequestFullScreen()--火狐
webkitRequestFullScreen()--谷歌
video的属性:
paused 判断当前视频是否暂停,暂停返回true,反之返回false
disablePictureInPicture 禁用 video 元素的画中画特性
currentTime 返回视频当前播放的秒数时间
duration 返回视频总秒数时长
controls 显式播放控件
loop 循环
muted 静音
autoplay 自动播放(谷歌浏览器有限制,静音后才能自动播放)
进度条:
<progress max="100" value="0" id="progress"></progress>
进度条点击事件:
progress.οnclick=function(e){
console.log(this.offsetWidth)
console.log(e.offsetX)
}
this.offsetWidth ---总宽度
e.offsetX ---点击位置水平方向距离左侧顶点的距离
封装一个能匹配浏览器内核的方法,调用:getFullMethod(videoObj)
function getFullMethod ( parms ) {
if ( parms . webkitRequestFullScreen ) {
return parms . webkitRequestFullScreen ();
} else if ( parms . mozRequestFullScreen ) {
return parms . mozRequestFullScreen ()
} else if ( parms . msRequestFullScreen ) {
return parms . msRequestFullScreen ()
} else if ( parms . oRequestFullScreen ) {
return parms . oRequestFullScreen ()
}