在 iOS 14 中的 <video> 上隐藏播放按钮覆盖

Question

我有一个约 2 秒的短视频，它在我正在制作的网站的背景中循环播放，当它通过 div 的透明部分出现时，会产生金属闪光的效果。看起来不错。问题是，当 iOS 设备处于低功耗模式时，视频不仅无法播放（这是可以接受的，我明白了），它还显示了一个大喇叭播放按钮，该按钮通过相同的透明屏幕显示div的部分。我需要摆脱它，但我发现的每个解决方案似乎都不适用于 iOS 14.

这是视频标签：

<video id="videoElement" src="copper.mp4" autoplay loop playsinline muted webkit-playsinline></video>

…和 CSS:

video#videoElement::-webkit-media-controls, 
video#videoElement::-webkit-media-controls-start-playback-button, 
video#videoElement::-webkit-media-controls-play-button, 
video#videoElement::-webkit-media-controls-panel, 
video#videoElement::-webkit-media-controls-container, 
video#videoElement::-webkit-media-controls-overlay-play-button, 
video#videoElement::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}

Answer 1

您可以使用 JQuery 执行此操作。包括它：

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

只要用户以任何方式与其设备进行交互，以下代码就会播放视频。这也可以作为常规 Safari 自动播放问题的解决方法。

<script type="text/javascript">
$('body').on('click touchstart', function () {
            const videoElement = document.getElementById('videoElement');
            if (!videoElement.playing) {
                videoElement.play();
            }
    });
</script>

用户不与设备交互就无法触发视频播放（这可能是件好事）。

如果您想在启用低功耗模式时完全禁用播放（我们中的一些人会非常感谢您），您可以执行以下操作：

<script type="text/javascript">
var promise = $('#videoElement').play();

if (promise !== undefined) {
  promise.then(_ => {
   // Autoplay was successful
  }).catch(error => {
   $('#videoElement').remove()
 });

}
</script>

我会进一步挖掘，看看是否有办法用纯 CSS 做到这一点，但我怀疑它是否会接近“稳定”。

在 iOS 14 中的 <video> 上隐藏播放按钮覆盖

Hide Play Button Overlay on <video> in iOS 14

css

html5-video

ios