video标签在移动端使用过程中问题小结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了video标签在移动端使用过程中问题小结相关的知识,希望对你有一定的参考价值。

参考技术A

之前一次项目中用到video,个了这么久才想到记一下坑

video标签在移动端使用中遇到的问题

x5-video-player-type :启用同层H5播放器,就是在视频全屏的时候,div可以呈现在视频层上,也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放,播放的时候看似全屏,但是已经除去了control和微信的导航栏,只留下"X"和"<"两键。目前的同层播放器只在android(包括微信)上生效,暂时不支持ios。笔者想过为什么同层播放只对安卓开放,因为安卓不能像ISO一样局域播放,默认的全屏会使得一些界面操作被阻拦,如果是全屏H5还好,但是做直播的话,诸如弹幕那样的功能就无法实现了,所以这时候同层播放的概念就解决了这个问题。不过笔者在测试的过程中发现,不同版本的ISO和安卓效果略有不同。

webkit-playsinline playsinline :视频播放时局域播放,不脱离文档流 。但是这个属性比较特别, 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才能生效。换句话说,如果APP不设置,你页面中加了这标签也无效,这也就是为什么安卓手机WeChat 播放视频总是全屏,因为APP不支持playsinline,而ISO的WeChat却支持。

以上是关于video标签在移动端使用过程中问题小结的主要内容,如果未能解决你的问题,请参考以下文章

第267期移动web问题小结

charles使用小结for MacOS

工作小结

移动端position:fixed小结

移动端动画小结

移动端代码规范小结