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