Как захватить полноэкранное событие, когда я нажимаю стандартную полноэкранную кнопку видеоэлемента 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)