隐藏iPhone的HTML5video播放button
我想隐藏默认显示在<video>元素上的大播放button
可能吗？
看来苹果已经改变了阴影。
为了隐藏播放button控件，您必须使用以下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; }
我没有任何iOS设备方便testing，但也许试试这个：
video::-webkit-media-controls { display:none !important; }
看看Safari iOS中的影子DOM告诉我，你想要的（只隐藏大的中央播放button）是：
video::-webkit-media-controls-start-playback-button { display: none !important; }
伊恩的回答隐藏了一切，包括文字轨道（隐藏字幕…）
在video源文件中，您可以简单地更改
controls= "false"
对于ios上的原生浏览器的Safari CSS，你也可以尝试这个黑客技巧
.custom-video-controls { z-index: 2147483647; }
这里是关于pipe理/隐藏HTML 5video控件的详细讨论的链接
http://css-tricks.com/custom-controls-in-html5-video-full-screen/
您无法删除播放button。 此video占位符总是显示为文档说： iPhonevideoPlaceHolder 。 但是，也许你可以检测到你在iPhone上，并显示一个图像链接到您的video，而不是video标签。
<a href="yourvideo.mp4"><img src="yourposter.png"/></a>
video将作为video标签在播放器中播放。
对于webapps。 在Mac上运行iOS 10.3 iPhone7和Safari 10.1。 Thx给以前的贡献者。 我也有这个问题，元素根本不包含任何“控制”属性。
'<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>'
基于伊恩的回答
video::-webkit-media-controls { opacity: 0; }
这将隐藏所有的控件。 适用于不会自动播放的背景video。
今天@ 2017年在iOS 10这个作品：
.video-background::-webkit-media-controls-panel, .video-background::-webkit-media-controls-start-playback-button { display: none !important; }
video::-webkit-media-controls { display:none !important; }
在iOS上不适合我，但是
*::-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; }
工作完美！
尝试这个：
video { &::-webkit-media-controls { display:none !important; } &::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; } }
是的，你可以做到这一点！ 诀窍是“隐藏”video控件，不要将“controls”属性添加到video标签中。 然后，通过使用Javascript将“controls”属性附加到标记，让video开始播放几秒钟后dynamic添加它。 只需将值设置为“controls”，它就会dynamic地出现在DOM中，就好像您已经将控件添加到video标签的HTML中一样。 根据需要调整计时器。
<video id="some-video-id" src="some-video-url" poster="some-thumbnail-url" /> <a href="javascript:void(0);" id="startVideoLink">Start the Video</a> <script type="text/javascript"> var oVideoTag = document.getElementById('some-video-id'); var oLink = document.getElementById('startVideoLink'); if (oLink && oVideoTag) { oLink.addEventListener('click',function(e) { oVideoTag.play(); setTimeout(function() { oVideoTag.controls = 'controls'; },2500); },false); } </script>
