Html5网页播放器的同层播放功能

最新推荐文章于 2024-09-18 09:08:00 发布

原创最新推荐文章于 2024-09-18 09:08:00 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #android #前端

html5 专栏收录该内容

168 篇文章

订阅专栏

本文介绍了在Android手机上如何通过启用腾讯X5内核的浏览器（如微信、QQ）的同层播放功能，解决HTML5视频播放时被浏览器劫持导致的Dom元素覆盖问题。提供了具体的代码示例和应用场景，如企业直播和培训中的无延迟视频体验。

Html5网页播放器的同层播放功能：

在Android手机上使用H5播放视频时，大多数的国内浏览器厂商都会在视频播放时劫持<video>标签，使用浏览器自带的播放器播放视频，而且播放器会处于最高层级，视频上面无法显示其它html元素。比如在Android微信下播放视频，播放器的皮肤控件没有显示出来，也是这个原因。对于这种情况暂时没有有效的解决办法。

但是由于X5内核的浏览器（微信、QQ浏览器）提供了一些属性可以解决覆盖Dom元素的问题，腾讯命名为同层播放。播放器支持在Android手机上开启同层播放功能，此功能只对使用了腾讯X5内核的浏览器有效，比如微信、QQ。

开启同层播放的播放器代码示例如下：

useH5Page: true // 开启同层播放

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',   
    useH5Page: true // 开启同层播放
});
</script>