отображение оверлейного контента в полноэкранном режиме в видео - PullRequest
Новая
       5

отображение оверлейного контента в полноэкранном режиме в видео

0 голосов
/ 04 февраля 2020

Я хочу отображать элементы управления и некоторую информацию в полноэкранном режиме видео HTML5, и я использую Angular для переключения в полноэкранный режим.

Когда я нажимаю кнопку полноэкранного режима, все содержимое скрыто.

Может ли кто-нибудь подсказать мне, как найти подходящее решение, которое может работать в разных браузерах?

Вот мой соответствующий HTML код: 

  <div class="video-container">
    <div class="video-wrapper">
      <video class="video" autoplay controls #videoPlayer>
        <source src="../../assets/movies/joker.mp4" type="video/mp4" />
        <track
          label="English"
          kind="subtitles"
          src="../../assets/Subtitles/jokersubtitles.vtt"
          srclang="en"
        />
        Your browser does not support HTML5 video.
      </video>
      <div class="overlay">
         <button class="buttons setting-button" (click)="toggleFullScreen()">
            <i class="material-icons top-icons">
              {{ screenStatus }}
            </i>
          </button>
        </span>
      </div>

Вот мой соответствующий машинописный код 

public toggleFullScreen() {
    if (this.screenStatus === "fullscreen") {
      this.videoPlayer.requestFullscreen();
      this.screenStatus = "fullscreen_exit";
    } else {
      this.videoPlayer.webkitExitFullScreen();
      this.screenStatus = "fullscreen";
    }
  }

Пожалуйста, помогите мне с проблемой и заранее спасибо.

...