隐藏iOS Safari本地低功耗播放按钮

Question

当您将autoplay属性添加到视频中时，当低功耗模式处于活动状态时，您将在视频顶部得到一个本机iOS play按钮。

有没有办法移除这个本机按钮？我已经找到了几种解决办法，但似乎没有一种解决办法。

这应该是可能的，因为当低功耗模式可用时，AirPods页面上有一个视频，具有期望的效果：https://www.apple.com/airpods/。

我想知道是否有人知道他们用什么技巧来隐藏本地的iOS play按钮。

提前谢谢。

我创建了这个CodePen来进行实验：https://codepen.io/anchorsmith/pen/dyepbrR

Answer 1

找到这个沙箱：https://codesandbox.io/s/relaxed-franklin-h2zkhl?file=/src/scripts/index.ts:0-87

显然，您可以将setTimeout设置为自动播放，而不需要autoplay属性。

它会在低功耗模式下抛出一个错误，但这当然可以被捕捉到。

Answer 2

不幸的是，解决这一问题没有容易的办法。自动播放将自动导致播放按钮覆盖。如果您关闭/禁用自动播放，它将不再有该结果。或者，您可以使用以下代码片段：

video::-webkit-media-controls {
    display:none !important;
}

这将禁用控件，如播放、暂停和卷更改。然而，这可能会产生不可预见的负面影响，因此将其作为最后的手段。

此外，您还可以尝试以下代码片段：

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}