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
}

在html5中检测嵌入式视频播放器的全屏退出以触发角度事件

2 个答案: