H5内video标签属性事件

常用H5video标签用法

<video src="https://www.w3school.com.cn/i/movie.mp4" id="Myvideo"   webkit-playsinline="true"
	x-webkit-airplay="true" playsinline="true" x5-video-player-fullscreen="true"
	x5-video-player-type="h5-page">
</video>

属性说明：

     controls  /*这个属性规定浏览器为该视频提供播放控件*/  
     webkit-playsinline="true"  /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/  
     x-webkit-airplay="true"  /*这个属性还不知道作用*/ 
     playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
     x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
     x5-video-orientation="h5" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
     x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
     preload="auto" /*这个属性规定页面加载完成后载入视频*/ 
     poster:'../img/video.png'/*视频封面*/ 

video视频监听方法

//获取视频DOM元素
var myVideo = document.getElementById("myVideo");

//监听加载中
 myVideo.addEventListener('waiting', function () { //加载
    console.log("加载中");
});

myVideo.oncanplay = function(){
    console.log("准备就绪");    
};

//视频的总长度
myVideo.addEventListener('loadedmetadata', function () { //加载数据
    console.log(elevideo.duration);
});


//监听播放开始
myVideo.addEventListener('play',function(){
    console.log("开始播放");
});

//监听播放中
myVideo.addEventListener('playing', function () {
   console.log("播放中");
});


//监听播放暂停
myVideo.addEventListener('pause',function(){
    console.log("播放暂停");
}); 

//监听播放结束
myVideo.addEventListener('ended',function(){
    console.log("播放结束");
});
    
//使用事件监听方式捕捉事件， 此事件可作为实时监测video 播放状态
myVideo.addEventListener("timeupdate",function(){
     //用秒数来显示当前播放进度
    var timeDisplay;
    timeDisplay = Math.floor(myVideo.currentTime);
},false);

// 进入全屏的方法
const fullScreen = () => {
	let vid = document.getElementById("myVideo");
	if (vid.requestFullscreen) {
		vid.requestFullscreen();
	} else if (vid.mozRequestFullScreen) {
		vid.mozRequestFullScreen();
	} else if (vid.webkitRequestFullscreen) {
		vid.webkitRequestFullscreen();
	} else if (vid.webkitEnterFullscreen) {
		vid.webkitEnterFullscreen();
	}
}