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

Question

即使将HTML5视频播放器设置为in 标签，但HTML5视频播放器仅在iOS中 显示控件，但所有其他浏览器都可以正常运行，并且不显示控件。12.x.xfalsevideo

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

我的代码如下所示：

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

我正在寻找隐藏此播放图标的解决方案（如上图所示），但是如果不可能，那么有什么解决方案可以使我知道省电模式已打开并隐藏视频（因为我有一个背景向后兼容）。

Answer 1

我也看了一下，似乎很多 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作为一个想法）。

希望这可以帮助！