css - 如何在 Safari 11 中隐藏全屏视频控件

Question

环境：

• MacBook Pro
• MacOS High Sierra 10.13.3
• Safari 11.0.3

长话短说，我可以在 Chrome 和 Firefox 中隐藏全屏视频控件，但不能在 Safari 中隐藏。我认为下面的 CSS 片段适用于 Chrome 和 Safari，但我认为可能不是因为 Safari 的影子 DOM 没有“-webkit-media-controls”。

::-webkit-media-controls {
  display:none !important;
}

这是 Safari 开发工具中显示的带有阴影 DOM (.media-controls-container) 的视频标签。我可以通过在开发工具中编辑用户代理样式表来隐藏控件，但我似乎无法用代码来做到这一点。关于如何隐藏控件的任何想法？

<video autoplay="" style="width:711px; height:400px;" width="711px" height="400px" src="blob:https://localhost/...">
  <div class="media-controls-container">
    <div pseudo="-webkit-media-text-track-container" class="visible-controls-bar" style="display: none;"></div>
    <div class="media-controls mac fullscreen fade-in uses-ltr-user-interface-layout-direction" style="width: 1440px; height: 419px;">
      <div role="group" class="controls-bar bottom" style="transform: translate(53px, 52px);">
        <div class="background-tint">
          <div class="blur"></div>
          <div class="tint"></div>
        </div>
        <div class="buttons-container left" style="width: 118px;">
          <button class="volume-down bar" aria-label="Volume Down" style="width: 12px; height: 12px; left: 12px;">
            <picture style="width: 12px; height: 12px; -webkit-mask-image: ;"></picture>
          </button>
          <div class="slider volume" style="height: 16px; width: 60px; left: 30px;">
            <div class="custom-slider">
              <div class="track fill"></div>
              <div class="primary fill" style="width: 55.5px;"></div>
              <div class="secondary fill" style="left: 55.5px; right: 100%;"></div>
              <div class="knob" style="left: 55.5px;"></div>
            </div>
            <input type="range" min="0" max="1" step="0.001">
          </div>
          <button class="volume-up bar" aria-label="Volume Up" style="width: 22px; height: 15px; left: 96px;">
            <picture style="width: 22px; height: 15px; -webkit-mask-image: ;"></picture>
          </button>
        </div>
        <div class="buttons-container center" style="width: 178px;">
          <button class="rewind bar" aria-label="Rewind" style="width: 24px; height: 16px; left: 27px;">
            <picture style="width: 24px; height: 16px; -webkit-mask-image: ;"></picture>
          </button>
          <button class="play-pause bar paused" aria-label="Play" style="width: 22px; height: 26px; left: 78px;">
            <picture style="width: 22px; height: 26px; -webkit-mask-image: ;"></picture>
          </button>
          <button class="forward bar" aria-label="Forward" style="width: 24px; height: 16px; left: 127px;">
            <picture style="width: 24px; height: 16px; -webkit-mask-image: ;"></picture>
          </button>
        </div>
        <div class="buttons-container right" style="width: 83px;">
          <button class="pip bar" aria-label="Enter Picture in Picture" style="width: 19px; height: 16px; left: 12px;">
            <picture style="width: 19px; height: 16px; -webkit-mask-image: ;"></picture>
          </button>
          <button class="fullscreen bar" aria-label="Exit Full Screen" style="width: 16px; height: 16px; left: 55px;">
            <picture style="width: 16px; height: 16px; -webkit-mask-image: ;"></picture>
          </button>
        </div>
        <div class="time-control" style="width: 448px;">
          <div class="time-label" aria-label="Elapsed: 0 seconds" style="width: 27px;">0:00</div>
          <div class="slider scrubber" style="height: 16px; left: 32px; width: 378px;">
            <div class="custom-slider">
              <div class="track fill"></div>
              <div class="primary fill" style="width: 4.5px;"></div>
              <div class="secondary fill" style="left: 4.5px; right: 12.860977327673195%;"></div>
              <div class="knob" style="left: 4.5px;"></div>
            </div>
            <input type="range" min="0" max="1" step="0.001" aria-valuetext="0 seconds">
          </div>
          <div class="time-label" aria-label="Remaining: 35 seconds" style="width: 33px; left: 415px;">-0:35</div>
        </div>
      </div>
    </div>
  </div>
</video>

标签： cssmacossafarihtml5-videoshadow-dom