移動端關於video標籤視頻全屏播放的兼容適配問題

之前做一個項目，需要在兩個大屏之間加一屏的視頻，效果類似三屏豎方向的翻頁，只是中間是一個視頻，本以爲如此簡單三兩下搞定。沒想到。。。

原因在於，IOS與Android對video標籤的支持不同，在IOS運行的好好的，放到Android中就各種問題。

一般video標籤長這樣：

    <video
      id="start_video"
      class="start_video"
      style="object-fit:fill;"
      playsinline="true"
      webkit-playsinline="true"
      x-webkit-airplay="allow"
      airplay="allow"
      x5-video-player-type="h5"
      x5-video-player-fullscreen="true"
      x5-video-orientation="portrait"
      autoplay="autoplay"
      muted="true"
      src="./assets/demo.mp4"
    ></video>

 解釋一下某幾個屬性：

webkit-playsinline：可以使視頻內聯播放（解決IOS端，Android不支持）；

x5-video-player-type=“true”，x5-video-player-fullscreen="true"：這兩個可以讓Android的視頻同層播放（IOS不支持）

style="object-fit:fill"：視頻充滿容器

Android會調起自帶播放器並在頂層播放，這是無法避免的，頭部會有自帶的控件，如此一來需要用戶收到點擊收起全屏播放，回到主體頁面，需要監聽當頁面播放完畢事件。

           video.addEventListener('ended', function () {
              //....
            }, false)

但當你點擊退出全屏的時候你會發現ended事件又觸發了一次。這樣一來Android端其實會觸發兩次ended事件。

解決方法是判斷終端：

    function equipment() {
        var u = navigator.userAgent, app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
        if (isAndroid) {
          console.log('android')
        }
        if (isIOS) {
          console.log('ios')
        }
      }

當爲ios端是監聽ended事件，當爲android的時候監聽 x5videoexitfullscreen，這個事件會在點擊退出全屏播放的 '<' 箭頭時觸發。

這樣就可以回到主體頁面繼續執行其他任務。

        if (isAndroid) {
            video.addEventListener("x5videoexitfullscreen", function () {
              // ...
            }, false)
          }

        if (isIOS) {
            video.addEventListener("ended", function () {
              // ...
            }, false)
          }

總的來說IOS全屏播放還是很容易實現的，android還是要具體再做調整。

如有更優方法，請留言告知。