x5内核有什么优点_腾讯毒瘤——X5/XWeb内核的坑记录

2020.5.29更新

最近发现微信内置浏览器的UA中没有了Tbs的标识，反而变成了XWEB，推测是内核从X5换成了XWeb，这个XWeb应该是小程序催化出来的。

小程序官方文档说明：在 Android 上，小程序逻辑层的 javascript 代码运行在V8中，视图层是由自研 XWeb 引擎基于 Mobile Chrome 内核来渲染的。

在VIdeo标签的样式和表现上，也确实和X5完全不一样了。

但是呢，也发现了一个BUG。坑还是存在，从不远离。

6. 已经播放过的视频，不能再次自动播放

针对移动端的媒体标签(video/audio)不能自动播放，常规的解决方案就是用一个点击交互使其播放起来。之后，程序就可以任意控制标签的播放与暂停了。

但在XWeb内核上，用户点击调用video.play正常播放，过了四五秒之后，假设视频已停止播放，如果想再次调用play方法，则会报错“play() can only be initiated by a user gesture.”。

但是，如果视频较短，四五秒之内就停止，再立马调用play，又可以正常播放起来。

7. X5上面，也是自动播放失效。

video标签第一次播放使用的http格式url地址，后续更换为blob协议的地址，则又不能任意调用play播放了。

8. QQ浏览器上面，video不支持blob协议地址

如果给video.src = URL.createObjectURL(blob)；再让其play的话，需要等待好几秒，然后报错“The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22”。

这错误信息也是莫名其妙的，代码里只有play，怎么会被pause打断~~~

微信强制开启X5内核(聊天窗口发送消息“debugmm.qq.com/?forcex5=true”，然后点击它就启用X5)，也使用blob协议的话，又没有问题。

---

工作中对video和audio标签使用较多，也发现了一些这两者的问题。我相信有些很明确是腾讯不遵循标准，而是自己生硬造的feature。

1. js授权

微信中对JS授权，需要对当前网页的URL地址进行签名，但这个签名的URL不能有hash部分，否则invalid signature~~
关键iOS就是带上hash也可以正常授权，Android中就不行，坑苦了一下午。

2. CSS布局

最常见的问题，就是针对video布局，z-index始终控制不住，死都要在最上层显示。

感觉是用原生控件替换了浏览器自己的video功能，但又想尽力去模拟video标签，整成四不像。

3. 视频、音频无缘由被暂停

一直在找为什么网页上的媒体(auido/video，以下用media代替)会无缘无故暂停播放，且play抛异常，所有执行pause方法的地方都看过，都没有执行，但是media却暂停了，还触发了暂停事件。

在头发都抓掉，人都要不行了之后，发现如果src属性使用data url，那么某一时间段内(10多毫秒不定)最多只能同时播放8个，如果第9个执行media.src = url，那么不需要调用play，前面8个都会自动触发暂停事件，且play抛异常DOMException: The play() request was interrupted by a call to pause().

以下是示例代码：

<script>
function add() {
    
    const url = 'data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAy+bW9vdgAAAGxtdmhkAAAAAAAAAAAAAAAAAAAD6AAAIAgAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAC+h0cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAABAAAAAAAAIAgAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAEAAAABAAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAACAIAAAEAAABAAAAAAtgbWRpYQAAACB