CODEWITHSUNDEEP
jqueryhtmlvideofullscreen
M G
M G

Reputation: 21

exit fullscreen video at the ending with js on Firefox?

<script>    
  $(document).ready(function(){
    $('#Video').bind('ended', function(){

      $('#Video')[0].mozCancelFullScreen();

    });
  });    
</script>

I've tried to create a website in fullscreen mode with videobuttons that shows up some videos in fullscreen. At the end of the videos the videofullscreen should close and show the fullscreen website overview, but it doesn't work. Only $('#Video').fadeout(); works and the website overview shows up after the ending of a video, but then I can't reopen the video. And I tried to close the Fullscreen Video with a mouseclick handler, but it doesn't work either. 

var Video = document.getElementById("Video")
    buttonFullscreen = document.getElementById("button");   

if (Video && buttonFullscreen) {
   videoFullscreen.addEventListener("click", function (evt) {

    if (Video.mozRequestFullScreen) {
      Video.mozRequestFullScreen();
      Video.mozSrcObject=null;
      Video.play();

      mouse.click( function () {
        Video.mousedown(function(event) {
          Video.pause();
          Video.mozSrcObject=null;
          Video.mozCancelFullScreen();
        }); 
     });

    }
  else if (Video.webkitRequestFullScreen) {
    Video.webkitRequestFullScreen();
    Video.play();

  }, false);
}

Upvotes: 2

Views: 1227

Answers (1)

degrassesagan
degrassesagan

Reputation: 83

I've also never been able to get document.mozCancelFullScreen to work without a direct user interaction. So calling it from certain event callbacks or a timeout doesn't seem to work ever.

The workaround is removing the element then putting back where it was. That's why $.fadeout() works for you because it removes the element from the DOM. I've used:

var parentNode = videoElement.parentNode;
parentNode.removeChild(videoElement);
parentNode.appendChild(videoElement);

It seems terrible but it's the only way I could get it to work in FF.

Upvotes: 5

Related Questions