检测html5中内联视频播放器的全屏退出以触发角度事件

Question

我正在使用内联播放器以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上退出全屏模式，将会有一个解决方案或事件？

Answer 1

据我所知，它是ios中的一个已知错误。整个HTML视频元素仍然是一个大混乱。您可以尝试以下方法：

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

public toggleVideo(video: HTMLVideoElement): void {
  if (video.webkitDisplayingFullscreen) {
    this.HideVideo();
  }
}

Answer 2

我遇到了这个问题我发现解决这个问题的最佳方法是不要在你的视频上使用全屏并禁用视频元素上的控件并将自己放入并使用Full-screen API

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

然后，您可以在视频播放器div上使用全屏API

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
}