移动端视频h5表现问题汇总

原文链接:http://www.cnblogs.com/colima/p/10306784.html

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/p/10306784.html

上一篇:javascript – “DomContentLoaded”在我的浏览器中不起作用?


下一篇:javascript – 如何通过JQuery触发JS native,甚至addEventListener(“change”,function)