常用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();
}
}