时间戳

首页 > 解决方案 > 隐藏播放按钮覆盖

css - 隐藏播放按钮覆盖

问题描述

我有一个约 2 秒的短视频，在我正在制作的网站背景中循环播放，当它通过 div 的透明部分出现时，会产生金属闪光的效果。看起来不错。问题是，当 iOS 设备处于低功耗模式时，视频不仅无法播放（这是可以接受的，我明白了），它还会显示一个很大的 honkin 播放按钮，该按钮通过 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;
}

标签： cssioshtml5-video

解决方案

你可以用 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 做到这一点，但我怀疑它是否会接近“稳定”。

推荐阅读