Html 隐藏 iPhone HTML5 视频播放按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8911247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide iPhone HTML5 video play button
提问by ilyo
I want to hide the big play button that appears by default on the <video>element
我想隐藏<video>元素上默认出现的大播放按钮
Is it possible?
是否可以？
回答by Ian Devlin
I don't have any iOS device handy to test, but perhaps try this:
我没有任何可用于测试的 iOS 设备，但不妨试试这个：
video::-webkit-media-controls {
display:none !important;
}
回答by Daemeron
It seems Apple has changed the shadow-dom again.
苹果似乎再次改变了影子领域。
In order to hide the play button control you must use the following CSS:
为了隐藏播放按钮控件，您必须使用以下 CSS：
/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */
*::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
/* Old shadow dom for play button */
*::-webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
/* New shadow dom for play button */
/* This one works! */
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
回答by Arnaud Leyder
A look at the shadow DOM in Safari iOS tells me that what you want (hidding only the big central play button) is:
看看 Safari iOS 中的 shadow DOM 告诉我你想要什么（只隐藏大的中央播放按钮）是：
video::-webkit-media-controls-start-playback-button {
display: none !important;
}
The answer from Ian hides everything including text tracks (closed captions ...)
伊恩的回答隐藏了所有内容，包括文本轨道（隐藏式字幕......）
回答by ilyo
In the video source file you can simply change
在视频源文件中，您可以简单地更改
controls= "false"
For the Safari CSS, which the native browser on ios, you can also try this hacky trick
对于 ios 上的本机浏览器 Safari CSS，您也可以尝试这个 hacky 技巧
.custom-video-controls {
z-index: 2147483647;
}
Here's a link to a details discussion on managing/hiding controls on HTML 5 video
这是有关在 HTML 5 视频上管理/隐藏控件的详细讨论的链接
http://css-tricks.com/custom-controls-in-html5-video-full-screen/
http://css-tricks.com/custom-controls-in-html5-video-full-screen/
回答by Chloe
Based on Ian's answer
基于伊恩的回答
video::-webkit-media-controls {
opacity: 0;
}
This will hide all controls. Good for background videos that won't autoplay.
这将隐藏所有控件。适用于不会自动播放的背景视频。
回答by BG Bruno
回答by Kamen Stoykov
Newer iOS versions display such play button when the device is in "Low power mode".
当设备处于“低功耗模式”时，较新的 iOS 版本会显示此类播放按钮。
回答by Zebra Pogo
For webapps. Works iOS 10.3 iPhone7 & Safari 10.1 on Mac as well. Thx to previous contributors. I had also the issue that the element does not contain any "control" attribute at all.
对于网络应用程序。也适用于 Mac 上的 iOS 10.3 iPhone7 和 Safari 10.1。感谢以前的贡献者。我还遇到了元素根本不包含任何“控制”属性的问题。
'<style type="text/css">'+
'*::-webkit-media-controls-panel {'+
' display: none!important;'+
' -webkit-appearance: none;'+
' }'+
/* Old shadow dom for play button */
'*::--webkit-media-controls-play-button {'+
'display: none!important;'+
'-webkit-appearance: none;'+
'}'+
/* New shadow dom for play button */
/* This one works */
'*::-webkit-media-controls-start-playback-button {'+
'display: none!important;'+
' -webkit-appearance: none;'+
'}'+
+'</style>'
回答by Arpit
Try this:
尝试这个：
video {
&::-webkit-media-controls {
display:none !important;
}
&::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
}
回答by joeytwiddle
According to this answer, in Google Chrome we can hide the big play button like this:
根据这个答案，在谷歌浏览器中，我们可以像这样隐藏大播放按钮：
video::-webkit-media-controls-overlay-play-button {
display: none;
}
That might be useful if you want to hide it on Android as well as on iOS.
如果您想在 Android 和 iOS 上隐藏它，这可能很有用。
