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

ionic-v1
1

hello everyone,I’am really new in ionic.I’am now developing an app with ionic,but I have a problem recently when use the HTML5 video tag.

here is part of my template:

      <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>

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 find a solution that add the two listener ‘webkitbeginfullscreen’ and ‘webkitendfullscreen’ to the video object,but it not fired,any who could help?