HTML5 - iOS 11+ 隐藏视频控件答案

【问题标题】：HTML5 - iOS 11+ hide video controllsHTML5 - iOS 11+ 隐藏视频控件
【发布时间】：2018-06-11 10:46:20
【问题描述】：

我正在尝试从视频中删除“播放”按钮。以下是我的代码：

<video class="video" autoplay muted loop playsinline poster="video.gif">
   <source src="video.mp4" />
</video>

由于“控件”属性是布尔值，我在 Chrome、Firefox、IE 和 Android 浏览器上看不到它们 - 所以没关系。但它们仍然出现在 Safari 上。这段代码删除了 iOS 9.4 上的“播放”按钮。

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

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

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

但它仍然出现在 iOS 11.2 上。

你知道如何摆脱它吗？

【问题讨论】：

标签： ios css html web

【解决方案1】：

您可以使用 javascript 来禁用它。

document.getElementById("herePutVideoId").controls = false;

【讨论】：