移动端video视频内联播放兼容方案

该方案的主要问题是解决安卓播放时会自动全屏的问题,苹果的内联播放还是比较简单的。

<video 
    id="video" 
    playsinline="true" 
    webkit-playsinline="true" 
    x-webkit-airplay="allow" 
    airplay="allow"       
    x5-video-player-type="h5" 
    x5-video-player-fullscreen="true" 
    x5-video-orientation="portrait"
    src="./video.mp4" 
    poster="./poster.png">
</video>

ios效果如下:

安卓播放的时候只需要修改一下属性

var UserAgent = navigator.userAgent.toLowerCase();
if (/android/.test(UserAgent)) {
    document.getElementById('video').setAttribute("x5-video-player-type", "h5-page");
}

安卓表现:

本文结

发布了30 篇原创文章 · 获赞 35 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/linxner/article/details/105250742
今日推荐