隐藏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>