【微信 video】微信 video 踩坑记录

前提介绍：

iOS中微信的浏览器内核应该是和Safari浏览器同样的内核

Android中微信的浏览器内核是腾讯自己开发的X5腾讯浏览服务（Android上的QQ浏览器也是这个内核）

1 内联播放视频

iOS上给video标签增加playsinline和webkit-playsinline（兼容新版旧版），对于在Safari中可以内联播放的，那么在微信中也是内联播放的

Android上给video标签增加playsinline和webkit-playsinline（兼容新版旧版），只有部分机型支持（已知Sumsung Note4（Android 6.0.1）可以，Vivo X9（Android 7.1.1）不可以，其它手机和版本没有测试）

Android上给video标签增加x5-video-player-type="h5"属性，可以做到类似内联播放的样式，但顶部的微信的title会ui有变化

2 根据视频的宽高，取视频中间一块正方形播放，其余用外面盒子设定宽高布局的方式overflow: hidden，对视频多余部分进行遮罩，并视频内联播放

iOS，用1的方法做内联播放，然后宽高以及video相对外面盒子的定位等参数通过计算获得设置在对应的元素上即可

Android

2.1 使用playsinline和webkit-playsinline做内联，然后宽高以及video相对外面盒子的定位等参数通过计算获得设置在对应的元素，对于可以内联播放的Android机器，多余的部分将会溢出显示，并不会这罩住（QQ浏览器同理也是这样，但是Chrome浏览器Android版就可以，说明那个X5内核有点坑爹）

2.2 使用给video标签增加x5-video-player-type="h5"属性，做到类似内联播放的样式，然后宽高以及video相对外面盒子的定位等参数通过计算获得设置在对应的元素，虽然是内联的样式播放，但是原来属于视频的但被遮罩的部分，将会变成黑色的底（即ui也不好看，不推荐）

2.3 既然2.1和2.2两种方法都不适合，所以建议需要进行遮罩裁剪内联播放的视频，在Android的微信上还是放弃吧，建议做成，点击播放按钮时，弹出一个全屏播放的浮层（自己布局一下fixed的盒子，里面放video标签，记得此标签不要写内联的任何样式playsinline和webkit-playsinline和x5-video-相关的属性）

3 内联播放视频的时候，播放、暂停、进度条的ui自己定制

iOS上，使用1的方法，加上自己写ui，js调用play，pause控制播放暂停，监听ondurationchange和ontimeupdate可以获取总时长和当前播放的时间，计算出播放进度

Android上，微信中的播放器样式是没法自己定制的（chrome就可以，但是X5的腾讯浏览服务就是不让），官方的说法是这是产品策略（在微信或手Q上，如果是qq.com域名下的video可以通过不指定control属性（表明由页面自己绘制控制面板）来控制）（产品经理都是一样讨打么）

参考资料：

H5同层播放器接入规范

https://x5.tencent.com/tbs/technical.html#/detail/web/1/cecfc00a-f9d1-448f-b04d-8acdf571e469

https://x5.tencent.com/tbs/technical.html#/detail/web/1/e41b0474-8411-44be-a337-edb776271b53

【微信 video】微信 video 踩坑记录相关推荐

微信vue路由跳转兼容_Vue微信公众号开发踩坑记录
需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中 ...
微信退款 java工具类,微信支付中退款踩坑记录
首先附上微信支付的开发者文档其实这里所说的踩坑记录,无非就是微信在开发者文档上的写不太明确,也没有比较官方的demo,在此列出一个可行的demo,供大家下载使用. 主要问题就是在这几步解密上微信的 ...
微信公众号H5端网页分享微信好友-实现思路(踩坑记录总结)
第三方配置就不说了,按着官方文档来就可以了第一个坑在进行接口鉴权时需要签名等参数,签名等参数需要调用后端接口返回.需要注意的是:调用接口需要一个参数就是页面路径地址(url参数,我这边页面路径用u ...
微信APP支付的踩坑记录(一):prepay_id 与 prepayid
最近在做微信APP支付时,发现报下面这个错误: -1 错误可能的原因:签名错误.未注册APPID.项目设置APPID不正确.注册的APPID与设置的不匹配.其他异常等. 用微信签名校验工具校验签名又 ...
微信小程序 NFC 踩坑记录
需求读取URL 写入URL 操作流程一.读取 1. 获取NFC适配器实例 this.NFCAdapter = wx.getNFCAdapter() 2. 开始监听贴卡 this.NFCAdapte ...
微信客服机器人（踩坑记录、SpringBoot、企业微信）
微信客服机器人(踩坑记录.SpringBoot.企业微信) 转载请注明出处:https://www.jjput.com/archives/wei-xin-ke-fu-ji-qi-ren 总体流程当有 ...
微信公众号卡券 addCard 签名错误踩坑记录
微信公众号卡券 addCard 签名错误踩坑记录今天做微信卡券添加卡券一直报签名错误参考了好多文档理了下思路希望对遇到这问题的人有帮助.另外本人小白一名,代码有不规范的地方,请大神勿喷 ...
vue在微信里面的兼容问题_详解Vue微信公众号开发踩坑全记录
本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分 ...
企业微信自建集成应用——踩坑记录（二）
问题五描述:在应用配置信息中,配置可信域名(可作为应用OAuth2.0网页授权功能的回调域名),同一个域名,明明之前都可以使用校验成功了,现在把文件放到服务器上还是校验失败原因:由于之前使用的域名 ...
微信签名验证踩坑记录1
@ 微信签名验证踩坑记录1 H5页面打开小程序的签名验证算法,我碰到个问题有点奇葩,不过也算是自己吸取个教训. 在H5页面打开小程序需要调用jssdk签名.这里有个URL是前端传过来的参数,这时候要 ...

【微信 video】微信 video 踩坑记录

【微信 video】微信 video 踩坑记录相关推荐

最新文章

热门文章