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

最新推荐文章于 2024-03-15 16:55:54 发布

weixin_33962923

最新推荐文章于 2024-03-15 16:55:54 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

文章标签：移动开发 java javascript ViewUI

原文链接：https://juejin.im/post/5cb6d36c6fb9a06880144666

本文详细介绍了腾讯X5渲染引擎中同层播放器的使用方法，包括如何通过自定义属性实现视频遮盖、自动播放、行内播放等功能，以及解决安卓全屏播放后视频尺寸和白边问题的技术方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
            // 以下代码是为了解决安卓播放无办法自动全屏
            this.myPlayer.on('play',() => {
                console.log('play')
                    window.onresize = function () {
                    document.querySelector('.video-container').style.width = window.innerWidth + "px";
                    document.querySelector('.video-container').style.height = document.documentElement.clientHeight + "px";         
                    }
            })
            this.myPlayer.on('pause',() => {
                console.log('pause')
                window.onresize = function () {
                    document.querySelector('.video-container').style.width = "270px";
                    document.querySelector('.video-container').style.height = "170px";
                }
            })
复制代码

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

            if (MJSSDK.UA.android) {
                this.myPlayer.on('play', () => {
                    // console.log('play');
                    window.onresize = () => {
                        // console.log('onresize-play');
                        this.isfull = true;
                        let vheight = this.myPlayer.videoHeight();
                        let vweight = this.myPlayer.videoWidth();
                        let clientHeight = document.documentElement.clientHeight;
                        document.querySelector('.video-container').style.width = (clientHeight * vweight) / vheight + 'px';
                        document.querySelector('.video-container').style.height = clientHeight + 'px';
                        document.querySelector('#my-video').style.backgroundColor = 'black';
                    };
                });
                this.myPlayer.on('pause', () => {
                    // console.log('pause');
                    window.onresize = () => {
                        // console.log('onresize-pause');
                        this.isfull = false;
                        // 全屏后，华为等部分机型会有白边，是页面的颜色，用该值控制背景色
                        document.querySelector('.video-container').style.width = '270px';
                        document.querySelector('.video-container').style.height = '170px';
                    };
                });
            }
        },
复制代码

5、视频全屏后出现白边

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

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