Html5酷播云视频播放器同层播放(代码实例)_酷播云 h5播放器能播放自己的视频吗-优快云博客

本文链接：https://blog.youkuaiyun.com/ffffffff8/article/details/122423934

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


<video
    class="video-player"
    playsinline="" //IOS微信浏览器支持小窗内播放
    webkit-playsinline="" //IOS微信浏览器支持小窗内播放
    preload
    x5-video-player-type="h5-page" //同层播放器窗口播放
    x5-video-player-type="h5" //同层播放器全屏播放
    x5-video-player-fullscreen="true" //同层播放器全屏播放
    :src=""
    :poster=""
>

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

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

<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>