微信中视频异步后无法直接播放

需求：

1
2
3

graph LR
点击事件-->获取视频真实url
获取视频真实url-->播放视频

问题：

微信等X5内核浏览器中，如果点击事件的回调中非同步执行videoEl.play()，视频并不会播放。

测试发现，多层的非同步执行播放会导致视频无法播放，如：

onClick = () => {
    setTimeout(() => {
        setTimeout(() => {
            videoEl.play()
        })
    })
}

当然，我们不会写出上面的代码的，但是牵涉到vue等框架的一些机制，就可能会视频无法播放。比如我遇到的就是vue中的emit触发事件，然后异步获取视频url，再调用就导致视频无法直接播放。

解决：

这里提供一种Hack的方式，在获取真实url之前，先使用假地址，然后同步调用videoEl.play()，紧接着调用videoEl.pause()，这时候视频展示的依然是poster，可以同时隐藏掉controls。等异步完成之后，重新设置video的src，调用play视频就会正常播放。