Fullscreen mode for 23 Video players, done with `window.open()`

fullscreen-button.js

/*
   MODULE: FULLSCREEN BUTTON
   Handle full screen button and shortcut.

   Fires:
   - player:fullscreenchange

   Answers properties:
   - supportsFullscreen [get]
   - fullscreen [get/set]
   
   Options
   - fullscreenMode [auto/standard/reload]
*/

Player.provide('fullscreen-button',
  {
    fullscreenMode:'auto'
  },
  function(Player,$,opts){
    var $this = this;
    $.extend($this, opts);
    Player.bind('player:settings', function(e){
      PlayerUtilities.mergeSettings($this, ['fullscreenMode']);
      if($this.fullscreenMode=='auto') {
        $this.fullscreenMode = ((msie=navigator.userAgent.match(/MSIE (\d+)/)) && parseInt(msie[1])<11 ? 'reload' : 'standard');
      }
    });
  
    // Is this the subject of a fullscreen reload?
    var fullscreenReloadMode = Player.parameters.fullscreenReload||false;
    if(fullscreenReloadMode) {
      $(window).on('blur', function(){
        window.close();
      });
    }

    // Toogle fullscreen on alt+enter
    $(window).keydown(function(e){
        if((e.altKey||e.metaKey) && (e.charCode==32 || e.keyCode==13)) {
          Player.set('fullscreen', !Player.get('fullscreen'));
        }
      });

    // Update UI when full screen changes
    Player.bind('player:video:fullscreenchange player:loaded player:video:ready', function(e){
        $this.container.toggle(Player.get('supportsFullscreen'));
        $this.render();
      });

    // Hide elements when Flash is prompting for full screen
    Player.bind('player:video:fullscreenprompt', function(e){
        $('.big-button, .video-canvas div').hide();
      });
    Player.bind('player:video:clearfullscreenprompt', function(e){
        $('.big-button, .video-canvas div').show();
      });
    Player.bind('player:video:enterfullscreen', function(e){
        Player.set('playing', true);
        Player.set('analyticsEvent', 'fullscreen');
      });

    // Implement an alternative fullscreen mode using window.open() and a full player reload
    var openReloadFullscreen = function(){
      // Control state of the new player
      var loaded = false;
      var playing = Player.get('playing');
      var currentTime = Player.get('currentTime');
      // Pause this player
      Player.set('playing', false);
      // Build a URL from the current location
      var url = location.href;
      if(!/\?/.test(url)) url+='?';
      url = url.replace('autoPlay=[01]?', '').replace('start=[\.0-9]+?', '').replace(/\&$/, '');
      url += '&autoPlay=1&fullscreenReload=1&start='+currentTime;
      // Open a fullscreen window
      var fs = window.open(url, 'fullscreen', 'fullscreen=yes,menubar=no,scrollbars=no,titlebar=no,toolbar=no');
      // Listen for changes in the fullscreen window       
      var interval = window.setInterval(function(){
        // Wait for the frame to have loaded a Player
        if(!loaded && (!fs || !fs.window || !fs.window.Player)) return;
        loaded = true;

        try {
          // Update state on the player
          currentTime = fs.window.Player.get('currentTime');
          playing = fs.window.Player.get('playing');
        }catch(e){
          // Bring state back on close
          window.clearInterval(interval);
          if(fs) fs.close();
          Player.set('currentTime', currentTime);
          Player.set('playing', playing);
        }
      }, 300);
    }
  
    /* GETTERS */
    Player.getter('supportsFullscreen', function(){
      if(fullscreenReloadMode || $this.fullscreenMode=='reload') return true;

      var ve = Player.get('videoElement');
      return (ve ? ve.hasFullscreen() : false);
    });
    Player.getter('fullscreen', function(){
      if(fullscreenReloadMode || $this.fullscreenMode=='reload') return true;

      var ve = Player.get('videoElement');
      return (ve ? ve.isFullscreen() : false);
    });
    /* SETTERS */
    Player.setter('fullscreen', function(fs){
      if(!Player.get('supportsFullscreen')) return;
      if(fullscreenReloadMode) {
        window.close();
        return;
      }
      if($this.fullscreenMode=='reload') {
        openReloadFullscreen();
        return;
      }
      var ve = Player.get('videoElement');
      if(ve) {
        if(fs) {
            ve.enterFullscreen();
        } else {
            ve.leaveFullscreen();
        }
      }
    }, (fullscreenReloadMode?['esc']:[]));

    return $this;
  }
);

/* Translations for this module */
Player.translate("toggle_fullscreen",{
    en: "Toggle fullscreen"
});