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

最新推荐文章于 2024-04-26 21:29:15 发布

阿酷tony

最新推荐文章于 2024-04-26 21:29:15 发布

阅读量887

点赞数

分类专栏： html5 文章标签： html5 android 前端

本文链接：https://blog.csdn.net/ffffffff8/article/details/128496006

版权

html5 专栏收录该内容

140 篇文章 5 订阅

订阅专栏

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>