视频video标签在移动端微信中默认全屏播放的解决方案

最近后盾人移动端上线了,开发挺顺利,但也遇到几个小坑。

后盾人中的视频是用video视频标签引入的,当在微信中打开后盾人,播放视频的时候,视频默认会全屏播放。

安卓和ios下都存在此问题,解决方法如下:

iOS端:给video标签加上 playsinline=”true” 属性就行了。一开始看网上有很多人说加 webkit-playsinline=’true’ 属性就好使,但我在iOS 11.2,最新版微信的情况下测试,一直没效果,后来写成playsinline就可以了。当然,如果playsinline没效果,也可以用webkit-playsinline试试。

安卓端:在安卓端微信,任何video标签播放的视频都默认会被托管到微信自主研发的X5内核播放器(竟然有人问flash引入视频会不会被托管……面壁去!),而且默认全屏,默认层级最高,这个是系统级的,我们改变不了。关于这些反人类的问题,微信官方是这么回答的:

X5内核视频播放使用了自研的播放器,考虑用户体验,我们使用了统一的播放界面。如果有相关问题,请联系腾讯浏览服务产品经理做进一步交流

大家如果感兴趣,自己搜一下同行们对x5内核的评价就知道了。容我说句脏话冷静一下。

微信给出的解决方案如下:

  1. 视频是腾讯域名下的视频
  2. 你在微信的白名单当中

总之一句话,播放时全屏和层级这类问题,目前在安卓端微信无解

好吧,上句话可能说的有点绝了,等我过几天收购了腾讯,或许这个问题就解决了。#手动滑稽#

关于博主
骨灰级博客玩家
国内第一批90后网站站长/程序员
做过七年前端讲师
目前从事锦鲤观赏鱼电商行业
鱼贝贝锦鲤创始人
文章列表
1
禁用WordPress 5.x 版本自带Gutenberg(古腾堡)编辑器的安全快速方法
禁用WordPress 5.x 版本自带Gutenberg(古腾堡)编辑器的安全快速方法
2
程序员大哥给你介绍的对象,靠谱!
程序员大哥给你介绍的对象,靠谱!
3
Adobe LightRoom不支持ARW格式照片文件的解决方案
Adobe LightRoom不支持ARW格式照片文件的解决方案
4
修改网页中被选中文字样式(如背景颜色)的方法
修改网页中被选中文字样式(如背景颜色)的方法
5
微信小程序官方手册-单文件离线版
微信小程序官方手册-单文件离线版
最新评论
比比拉布
比比拉布
5月7日
太感谢了!!!!!!找了这么多的教程,只有你点出来了关键点——设计视图!!!!
Jake
Jake
3月7日
Halo 啊~麻烦更新下我的博客地址,原名:Jing Blog。麻烦更新如下: Jake Blog(后缀可以省略,也可以保留,看哪个风格适合) 网址:htt
评论于关于博主