移动端如何解决video层级最高的问题

最新推荐文章于 2024-04-19 15:32:44 发布

孤酒独酌

最新推荐文章于 2024-04-19 15:32:44 发布

阅读量5.3k

点赞数 2

分类专栏：随笔文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_31699019/article/details/114930812

版权

随笔专栏收录该内容

8 篇文章

订阅专栏

在多次调试video的过程中发现了一些小的优化方案和技巧。
通常我们使用video标签的时候，video因为是系统原生组件层级最高，导致我们无法将自己写的弹窗等盖在video标签上。
微信里可通过以下方案解决：腾讯用的基本都是x5内核，所以在腾讯系的app webview里使用该方法都能解决层级问题。

<video ref="video" class="video-js vjs-default-skin vjs-big-play-centered" poster="https://qiniu-image.qtshe.com/20210315mp4-poster.png" controls x5-playsinline webkit-playsinline x5-video-player-type="h5" x5-video-player-fullscreen
      x5-video-orientation="portraint" playsinline>
        <source src="https://qiniu-image.qtshe.com/20210315normal%20video.mp4" />
    </video>

效果链接：https://m.qtshe.com/app/dunhuang

至于你想知道每个属性是干嘛的，可以参考：

controls：属性规定浏览器应该为视频提供播放控件。
autoplay="autoplay"：视频自动播放设置，但是有经验的人都应该知道，autoplay标签在手机上不兼容，APP中设置问题导致无法自动播放，无论安卓或IOS。需要模拟自动播放只能通过一些事件触发。
webkit-playsinline="true"：视频播放时局域播放，不脱离文档流。但是这个属性比较特别，需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。换句话说，如果APP不设置，你页面中加了这标签也无效，这也就是为什么安卓手机WeChat 播放视频总是全屏，因为APP不支持playsinline，而IOS的WeChat却支持。
这里就要补充下，如果是想做全屏直播或者全屏H5体验的用户，IOS需要设置删除 webkit-playsinline 标签，因为你设置 false 是不支持的，安卓则不需要，因为默认全屏。但这时候全屏是有播放控件的，无论你有没有设置control。做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放时候的控件，需要以下设置：同层播放。
x5-video-player-type="h5"：启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下"X"和"<"两键。目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS。笔者想过为什么同层播放只对安卓开放，因为安卓不能像IOS一样局域播放，默认的全屏会使得一些界面操作被阻拦，如果是全屏H5还好，但是做直播的话，诸如弹幕那样的功能就无法实现了，所以这时候同层播放的概念就解决了这个问题。不过笔者在测试的过程中发现，不同版本的IOS和安卓效果略有不同。
x5-video-orientation：声明播放器支持的方向，可选值landscape 横屏,portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式
x5-video-player-fullscreen="true"：全屏设置。ture和false的设置会导致布局上的不一样