在某些移动端的微信中(正宗手机浏览器不存在此问题),用 video 标签作为视频播放时,并不在当前 video 框播放,而是弹出一个层,左上角是返回,右上角有三个点,把整个页面都挡住来播放。怎么解决呢?
<video x5-playsinline="" playsinline="" webkit-playsinline=""></video>
测试有效。
扩展
我们将 video 标签与七牛云播放器作了个对比:
播放 .mp4 | 播放 .m3u8 | 弹出层播放 .mp4 | 弹出层播放 .m3u8 | |
video 标签 | 可以 | 不可以 | 可避免 | 不适用 |
七牛云播放器 | 可以 | 可以 | 不可避免 | 可避免 |
可以看出,如果我们希望播放视频,且微信中不弹出层,则:
使用 video 标签 + .mp4 格式。
如果我们希望直播 + 播放视频,且微信中不弹出层,则:
使用七牛云播放器 + .m3u8 格式。
七牛云播放器最终也是采用的 video 标签:
由于有其他 JS 的介入,使其可以播放 .m3u8。
由于其是动态创建的 video 标签,我估计它动态添加的不弹出层的那些属性,得不到微信的认可,但是 .m3u8 时又为何认可?