移动端H5网页视频播放控制消失不见怎么办？

视频播放控制在移动端消失不见

在制作H5网页时，通常使用 标签来播放视频。然而，在移动端浏览器上， 标签的默认视频控件却无法隐藏，令人头疼。

以下代码展示了 标签的设置：

<video autoplay width="800px" style="pointer-events: none;" muted ref="video"
        playsinline="true"
        x-webkit-airplay="true"
        x5-playsinline="true"
        webkit-playsinline="true"
        x5-video-player-type="h5">
  <source src="./YourCroppedMovice.mp4" type="video/mp4">
</video>

登录后复制

尽管进行了上述设置， 标签在移动端浏览器上仍会出现控制控件。

经过调研和尝试，我们发现传统的解决方案如处理、z-index蒙层等皆无效。

然而，我们认为仍然存在可行的方案：通过canvas播放视频。虽然canvas播放有系统支持较少、播放可能卡顿的缺点，但它不受 标签限制。

因此，若要隐藏 标签的控制控件，可考虑采用canvas播放视频。

以上就是移动端H5网页视频播放控制消失不见怎么办？的详细内容，更多请关注GTHOST其它相关文章！