android html5 video 格式,关于H5 video在移动端播放问题
常见问题和解决方案：
1、video添加自动播放属性autoplay，无法正常播放视频。
解决方案：
需要在video标签中添加muted属性但是设置muted之后，它规定视频的音频输出时应该被 静音。
2、在一些安卓浏览器播放视频的时候，不能在H5页面播放视频，系统会自动接管视频。
解决方案：
添加内联播放属性；
如果需要在H5页面内播放视频，需要在video标签加上webkit-playsinline，在一些ios上还需要加上playsinline。
可以同时加上这两个属性：
有些app还需要支持内联播放的模式，这时候需要加上：
webview.allowsInlineMediaPlayback = YES;
3、可能是视频被接管的原因，移动端播放视频有时候无法直接播放或有卡顿的现象。
解决方案：
启用H5内核H5播放器;
在video标签中添加启动H5播放的属性：x5-video-player-type="h5"
如：
4、video无法铺满整个屏幕
解决方案：
video标签加上 style="width= 100%; height=100%; object-fit: fill"；
5、移动端①播放时，点击暂停并出现蒙层；②暂停时，点击播放并且蒙层消失；
①创建一个蒙层的div，使用video的方法：播放play()、暂停pause()；
②使用事件委托也是可以实现的；
参考思路和代码(样式不写啦)：
webkit-playsinline playsinline x5-video-player-type="h5" x5-video-orientation="portraint">
Your browser does not support HTML5 video.
$(document).ready(function () {
// video play
$('.video-mask').on('click', function () {
maskCancel();
$('#video').get(0).play(); //play不是jQuery函数，而是DOM函数，需要通过DOM来调用play
})
// video pause
$('.video-wrap').on('click', function () {
$('#video').get(0).pause();
maskShow();
})
// 监听视频播放，结束时出现暂停按钮和蒙层
$('#video').on('ended', function () {
maskShow();
})
})
var video_mask = $(".video-mask"),
video_pause = $(".video-pause"),
video = $("#video");
//video-mask/video-pause show
function maskShow() {
video_mask.css('display', 'block');
video_pause.css('display', 'block');
}
//video-mask/video-pause cancel
function maskCancel() {
video_mask.css('display', 'none');
video_pause.css('display', 'none');
}
6、监听视频是否结束
主要用到的是 监听的 ended事件；
//js写法
var video=document.getElementById("video");
video.addEventListener('ended', function () {
console.log('play over!');;
}, false);
//jQuery写法
$('#video').on('ended',function(){
console.log('play over!');
})
注意：addEventListener是js的监听事件，如果在jQuery中这样使用是会出错的，在jQuery中监听可以使用on。
7、关于jQuery使用H5视频播放事件play()、暂停事件pause()出错问题：
在js中使用document.getElementById(‘video’).play();是可以的；
但是在jQuery中使用$('#video').play()就是错误的。
原因：H5的play()/pause()都不是 jQuery函数，而是DOM函数，如果jQuery要使用play()/pause(),需要通过DOM来调用play()/pause()
如：$('#video').get(0).play()
8、关于H5中的自定义属性
H5标准规定，自定义的属性都以data-*开头,这样区分了固有属性和自定义属性，我们可以通过原生js的getAttribute()和jQuery中的attr()来获取我们自定义的属性。如：
总之，在这过程中遇到了很多问题，有些还没想起来，等想起来再去完善记录吧，这边简单记录一下。如果文章对你有用就点个小心心鼓励一下吧。