HTML5 video not returning to poster image using .load()

Question

I have a video with a poster image and overlay content. The video requests full screen when user clicks custom play button. If the user exits full screen, the video is reloaded and the overlay content returns. Everything is working great except the poster image is not returning. Can anyone help me with this?

The javascript/jQuery is:

var featuredButton = $('.featured-panel .play img');
var featuredOverlay = $('.featured-panel .overlay-content');
var featuredVideo = $('.featured-video');
var featuredDown = $('.featured-panel .down');

// when clicking play button
featuredButton.on('click', function() {
  // hide play button
  $(this).hide();
  // hide down button
  featuredDown.hide();
  // hide overlay content
  featuredOverlay.fadeOut();
  // play the video
  $(this).parent().siblings(featuredVideo)[0].play();

  if (win.width() > 1024) {
    // vv This will automatically request full screen, consider using this and then returning to default poster view when full screen is exited
    $(this).parent().siblings(featuredVideo)[0].webkitRequestFullScreen();
    $(this).parent().siblings(featuredVideo)[0].mozRequestFullScreen();
  }
});

featuredVideo.bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
  var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
  var event = state ? 'FullscreenOn' : 'FullscreenOff';

  if (event == "FullscreenOff") {
    //do something when fullscreen off
    featuredVideo.load();
    featuredOverlay.fadeIn();
    featuredButton.show();
  }
});

Answer 1

Try to bind the fullscreenchange event on document or window instead of <video> . According to mdn

fullscreenchange

General info

Specification Fullscreen Interface
Event Bubbles Yes
Cancelable No
Target Document
Default Action None

Also note that your first call to .webkitRequestFullScreen(); will raise an error in Firefox, which, I think, will make it stops executing the script.

here is a better polyfill :

if(element.requestFullScreen)
    element.requestFullScreen();
    else if(element.webkitRequestFullScreen)
        element.webkitRequestFullScreen();
        else if(element.mozRequestFullScreen)
            element.mozRequestFullScreen();
            else if(element.msRequestFullscreen)
                element.msRequestFullscreen();
                else console.warn("fullscreen API not supported by this browser")

Here is a sample code with assumptive html, so I commented the featuredDown parts.
It will not work in here , but try this on your machine, it will. (fullscreeen requests are blocked inside the iframes of snippets.)

 var featuredButton = $('.featured-panel .play img'); var featuredOverlay = $('.featured-panel .overlay-content'); var featuredVideo = $('.featured-video'); var win= $(window); //var featuredDown = $('.featured-panel .down'); function requestFullscreen(element){ if(element.requestFullScreen) element.requestFullScreen(); else if(element.webkitRequestFullScreen) element.webkitRequestFullScreen(); else if(element.mozRequestFullScreen) element.mozRequestFullScreen(); else if(element.msRequestFullscreen) element.msRequestFullscreen(); else console.warn("fullscreen API not supported by this browser"); } // when clicking play button featuredButton.on('click', function() { // hide play button $(this).hide(); // hide down button // featuredDown.hide(); // hide overlay content featuredOverlay.fadeOut(); // play the video $(this).parent().siblings(featuredVideo)[0].play(); if (win.width() > 200) { requestFullscreen($(this).parent().siblings(featuredVideo)[0]); } }); win.bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) { var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; var event = state ? 'FullscreenOn' : 'FullscreenOff'; console.log(event); if (event == "FullscreenOff") { //do something when fullscreen off featuredVideo.load(); featuredOverlay.fadeIn(); featuredButton.show(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="featured-panel"> <div class="play"> <img src="http://lorempixel.com/50/50"> </div> <video controls="true" width="500" poster="http://lorempixel.com/500/280" class="featured-video"> <source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4"> <source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv"> </video> </div>