Обнаружение выхода из полноэкранного режима для встроенного видеоплеера в формате HTML5 для запуска углового события - PullRequest
0 голосов
/ 26 февраля 2019

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

Компонент видеопроигрывателя:

<div [hidden]="!isVideoPlayerVisible">
    <video (ended)="VideoEnded()" (webkitfullscreenchange)="HideVideo()" #videoPlayer webkit-playsinline playsinline">
      <source [src]="videoDetails.source" type="video/mp4">
    </video>
</div>

Функция, которую нужно вызвать:

  public HideVideo(): void { }

-webkit-fullscreenchange работает в Интернете, но когда я использую приложениена моем iPhone он не вызывает событие -webkit-fullscreenchange, поэтому компонент в моем угловом приложении никогда не вызывается.

Кто-нибудь знает решение или событие, которое возникнет при выходе из полноэкранного режима?на IOS?

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

У меня была проблема, которую я нашел, что лучший способ обойти это - не использовать полноэкранный режим для вашего видео, отключить элементы управления видеоэлемента, вставить свой собственный и использовать полноэкранный API .

<div id="video-player">
   <video id="video-player-display" ...></video>
   <div class="controlls">
       <a onclick="handleFullscreenChange();">F</a>
   </div>
</div>

Затем вы можете использовать полноэкранный API на видеопроигрывателе div

document.getElementById("video-player").requestFullscreen();

Затем вы можете использовать полноэкранное API-событие Element.onfullscreenchange в качестве примера, используя приведенный выше HTML

var player = document.getElementById("video-player")
var videoPlayer = document.getElementById("video-player-display");
player.addEventListener("fullscreenchange", fullscreenChanged);
videoPlayer.addEventListener("ended", playerEnded);

function handleFullscreenChange(){
    if(document.fullscreenElement == player){
        document.exitFullscreen();
    }else{
        player.requestFullscreen();
    }
}

function playerEnded(evt){
    // player has ended exit fullscreen
    if(document.fullscreenElement == player){
        do
    }
}

function fullscreenChanged(evt){
   // fullscreen has changed evt will contain details
}
0 голосов
/ 26 февраля 2019

Насколько я могу судить, это известная ошибка в ios.Весь элемент видео HTML все еще большой беспорядок.Вы можете попробовать следующее:

<video (webkitpresentationmodechanged)="toggleVideo(videoPlayer)" #videoPlayer ...>

public toggleVideo(video: HTMLVideoElement): void {
  if (video.webkitDisplayingFullscreen) {
    this.HideVideo();
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...