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

最新推荐文章于 2026-05-01 09:31:11 发布

原创最新推荐文章于 2026-05-01 09:31:11 发布 · 3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #javascript #html #前端 #视频

收录于

js 同时被 2 个专栏收录

24 篇文章

订阅专栏

html

4 篇文章

订阅专栏

本文介绍了一种解决安卓设备上视频播放自动全屏问题的方法，通过调整HTML5 video标签的属性，确保在不同设备上播放体验一致。在安卓环境下，通过检测UserAgent并修改特定属性，可以有效避免视频播放时的全屏问题。

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

<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");
}

安卓表现：