§ ITPOW >> 文档 >> XHTML

video-解决微信中播放视频时,弹出层的问题

作者:vkvi 来源:ITPOW(原创) 日期:2021-4-13

在某些移动端的微信中(正宗手机浏览器不存在此问题),用 video 标签作为视频播放时,并不在当前 video 框播放,而是弹出一个层,左上角是返回,右上角有三个点,把整个页面都挡住来播放。怎么解决呢?

<video x5-playsinline="" playsinline="" webkit-playsinline=""></video>

测试有效。

扩展

我们将 video 标签与七牛云播放器作了个对比:


播放 .mp4播放 .m3u8弹出层播放 .mp4弹出层播放 .m3u8
video 标签可以不可以可避免不适用
七牛云播放器可以可以不可避免可避免

可以看出,如果我们希望播放视频,且微信中不弹出层,则:

  • 使用 video 标签 + .mp4 格式

如果我们希望直播 + 播放视频,且微信中不弹出层,则:

  • 使用七牛云播放器 + .m3u8 格式

七牛云播放器最终也是采用的 video 标签:

由于有其他 JS 的介入,使其可以播放 .m3u8。

由于其是动态创建的 video 标签,我估计它动态添加的不弹出层的那些属性,得不到微信的认可,但是 .m3u8 时又为何认可?

相关文章