当我按下HTML5视频元素的默认全屏按钮时，如何捕获全屏事件? [英] How to capture the fullscreen event when I press the default fullscreen button of HTML5 video element?

问题描述

使用HTML5 video标签和iconic时出现问题.

I have a problem when use the HTML5 video tag and iconic.

这是我的模板的一部分:

Here is part of my template:

<ion-view>
   <ion-content overflow-scroll="true" data-tap-disable="true">
      <div class="list card">
        <div class="item item-body" style="padding: 5% 5% 5% 5%">
            <div class="player">
            <video controls="controls" autoplay id="sr"></video>
          </div>
        </div>
      </div>
   </ion-content>
</ion-view>

这是我的控制人:

.controller('viewVideoCtrl', function ($scope, $state, $stateParams) {
   var videoPath = URL + "uploadFiles" + $stateParams.videoPath;

   var videoObject = document.getElementById("sr");
   videoObject.src = videoPath;
   var webkitBeginFullScreen = function () {
      alert("video has fullScreen!");
   };

   var onVideoEndsFullScreen = function () {
     alert("fullScreen has end!");
   };

   videoObject.addEventListener('webkitbeginfullscreen', webkitBeginFullScreen, false);
   videoObject.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);
});

如您所见，没有video标签的自定义控制按钮，而是使用由铬本身创建的默认控制栏.

As you see there is no custom control button of video tag and use the default control bar which is created by the chromium itself.

现在，当我按下fullscreen按钮时，我想做些事情.我找到了将两个侦听器:webkitbeginfullscreen和webkitendfullscreen添加到视频对象的解决方案，但未触发.

Now I want to do something when the fullscreen button is pressed. I found a solution that add the two listener: webkitbeginfullscreen and webkitendfullscreen to the video object, but it not fired.

推荐答案

我真的不确定Android或iOS，但是<video>元素可以使用以下三个事件之一:

I am not sure about Android or iOS really, but the <video> element can use one of the following three events:

• webkitfullscreenchange
• mozfullscreenchange
• fullscreenchange

• webkitfullscreenchange
• mozfullscreenchange
• fullscreenchange

，只要达到该规范就可以.

请参见此示例或以下代码:

function onFullScreen(e) {
  var isFullscreenNow = document.webkitFullscreenElement !== null
  alert('Fullscreen ' + isFullscreenNow)
}

document.getElementById("video").addEventListener('webkitfullscreenchange', onFullScreen)

这篇关于当我按下HTML5视频元素的默认全屏按钮时，如何捕获全屏事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！