移动端 video播放器层级过高，遮挡住其他内容

最新推荐文章于 2025-03-11 13:55:10 发布

原创最新推荐文章于 2025-03-11 13:55:10 发布 · 5.5k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #javascript #vue #opencv

在移动端使用video标签时，遇到了视频遮挡导航栏的问题。经过研究发现，网上普遍建议添加x5-video-player-type='h5'的解决办法并不奏效。实际上，正确的方法是避免同时使用x5-video-player-type='h5'和x5-playsinline属性。通过调整视频标签的样式和属性设置，如添加webkit-playsinline和x5-video-orientation属性，最终成功解决了视频播放时遮挡导航栏的难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用video在移动端遇到，点击导航栏，视频把导航给遮挡住了，差了好多文档。最后终于解决了

百度一堆都是说加x5-video-player-type="h5"属性，其实不然，正确的写法是.

<video  class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="true"  webkit-playsinline="true"  x5-video-player-type="h5" x5-video-orientation="portraint" controls preload="auto" style="object-fit:fill; width:100%; height: 194px;border-radius: 5px;overflow: hidden;" data-setup='{}'>      
                    <source id="source" src="https://video.shenxuanche.com/transcode_sxc_42dbdef6-68e5-a606-a562-dfe8b4e478e7_720p.mp4">  
                </video>