当我按下 HTML5 视频元素的默认全屏按钮时，如何捕获全屏事件？

Question

我在使用 HTML5 video 标签和 iconic.

时遇到问题

这是我的模板的一部分：

<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 标签没有自定义控制按钮，而是使用由 chromium 本身创建的默认控制栏。

现在我想在按下 fullscreen 按钮时做一些事情。我找到了一个将两个侦听器添加到视频对象的解决方案：webkitbeginfullscreen 和 webkitendfullscreen，但它没有被触发。

Answer 1

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

webkitfullscreenchange
mozfullscreenchange
fullscreenchange

至于 the specification goes 这就是你所拥有的。

参见 this example 或以下代码：

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

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

当我按下 HTML5 视频元素的默认全屏按钮时，如何捕获全屏事件？

How to capture the fullscreen event when I press the default fullscreen button of HTML5 video element?

html

javascript

html5-video

ionic-framework

html5-fullscreen