Как скрыть полноэкранные элементы управления видео в Safari 11 - PullRequest
Новая
       12

Как скрыть полноэкранные элементы управления видео в Safari 11

0 голосов
/ 20 ноября 2018

Окружающая среда:

  • MacBook Pro
  • MacOS High Sierra 10.13.3
  • Safari 11.0.3

Короче говоря, я могу скрыть полноэкранные элементы управления видео в Chrome и Firefox, но не в Safari. Я думал, что приведенный ниже фрагмент кода CSS будет работать как для Chrome, так и для Safari, но я думаю, что, возможно, это не так, потому что теневой DOM Safari не имеет "-webkit-media-controls". 

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

Вот видео-тег с теневым DOM (.media-controls-container), показанный в инструментах разработчика Safari. Я могу скрыть элементы управления, отредактировав таблицу стилей пользовательского агента в инструментах разработчика, но я не могу сделать это с помощью кода. Любые идеи о том, как скрыть элементы управления? 

<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>
...