无法使用CSS在iOS野生动物园中隐藏本机视频控件

编程问答 2022-06-03

问题描述

我想在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

iosiosjavascriptmobile-safarishadow-dom