移动端关于video标签视频全屏播放的兼容适配问题

之前做一个项目，需要在两个大屏之间加一屏的视频，效果类似三屏竖方向的翻页，只是中间是一个视频，本以为如此简单三两下搞定。没想到。。。

原因在于，IOS与Android对video标签的支持不同，在IOS运行的好好的，放到Android中就各种问题。

一般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还是要具体再做调整。

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

更多相关文章

随机推荐