移动端关于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还是要具体再做调整。

如有更优方法，请留言告知。