當我按下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標簽的自定義控制按鈕，並使用由鉻本身創建的默認控制欄。

現在我想在按下fullscreen按鈕時執行某些操作。 我找到了一個解決方案，將兩個監聽器： webkitbeginfullscreen和webkitendfullscreen到視頻對象，但它沒有被觸發。

Answer 1

我不確定Android或iOS，但<video>元素可以使用以下三個事件之一：

• webkitfullscreenchange
• mozfullscreenchange
• fullscreenchange

並且就規范而言 ，這就是你所擁有的一切。

請參閱此示例或以下代碼：

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

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