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.