12

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>

Here is my controller:

.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);
});

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.

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.

foolishfox
  • 167
  • 1
  • 2
  • 7

1 Answers1

15

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

  • webkitfullscreenchange
  • mozfullscreenchange
  • fullscreenchange

and as far as the specification goes that's all you've got.

See this example or the following code:

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

document.getElementById("video").addEventListener('webkitfullscreenchange', onFullScreen)
geekonaut
  • 5,714
  • 2
  • 28
  • 30
  • Hello @geekonaut, quick question. How do I add an event listener to a list of videos that is dynamically created? Thank you – Nick Sep 08 '16 at 14:03
  • 1
    The answer is event delegation. Events bubble down and up the DOM tree, so you can have a container element that contains all the dynamically added videos and use a single event handler on the container event to catch these events. Here is a sample: http://codepen.io/AVGP/pen/JRdVJv (works only in Chrome, but with the correct events it works across browsers) – geekonaut Sep 08 '16 at 21:05
  • Note that the default UI's fullscreen mode is not necessarily the same as the WebFullScreen API. For instance, Chrome now supports unprefixed Fullscreen API, but the event that gets dispatched from video elements is a proprietary one that needs to get caught using the `webkit` prefix (same for fullscreenElement etc.). => This is not spec'ed. – Kaiido Jan 17 '19 at 08:06
  • 2
    2019, and still have to use `webkitfullscreenchange` instead of `fullscreenchange`. – junvar Sep 22 '19 at 18:08