总结移动端video视频播放的坑

时间：2025-01-27 18:04:21

1、x5同层播放器

移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮盖。后来这个问题在iOS下得到了解决，但是Android的浏览器则问题依旧。X5是腾讯基于Webkit开发的渲染引擎，它提供了一种名叫「同层播放器」的特殊video元素以解决遮盖问题。

只要给普通的video元素加上X5的自定义属性 x5-video-player-type，就可以调用同层播放器。

<div class="player">
    <video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5">
        <source src="video.mp4" />
    </video>
</div>
复制代码

同层播放器的视频样式和ios的视频播放器是一样的。安卓的原生播放器（非同层播放器）无法控制是否自动播放、点击播放时是否自动全屏。

2、autoplay自动播放

video标签可以设置自动播放，只需在标签设置autoplay即可。但是，设置自动播放是会有兼容性问题的，并不是所有机型都可以。

1.我所遇到的，设置了autoply ios基本可以实现自动播放，但是要设置静音，即：没音频轨道，或者设置了muted属性。

2.安卓的话，只有部分机型可以自动播放。而且不能模拟自动播放，一定要有用户行为才可以触发播放。

3、视频行内播放

默认情况下，点击video播放会全屏播放，如果想要视频在局部内可以播放的话，可以设置：x5-playsinline

4、视频全屏播放后的大小

这个情况只针对安卓的同层播放器播放时全屏播放的情况。在同层播放器全屏播放后，视频底色会变成黑色，然后视频只是在中间居中，大小是原来视频设置的大小，并不是会全屏铺满。

效果如图。
1、我第一次采用的方案是，当视频全屏时，会触发onresize方法，在该方法里面强制把视频的大小设置为屏幕的宽高： 

let video = this.$refs.video;
            // 以下代码是为了解决安卓播放无办法自动全屏
            ('play',() => {
                ('play')
                     = function () {
                    ('.video-container'). =  + "px";
                    ('.video-container'). =  + "px";         
                    }
            })
            ('pause',() => {
                ('pause')
                 = function () {
                    ('.video-container'). = "270px";
                    ('.video-container'). = "170px";
                }
            })
复制代码

但是这种方法，由于是整个视频的尺寸直接设置为当前屏幕的宽高，因此测试反映说视频被拉伸变形了，因为尺寸不是按照比例的。 2、因此，采取以下方案。videoHeight()和videoWidth()分别获取原视频的高和宽，然后与屏幕的宽高计算出比例。

            if () {
                ('play', () => {
                    // ('play');
                     = () => {
                        // ('onresize-play');
                         = true;
                        let vheight = ();
                        let vweight = ();
                        let clientHeight = ;
                        ('.video-container'). = (clientHeight * vweight) / vheight + 'px';
                        ('.video-container'). = clientHeight + 'px';
                        ('#my-video'). = 'black';
                    };
                });
                ('pause', () => {
                    // ('pause');
                     = () => {
                        // ('onresize-pause');
                         = false;
                        // 全屏后，华为等部分机型会有白边，是页面的颜色，用该值控制背景色
                        ('.video-container'). = '270px';
                        ('.video-container'). = '170px';
                    };
                });
            }
        },
复制代码

5、视频全屏后出现白边

安卓启用同层播放器后全屏出现的，这是个很诡异的问题，仅在部分的安卓机型下出现。如图：

经过排查，该白边是页面的颜色，就是同层播放器的全屏是把这个页面旋转过来，然后区域放大这样。 解决方法：全屏时把页面背景色设置为黑色，取消全屏时改回来。

相关文章