如何解决无法使用CSS在iOS野生动物园中隐藏本机视频控件
我想在iOS野生动物园(iOS 13.x 14.x)中隐藏本机视频播放器的自定义视频控件,
当我未指定“控件”属性时,控件不会出现在video元素上,但是在全屏中,它们会始终显示,使用网络检查器我发现以下html创建了它: (视频是我的视频元素,其余的由iOS野生动物园添加)
<video playsinline="" id="nativeVideo" style="display: block; width: 100%; height: 100%;" src="... .mp4">
Shadow Content (User Agent)
<style>.....</style>
<div class="media-controls-container">
<div pseudo="-webkit-media-text-track-container" class="visible-controls-bar" style="display: none; stroke-width: 0px;">
</div>
<div class="media-controls inline ios uses-ltr-user-interface-layout-direction" style="width: 375px; height: 276px; zoom: 2.613019951490689; top: auto;">
</div>
</div>
</video>
我想隐藏此“媒体控件容器”
我通过其他答案尝试了以下css,但是没有em可以使用,请注意,我正在iOS Safari浏览器(移动浏览器版本13.x或14.x)中执行此操作
无法工作的css:
video::-webkit-media-controls {
display:none !important;
}
.media-controls-container{
display:none !important;
-webkit-appearance: none;
}
::-webkit-media-controls {
display:none !important;
}
.media-controls-container,.media-controls-container > * {
display: none !important;
}
video::-webkit-media-controls-start-playback-button {
display: none !important;
}
video::-webkit-media-controls {
display:none !important;
}
video::media-controls-container {
display:none !important;
}
video::.media-controls-container {
display:none !important;
}
*::-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视频控件?
再次: iOS Safari(移动浏览器),全屏原生视频控件
该视频元素位于一个IFRAME中,我无法控制该IFRAME。因此,我不能仅将视频元素的大小调整为我想要的任何大小,而必须使用全屏API。
解决方法
EDIT在知道视频在iframe中并且在iframe之外无法进行控制之前提出了这个答案。如果有谁控制了iframe(如果有的话,将iframe与video元素一起展开),如果没有则控制video,那么答案就留在这里。
<button onclick="document.getElementById('vid').style.width='100vw';">Fullscreen</button>
<button onclick="document.getElementById('vid').play();">Play</button>
<video id="vid" src="http://ahweb.org.uk/cliveden-boathouse.mp4" style="width:100px;height:auto;"></video>
不是该问题的确切答案,而是一个解决方案,它解决了无法获取影子DOM的问题,并且具有不依赖于确切知道浏览器将放置在其中的优点。 ,就是将视频包装在一个包含div的视频中,并且在要求全屏显示的用户上,只需填充整个屏幕并使视频紧随其后即可。
当然,需要做一些初步的工作来确定视频的宽高比,以决定是水平填充还是垂直填充,还有一些z-index的设置等,但是如果您要无论如何都可以放置自己的控件,将可以正常工作:
<div id="container" style="width: 300px; height: auto;">
<video src="..." style="width:100%; height: auto;"></video>
</div>
<button onclick="document.getElementById('container').style.width='100vw';document.getElementById('container').style.height='100vh';">Fullscreen</button>
,
此隐藏控件,但也许您可以自定义控件
var vids = $("video");
$。each(vids,function(){
this.controls = false;
}); enter code here
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。