如何在iOS 12上隐藏html5视频控件

2024年1月15日 317次阅读

HTML5视频播放器仅在iOS 12.x.x中显示控件,即使在视频标记中将控件设置为false,但所有其他浏览器都正常工作且未显示控件.

场景是每当页面加载时我们在横幅上自动播放视频,但如果打开了节电保护功能,那么它将不会自动播放视频,显示带有初始缩略图的播放按钮(仅在iOS 12.xx中),而在其他浏览器中则显示没有任何播放按钮的视频的初始缩略图.

我的代码看起来像这样：

<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
  // sources here
</video>

我正在寻找隐藏此播放图标的解决方案(如附图所示),但如果不可能,则有任何解决方案,我可以通过该解决方案知道省电模式已打开并隐藏视频(因为我有一个背景向后兼容).

《如何在iOS 12上隐藏html5视频控件》

最佳答案 我也看了一下,似乎很多CSS和JavaScript解决方案都不再适用,因为iOS 12有一种新的处理视频的方式(
https://www.reddit.com/r/apple/comments/8p4tpm/ios_12_to_include_custom_html_video_player/).

现在我提出了这个想法,作为一个我不喜欢的纯粹主义者,但它可能会做到这一点：一旦视频启动,视频缩略图(如图像)覆盖在视频上,隐藏起来.

您可以拥有带标题的标准缩略图,或动态生成它(请参阅http://usefulangle.com/post/46/javascript-get-video-thumbnail-image-jpeg-png).

希望这可以帮助！

点赞