vue video全屏播放

需求：

1、視頻為長方形，頁面初始化打開為橫屏全屏播放視頻。

2、微信不支持自動播放，故自動播放需求刪除。

方法：

1、vue-video-player插件

因需求較簡單，僅要求播放本地一個視頻，故未選擇使用插件。

2、video

<div id="video_box" style="z-index: 999;" :class="{video_box_rotate: isIos}">
                <video
                    @click="videoPlay"
                    class="index_video"
                    poster="../assets/images/poster.jpg"
                    id="video_content"

　　　　　　　　　　　　style="object-fit:fill"  /*加這個style會讓 Android / web 的視頻在微信里的視頻全屏，如果是在手機上預覽，會讓視頻的封面同視頻一樣大小

                    webkit-playsinline='true'
                    playsinline="true"
                    x5-playsinline="true"
                    x-webkit-airplay="true"
                    x5-video-player-type="h5"
                    x5-video-player-fullscreen="true" /*全屏播放*/
                    x5-video-ignore-metadata="true"
                    x5-video-orientation="landscape" /*播放器的方向，landscape橫屏，portraint豎屏，默認值為豎屏*／
 　　　　　　　　　　　preload="preload"> <source src="../../static/video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' > </video> </div>

具體屬性解釋可參考 https://blog.csdn.net/qq_16494241/article/details/62046891

同層H5播放器官網 https://x5.tencent.com/tbs/guide/video.html

注意：

x5-video-orientation="landscape" /*播放器支付的方向，landscape橫屏，portraint豎屏，默認值為豎屏*／

landscape屬性ios不支持
為兼容ios橫屏將視頻旋轉90度

mounted() {
        if (是否為ios) {
            this.videoFullScreen();
        }
    }

methods: {
　　　　// 視頻寬高設置為手機寬高
        videoFullScreen() {
            let width = document.documentElement.clientWidth;
            let height = document.documentElement.clientHeight;
            document.getElementById('video_content').style.height = width + 'px';
            document.getElementById('video_content').style.width = height + 'px';
        },
    }

／*視頻旋轉*/
.video_box_rotate{
　　
    transform rotate(90deg)
}

視頻監聽播放結束、進入全屏、退出全屏事件

mounted() {this.videoEnd()},
methods: {
    videoEnd(){

　　　　　　let video = document.getElementById('video_content');

　　　　　　video.addEventListener('ended', () => {

　　　　　　　　alert('video end')

　　　　　　});

　　}; // 視頻播放結束
}
// 全屏事件 x5videoenterfullscreen
// 退出全屏 x5videoexitfullscreen

監聽手機橫豎屏

window.addEventListener('orientationchange', function() {
                    // alert(window.orientation); // 這里可以根據orientation做相應的處理
                    if (window.orientation === -90) {
                        self.iphoneScreenShow = true;
                    } else {
                        self.iphoneScreenShow = false;
                    }
                }, false);

 

視頻初始化黑屏
可以在視頻上加個div浮層（可以一個假的視頻第一幀），然后用timeupdate方法監聽，視屏播放及有畫面的時候再移除浮層。https://segmentfault.com/a/1190000009395289
視頻進入全屏，退出全屏監聽
https://segmentfault.com/a/1190000013232870
監聽視頻播放完成
https://blog.csdn.net/mondy592/article/details/81219167

參考資料 https://blog.csdn.net/xcy1193068639/article/details/80242111#commentsedit

安卓去掉控制按鈕 參考http://www.xyhtml5.com/3252.html

歡迎大家指點，謝謝