0

I have an HTML video that plays full screen when the user clicks play. If the user hits escape inside of full screen, everything works properly - the video stops playing and exits full screen. However, if the user pauses the video inside of full screen and then hits escape, the video starts playing again causing the sound from the video to loop over the page that is returned to upon exiting full screen. My js controls are as follows:

exitHandler: function(){
    vid = Video.vid;
    $(Video.featuredVideo).toggleClass('featured-video-show');
    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null){
        if (vid.paused){
            vid.play();
        }
        else {
            vid.pause();
        }
    }
  }

How can I stop the video/audio from starting back up if a user pauses inside of full screen and then hits 'escape' to exit full screen?

JordanBarber
  • 2,041
  • 5
  • 34
  • 62
  • Why do you play the video if it's paused on fullscreen exit? Is there a purpose for that code? Because that's what would be causing your issue. – sg.cc Feb 01 '16 at 20:00
  • Ah. Well i need to play the video upon entering full screen. If i change the if statement to just vid.pause() the issue above is fixed but now the video does not play upon entering full screen – JordanBarber Feb 01 '16 at 20:13

1 Answers1

0

Create a variable to keep track of whether you are currently (at the time of handler's execution) exiting or entering fullscreen, and don't fire the play command if you are indeed exiting it. I don't think there are specific event listeners for this, so you may have to write an interval for this. When I faced this issue, I used the following function:

var canFullscreen = function(){
  return (
    !document.fullscreenElement &&
    !document.mozFullScreenElement &&
    !document.webkitFullscreenElement &&
    !document.msFullscreenElement );
}

This function checks whether we can currently enter fullscreen. If it returns false, then either there is no fullscreen capability (old/weird browser), or you are already in fullscreen. This is the function I ran in the interval to check exactly when the user exits fullscreen (and at that point handled the exit programmatically). If you are instead tracking the keypress of the Escape button, you may put that function there to determine whether you're entering or exiting fullscreen.

sg.cc
  • 1,726
  • 19
  • 41