iOS Safari 13：如何在<video>元素中隐藏直播控件

Question

我正在开发视频广播 Web 应用程序，但我在使用 Safari "features"。

我需要删除 Safari 在客户端页面上的元素上公开的控件（请参见下面随附的屏幕截图）。我的视频元素编码如下：

<video id="video201" 
       style="width: 100%; height: 100%; position: absolute; object-fit: cover;" 
       autoplay="" 
       playsinline="">
</video>

如您所见，未设置 "controls" 属性，以便隐藏控件：这在 Android Chrome、Edge、[=36= 上正常工作] 在桌面、Firefox 等... 唯一让我头疼的是 iOS 13.3.

上的 Safari

我可以使用javascript来操作视频元素。

我真的很感激任何关于此的正确方向的提示。

更新2020-04-16 到目前为止，我已经尝试了一些在 SO 上找到的 CSS，如下所示，但没有成功：

*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

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

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

Answer 1

如果我正确理解你的痛苦，我建议稍微改变一下方法。当打开视频标签到全屏时，我在 safari 中遇到了同样的问题，解决方案是扩展视频标签的父容器。在这种情况下，全屏模式下没有本机控件。

iOS Safari 13：如何在<video>元素中隐藏直播控件

iOS Safari 13: how to hide live broadcast controls in <video> element

javascript

mobile-safari

html5-video

agora.io