基於vue的video播放器

當現有video播放器不能知足需求時，須要本身對video進行封裝。

video屬性

<video
    preload="auto" /** 視頻優先加載 **/
    autoplay=true /** 自動播放 **/
    muted=false /** 開啓音頻 **/
    webkit-playsinline="true" /** 防止IOS用戶播放視頻時自動全屏 **/
    playsinline="true"
    x-webkit-airplay="allow" /** 支持Airplay的設備（如：音箱、Apple TV)播放 **/
    x5-video-player-type="h5-page" /** 啓用X5內核同層渲染 **/
    x5-video-orientation="portraint"
    style="object-fit:cover;"
>
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"  type="video/mp4">
</video>

src: 視頻的URL
poster: 視頻封面
currentTime：視頻當前播放位置，以秒爲單位
duration：視頻的時長，以秒爲單位
loop：設置視頻是否循環播放，值爲true/false。當爲true時，視頻播放結束後，自動返回視頻開始的地方。
autoplay: 設置視頻是否自動播放，值爲true/false。
muted：設置視頻的音頻默認狀態，值爲true/false,。當爲false時，靜音。
webkit-playsinline='true' playsinline='true': 視頻在元素區域內播放。防止ios用戶視頻播放自動全屏
preload='auto': 優先加載視頻
x5-video-player-type='h5-page': 啓用X5內核同層渲染
x5-video-orientation='portraint': 設置播放器支持的方向，豎屏

video事件

loadstart: 在視頻開始加載時觸發，給currentTime賦值(歷史播放記錄或0)。
durationchange: 元信息已載入或已改變，視頻的長度發生了改變。獲取到視頻長度(duration，並給currentTime賦值(歷史播放記錄或0))。
playing: 在視頻開始播放時觸發（不管是初次播放、在暫停後恢復、或是在結束後從新開始）。
pause: 播放暫停時觸發。
timeupdate: currentTime改變, 更新播放進度。處理播放進度條
seeked: 指定播放位置
waiting: 緩衝
ended: 播放結束, 重置狀態
WeixinJSBridgeReady: 在微信中使用video，須要監聽weixinJSBridgeReady事件, 在回調函數裏執行play()命令。

直播協議

HLS(HTTP Live Streaming)由Apple提出的直播流協議。IOS和高版本Android都支持HLS。HLS主要由.m3u8和.ts兩種播放文件。HLS具備高兼容性，高可擴展性，但會直播延時。HLS協議是將直播流分紅一段一段的小段視頻去下載播放的，因此假設列表裏面的包含5個ts文件，每一個ts文件包含5秒的視頻內容，那麼總體的延遲就是25秒。
RTMP(Real Time Messaging Protocol)是Macromedia開發的一套視頻直播協議，如今屬於Adobe。RTMP基於flash沒法在IOS的瀏覽器裏播放，可是實時性比HLS要好。
HTTP-FLV針對於FLV視頻格式作的直播分發流，延時低。但移動端不支持。

結論：HTTP-FLV延時低，優先使用。若設備不支持HTTP-FLV，使用flv.js。若設備不支持flv.js，則使用HLS，但HLS延遲大。

封裝video

/** HTML **/
<div class="video">
    <!-- video player -->
    <video
        class="video__player"
        ref="videoPlayer"
        preload="auto"
        :autoplay="options.autoplay"
        :muted="options.muted"
        webkit-playsinline="true"
        playsinline="true"
        x-webkit-airplay="allow"
        x5-video-player-type="h5-page"
        x5-video-orientation="portraint"
        style="object-fit:cover;"
    >
        <source :src="options.src" />
    </video>

    <!-- video poster -->
    <div
        v-show="showPoster"
        class="video__poster"
        :style="{'background-image': 'url(' + options.pic + ')'}"
    ></div>

    <!-- video loading -->
    <div v-show="showLoading" class="video__Loading">
        <span class="video__Loading-icon"></span>
    </div>

    <!-- video pause -->
    <div @click="handleVideoPlay" class="video__pause">
        <span v-show="!videoPlay" class="video__pause-icon"></span>
    </div>
</div>

/** js**/
props: {
    options: {
        type: Object,
        default: () => {}
    }
},
data() {
    return {
        videoPlay: false, // 是否正在播放
        videoEnd: false, // 是否播放結束
        showPoster: true, // 是否顯示視屏封面
        showLoading: false, // 加載中
        currentTime: 0, // 當前播放位置
        currentVideo: {
            duration: this.options.duration
        },

    }
},
mounted() {
    this.videoPlayer = this.$refs.videoPlayer;
    this.videoPlayer.currentTime = 0;
    
    this.videoPlayer.addEventListener("loadstart", e => {
         this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
    });
    
     // 獲取到視頻長度
    this.videoPlayer.addEventListener("durationchange", e => {
        this.currentVideo.duration = this.videoPlayer.duration;
        // 存在播放歷史記錄
        this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
    });
    
    this.videoPlayer.addEventListener("playing", e => {
        this.showPoster = false;
        this.videoPlay = true;
        this.showLoading = false;
        this.videoEnd = false;
    });
    
    // 暫停
    this.videoPlayer.addEventListener("pause", () => {
        this.videoPlay = false;
        if (this.videoPlayer.currentTime < 0.1) {
            this.showPoster = true;
        }
        this.showLoading = false;
    });
    
    // 播放進度更新
    this.videoPlayer.addEventListener("timeupdate", e => {
            this.currentTime = this.videoPlayer.currentTime;
        },
        false
    );

    // 指定播放位置
    this.videoPlayer.addEventListener("seeked", e => {
    });

    // 緩衝
    this.videoPlayer.addEventListener("waiting", e => {
        this.showLoading = true;
    });
    
    // 播放結束
    this.videoPlayer.addEventListener("ended", e => {
        // 重置狀態
        this.videoPlay = false;
        this.showPoster = true;
        this.videoEnd = true;
        this.currentTime = this.currentVideo.duration;
    });
    
    // 監聽weixinJSBridgeReady事件，處理微信不能自動播放。但並不所有適用，加了暫停按鈕，手動播放。
    document.addEventListener('WeixinJSBridgeReady', () => { 
        this.videoPlayer.play();
    }, false);
},
methods: {
    handleVideoPlay() {
        if (this.videoPlayer.paused) { // 播放
            if(this.videoEnd) { // 重播
                this.currentTime = 0;
                this.videoPlayer.currentTime = 0;
            }
            this.videoPlayer.play();
            this.videoPlay = true;
        } else { // 暫停
            this.videoPlayer.pause();
            this.videoPlay = false;
        }
    }
}

H5分享頁面跳轉到APP時，暫停視頻播放

經過監聽visibilitychange (能見度更改)事件，當頁面的內容被隱藏時，暫停播放。

document.addEventListener("visibilitychange", this.visibilitychange, false);
visibilitychange () {
    if (document.hidden) {
        console.log('隱藏');
        this.videoPlayer.pause();
        this.isPlay = false;
    } else {
        console.log('可見');
    }
}

[參考文章]:

1. X5內核視頻兩種播放形態
2. H5直播Video標籤坑彙總
3. H5直播入門（理論篇）
4. 全面進階 H5 直播
5. Page Visibility API 教程