移动端视频h5表现问题汇总
1. 同屏播放视频
<video src="" x-webkit-airplay="true" webkit-playsinline="true" playsinline />2. 移动端视频预加载
由于移动端不能预加载视频，所以hack一种方案：监听WXJSBridge WeixinJSBridgeReady，先播放再暂停，这样当触发播放视频时就不用等待，就不会出现黑屏情况。
// 预加载视频hack
function preload() {
document.getElementById('video').play();
setTimeout(function () {
document.getElementById('video').pause();
}, 200);
}
document.addEventListener("WeixinJSBridgeReady", preload, false);3. 滑动播放视频
微信安卓环境下需要在touchmove事件中阻止掉默认事件，否则不能触发视频播放
// 滑动或点击播放视频
ele.addEventListener('touchmove', function (event) {
event.preventDefault();
});
ele.addEventListener('touchend', function () {
video.play();
})4. 微信安卓下视频异常表现（由于安卓机型众多，这里测试过部分机型基本都会出现）
由于微信安卓版本基于x5内核，视频会出现全屏按钮，而且去不掉，会误导用户点击，所以一个想法是在微信环境下将视频一帧帧绘制到canvas上，缺点是低端机型可能会出现花屏情况。
且微信安卓环境下视频播放时，整个页面如果有bgm，也会暂停bgm，当视频播放完毕时，才会继续播放视频；ios下不会。
// 绘制视频到canvas
function video2canvas(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');//获取绘图环境
var video = document.getElementsByTagName('video')[0];
video.play();
video.addEventListener('play', function(){
setInterval(function(){
ctx.drawImage(video, 0, 0, 200, 200);
}, 20);
});
}部分机型开始播放出现黑屏（当 currentTime 更新时会触发 timeupdate 事件）。
video.addEventListener('timeupdate', () => {
// 当视频的currentTime大于0.1时表示黑屏时间已过
if (video.currentTime > 0.1) {
// 去掉视频上的浮层
}
})安卓下由于由x5内核接管，视频位于页面最顶部，播放完可能会有推广视频，所以在视频播放完需要移除掉视频；也可以监听ended事件。
video.addEventListener('timeupdate', () => {
// 兼容x5，时间为视频时长
if (video.currentTime > 10) {
// 移除视频
}
}, false)
video.addEventListener('ended', () => {})5. 视频压缩
利用高质量的H264+AAC视频压制，压缩率高达80%（https://maruko.appinn.me/）
6. 视频参数
获取当前播放时间点：video.currentTime，也可以直接设置 video.currentTime 的值来控制播放进度；
视频静音：muted；
默认样式：controls；
来自：https://www.cnblogs.com/colima/archive/2019/02/14/10306784.html
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
