總結移動端video視頻播放的坑

時間 2019-11-08

標籤總結移動 video 視頻播放欄目無線简体版

原文原文鏈接

一、x5同層播放器

移動端瀏覽器中的video元素是比較特別的，早期不管是在iOS仍是Android的瀏覽器中，它都位於頁面的最頂層，沒法被遮蓋。後來這個問題在iOS下獲得瞭解決，可是Android的瀏覽器則問題依舊。X5是騰訊基於Webkit開發的渲染引擎，它提供了一種名叫「同層播放器」的特殊video元素以解決遮蓋問題。android

只要給普通的video元素加上X5的自定義屬性 x5-video-player-type，就能夠調用同層播放器。ios

<div class="player">
    <video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5">
        <source src="video.mp4" />
    </video>
</div>
複製代碼

同層播放器的視頻樣式和ios的視頻播放器是同樣的。安卓的原生播放器（非同層播放器）沒法控制是否自動播放、點擊播放時是否自動全屏。瀏覽器

二、autoplay自動播放

video標籤能夠設置自動播放，只需在標籤設置autoplay便可。可是，設置自動播放是會有兼容性問題的，並非全部機型均可以。bash

1.我所遇到的，設置了autoply ios基本能夠實現自動播放，可是要設置靜音，即：沒音頻軌道，或者設置了muted屬性。ide

2.安卓的話，只有部分機型能夠自動播放。並且不能模擬自動播放，必定要有用戶行爲才能夠觸發播放。測試

三、視頻行內播放

默認狀況下，點擊video播放會全屏播放，若是想要視頻在局部內能夠播放的話，能夠設置：x5-playsinlineui

四、視頻全屏播放後的大小

這個狀況只針對安卓的同層播放器播放時全屏播放的狀況。在同層播放器全屏播放後，視頻底色會變成黑色，而後視頻只是在中間居中，大小是原來視頻設置的大小，並非會全屏鋪滿。this

效果如圖。
一、我第一次採用的方案是，當視頻全屏時，會觸發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";
                }
            })
複製代碼

可是這種方法，因爲是整個視頻的尺寸直接設置爲當前屏幕的寬高，所以測試反映說視頻被拉伸變形了，由於尺寸不是按照比例的。二、所以，採起如下方案。videoHeight()和videoWidth()分別獲取原視頻的高和寬，而後與屏幕的寬高計算出比例。spa

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';
                    };
                });
            }
        },
複製代碼