微信内置浏览器video标签自动全屏播放以及层级过高问题

转载自：微信内置浏览器video标签自动全屏播放以及层级过高问题 - 程序员大本营

今天事用html5的<video>标签做微信内置浏览器视频播放页面时，需要在视频层级上显示类似弹幕的对话。发现部分机型（华为P40 pro,oppo reno,iphone7p）上点击播放视频后，视频自动全屏播放，页面其他元素无法显示。探索良久，找出如下解决方案：

1、ios:

只需要添加属性：

x5-playsinline playsinline webkit-playsinline

即可解决。例：

<video src="视频地址" poster="视频封面" controls x5-playsinline playsinline webkit-playsinline></video>

2、安卓微信内置浏览器

经过查阅相关资料，安卓微信内置浏览器内核为x5，使用该内核的浏览器还有手机QQ、京东等app的内置浏览器，仅添加上述属性，可以解决自动全屏播放的问题，但是会导致新的问题：video标签的层级过高，导致其他组件被遮挡，此时设置z-index属性无效。需要添加如下的属性即可解决。

x5-video-player-type="h5-page"

非专业前端人员，如有问题或者其他思路，请给出建议。

另外，小米8的微信打开视频，不添加以上任何属性，没有任何问题，也很疑惑。麻烦大神帮忙解答一下，感谢。

微信内置浏览器video标签自动全屏播放以及层级过高问题相关推荐

android微信网页视频播放器,安卓微信内置浏览器video的坑
几个小时的探索,发现这是微信内置浏览器自身的问题. Q:我也有问题想问.我在做一个HTML5页面,其中使用video标签播放视频,但是这个video是总是表现在最顶层,无论怎样调节z-index属性都 ...
微信内置浏览器怎么才能自动跳转到手机自带浏览器
上半年公司有一个新的APP项目上线,我们在项目首页做个二维码,然后用户用手机扫一扫就能下载了.但是很多用户反映扫一扫之后下载不了,了解之后才知道这些用户都是使用的微信的扫一扫,而我们开发测试人员一般使 ...
Html5原生video标签禁止全屏播放的实现
制作移动端H5,需要添加视频,点击播放的时候会自动全屏播放,记录一下处理局部播放的问题. <video id="pageVideo"x5-playsinline=" ...
解决ios在微信内置浏览器中video播放的全屏问题
video 标签在部分的安卓微信和iOS的微信浏览器上点击播放会默认全屏展示解决部分安卓默认全屏展示,给video标签加如下属性 x5-video-player-type="h5-page ...
转载--video标签在微信内置浏览器和QQ浏览器（手机端）的怪异现象
用H5做了一个新闻信息展示的网页,video标签总是处于最顶层,调节z-index的值不起作用,对于flash也是一样的情况,flash已设置wmode属性.在PC端和手机端大部分浏览器(360.小米 ...
解决微信浏览器video标签自动播放视频失效
正常在浏览器好好的视频,在微信内置浏览器中点击播放全屏,样式也不一样,自动播放失效.罪魁祸首是微信把video标签都成微信规则的了.下面方式可以解决视频播放全屏以及不能自动播放的问题. <vid ...
微信内置浏览器非全屏播放视频解析
前提条件,接了一个项目要实现在微信公众号里课程播放,而且还有评论功能,视频需要小窗播放. 首先公布解决方案: 感谢知乎上的回答,原版微信内置浏览器如何小窗不全屏播放视频? 感谢该问题的徐霖同学的回答 ...
[]转载]微信内置浏览器非全屏播放视频解析
前提条件,接了一个项目要实现在微信公众号里课程播放,而且还有评论功能,视频需要小窗播放.首先公布解决方案: 感谢知乎上的回答,原版[微信内置浏览器如何小窗不全屏播放视频?]感谢该问题的徐霖同学的回答 ...
微信内置浏览器非全屏播放视频解析 1
前提条件,接了一个项目要实现在微信公众号里课程播放,而且还有评论功能,视频需要小窗播放. 首先公布解决方案: 感谢知乎上的回答,原版[ 微信内置浏览器如何小窗不全屏播放视频?] 感谢该问题的徐霖同学 ...

微信内置浏览器video标签自动全屏播放以及层级过高问题

微信内置浏览器video标签自动全屏播放以及层级过高问题相关推荐

最新文章

热门文章