Css 隐藏播放按钮覆盖在<；视频>；在iOS 14中

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

这是视频标签：

<video id="videoElement" src="copper.mp4" autoplay loop playsinline muted webkit-playsinline></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>

$（'body'）。在（'单击touchstart'，函数（）{
const videoElement=document.getElementById（'videoElement'）；
如果（！videoElement.playing）{
videoElement.play（）；
}
});

如果用户不与设备交互，则无法触发视频播放（这可能是一件好事）

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

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

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

}
</script>

var promise=$（'#videoElement'）.play（）；
如果（承诺！==未定义）{
承诺。然后（=>{
//自动播放成功了
}).catch（错误=>{
$（'#videoElement'）。删除（）
});
}

---

我将进一步挖掘，看看是否有一种方法可以用纯CSS实现这一点，但我怀疑它是否会接近“稳定”。

这非常有效！非常感谢你！heylesterco，如果这对你有帮助的话，你可以投赞成票并将其标记为被接受的答案我将其标记为被接受的答案，但我的声望仍然低于15分，因此它不会显示我的赞成票。

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

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

}
</script>