Embed: dynamically load player js only if required

embed/wrappers/dashjs.js

@@ -1,6 +1,6 @@
 mistplayers.dashjs = {
   name: 'Dash.js Player',
-  version: '1.1',
+  version: '1.2',
   mimes: ['dash/video/mp4'],
   priority: Object.keys(mistplayers).length + 1,
   isMimeSupported: function (mimetype) {
@@ -8,7 +8,7 @@ mistplayers.dashjs = {
   },
   isBrowserSupported: function (mimetype,source,options) {
     if ((options.host.substr(0,7) == 'http://') && (source.url.substr(0,8) == 'https://')) { return false; }
-    return (('dashjs' in window) && ('MediaSource' in window) && (location.protocol != 'file:'));
+    return (('MediaSource' in window) && (location.protocol != 'file:'));
   },
   player: function(){}
 };
@@ -19,93 +19,113 @@ p.prototype.build = function (options,callback) {
   cont.className = 'mistplayer';
   var me = this;
   
-  var ele = this.getElement('video');
-  ele.className = '';
-  cont.appendChild(ele);
-  ele.width = options.width;
-  ele.height = options.height;
-  
-  if (options.autoplay) {
-    ele.setAttribute('autoplay','');
-  }
-  if (options.loop) {
-    ele.setAttribute('loop','');
-  }
-  if (options.poster) {
-    ele.setAttribute('poster',options.poster);
-  }
-  if (options.controls) {
-    if (options.controls == 'stock') {
-      ele.setAttribute('controls','');
+  function onplayerload () {
+    var ele = me.getElement('video');
+    ele.className = '';
+    cont.appendChild(ele);
+    ele.width = options.width;
+    ele.height = options.height;
+    
+    if (options.autoplay) {
+      ele.setAttribute('autoplay','');
     }
-    else {
-      this.buildMistControls();
+    if (options.loop) {
+      ele.setAttribute('loop','');
     }
-  }
-  
-  ele.addEventListener('error',function(e){
-    var msg;
-    if ('message' in e) {
-      msg = e.message;
+    if (options.poster) {
+      ele.setAttribute('poster',options.poster);
     }
-    else {
-      msg = 'readyState: ';
-      switch (me.element.readyState) {
-        case 0:
-          msg += 'HAVE_NOTHING';
-          break;
-        case 1:
-          msg += 'HAVE_METADATA';
-          break;
-        case 2:
-          msg += 'HAVE_CURRENT_DATA';
-          break;
-        case 3:
-          msg += 'HAVE_FUTURE_DATA';
-          break;
-        case 4:
-          msg += 'HAVE_ENOUGH_DATA';
-          break;
+    if (options.controls) {
+      if (options.controls == 'stock') {
+        ele.setAttribute('controls','');
       }
-      msg += ' networkState: ';
-      switch (me.element.networkState) {
-        case 0:
-          msg += 'NETWORK_EMPTY';
-          break;
-        case 1:
-          msg += 'NETWORK_IDLE';
-          break;
-        case 2:
-          msg += 'NETWORK_LOADING';
-          break;
-        case 3:
-          msg += 'NETWORK_NO_SOURCE';
-          break;
+      else {
+        me.buildMistControls();
       }
     }
-    //prevent onerror loops
-    if (e.target == me.element) {
-      e.message = msg;
-    }
-    else {
-      me.adderror(msg);
-    }
-  });
-    var events = ['abort','canplay','canplaythrough','durationchange','emptied','ended','interruptbegin','interruptend','loadeddata','loadedmetadata','loadstart','pause','play','playing','ratechange','seeked','seeking','stalled','volumechange','waiting'];
-  for (var i in events) {
-    ele.addEventListener(events[i],function(e){
-      me.addlog('Player event fired: '+e.type);
+    
+    ele.addEventListener('error',function(e){
+      var msg;
+      if ('message' in e) {
+        msg = e.message;
+      }
+      else {
+        msg = 'readyState: ';
+        switch (me.element.readyState) {
+          case 0:
+            msg += 'HAVE_NOTHING';
+            break;
+          case 1:
+            msg += 'HAVE_METADATA';
+            break;
+          case 2:
+            msg += 'HAVE_CURRENT_DATA';
+            break;
+          case 3:
+            msg += 'HAVE_FUTURE_DATA';
+            break;
+          case 4:
+            msg += 'HAVE_ENOUGH_DATA';
+            break;
+        }
+        msg += ' networkState: ';
+        switch (me.element.networkState) {
+          case 0:
+            msg += 'NETWORK_EMPTY';
+            break;
+          case 1:
+            msg += 'NETWORK_IDLE';
+            break;
+          case 2:
+            msg += 'NETWORK_LOADING';
+            break;
+          case 3:
+            msg += 'NETWORK_NO_SOURCE';
+            break;
+        }
+      }
+      //prevent onerror loops
+      if (e.target == me.element) {
+        e.message = msg;
+      }
+      else {
+        me.adderror(msg);
+      }
     });
+    var events = ['abort','canplay','canplaythrough','durationchange','emptied','ended','interruptbegin','interruptend','loadeddata','loadedmetadata','loadstart','pause','play','playing','ratechange','seeked','seeking','stalled','volumechange','waiting'];
+    for (var i in events) {
+      ele.addEventListener(events[i],function(e){
+        me.addlog('Player event fired: '+e.type);
+      });
+    }
+    
+    var player = dashjs.MediaPlayer().create();
+    player.getDebug().setLogToBrowserConsole(false);
+    player.initialize(ele,options.src,true);
+    me.dash = player;
+    me.src = options.src;
+    
+    
+    me.addlog('Built html');
+    callback(cont);
   }
   
-  var player = dashjs.MediaPlayer().create();
-  player.getDebug().setLogToBrowserConsole(false);
-  player.initialize(ele,options.src,true);
-  this.dash = player;
-  this.src = options.src;
-  
-  this.addlog('Built html');
-  return cont;
+  if ('dash' in window) {
+    onplayerload();
+  }
+  else {
+    //load the dashjs player
+    var scripttag = document.createElement('script');
+    scripttag.src = options.host+'/dashjs.js';
+    me.addlog('Retrieving dashjs player code from '+scripttag.src);
+    document.head.appendChild(scripttag);
+    scripttag.onerror = function(){
+      me.askNextCombo('Failed to load dashjs.js');
+    }
+    scripttag.onload = function(){
+      onplayerload();
+    }
+  }
 }
 p.prototype.play = function(){ return this.element.play(); };
 p.prototype.pause = function(){ return this.element.pause(); };

embed/wrappers/flash_strobe.js

@@ -1,6 +1,6 @@
 mistplayers.flash_strobe = {
   name: 'Strobe Flash Media Playback',
-  version: '1.0',
+  version: '1.1',
   mimes: ['flash/10','flash/11','flash/7'],
   priority: Object.keys(mistplayers).length + 1,
   isMimeSupported: function (mimetype) {
@@ -28,7 +28,7 @@ mistplayers.flash_strobe = {
 };
 var p = mistplayers.flash_strobe.player;
 p.prototype = new MistPlayer();
-p.prototype.build = function (options) {
+p.prototype.build = function (options,callback) {
   function createParam(name,value) {
     var p = document.createElement('param');
     p.setAttribute('name',name);
@@ -62,5 +62,5 @@ p.prototype.build = function (options) {
   
   
   this.addlog('Built html');
-  return ele;
+  callback(ele);
 }

embed/wrappers/html5.js

@@ -1,6 +1,6 @@
 mistplayers.html5 = {
   name: 'HTML5 video player',
-  version: '1.0',
+  version: '1.1',
   mimes: ['html5/application/vnd.apple.mpegurl','html5/video/mp4','html5/video/ogg','html5/video/webm','html5/audio/mp3','html5/audio/webm','html5/audio/ogg','html5/audio/wav'],
   priority: Object.keys(mistplayers).length + 1,
   isMimeSupported: function (mimetype) {
@@ -32,7 +32,7 @@ mistplayers.html5 = {
 };
 var p = mistplayers.html5.player;
 p.prototype = new MistPlayer();
-p.prototype.build = function (options) {
+p.prototype.build = function (options,callback) {
   var cont = document.createElement('div');
   cont.className = 'mistplayer';
   var me = this; //to allow nested functions to access the player class itself
@@ -174,7 +174,7 @@ p.prototype.build = function (options) {
       me.addlog('Player event fired: '+e.type);
     });
   }
-  return cont;
+  callback(cont);
 }
 p.prototype.play = function(){ return this.element.play(); };
 p.prototype.pause = function(){ return this.element.pause(); };

embed/wrappers/img.js

@@ -1,6 +1,6 @@
 mistplayers.img = {
   name: 'HTML img tag',
-  version: '1.0',
+  version: '1.1',
   mimes: ['html5/image/jpeg'],
   priority: Object.keys(mistplayers).length + 1,
   isMimeSupported: function (mimetype) {
@@ -15,9 +15,9 @@ mistplayers.img = {
 };
 var p = mistplayers.img.player;
 p.prototype = new MistPlayer();
-p.prototype.build = function (options) {
+p.prototype.build = function (options,callback) {
   var ele = this.getElement('img');
   ele.src = options.src;
   ele.style.display = 'block';
-  return ele;
+  callback(ele);
 }

embed/wrappers/jwplayer.js

@@ -1,6 +1,6 @@
 mistplayers.jwplayer = {
   name: 'JWPlayer',
-  version: '0.1',
+  version: '0.2',
   mimes: ['html5/video/mp4','html5/video/webm','dash/video/mp4','flash/10','flash/7','html5/application/vnd.apple.mpegurl','html5/audio/mp3','html5/audio/aac'],
   priority: Object.keys(mistplayers).length + 1,
   isMimeSupported: function (mimetype) {
@@ -17,7 +17,7 @@ mistplayers.jwplayer = {
 };
 var p = mistplayers.jwplayer.player;
 p.prototype = new MistPlayer();
-p.prototype.build = function (options) {
+p.prototype.build = function (options,callback) {
   var ele = this.getElement('div');
   
   this.jw = jwplayer(ele).setup({
@@ -30,7 +30,7 @@ p.prototype.build = function (options) {
   });
   
   this.addlog('Built html');
-  return ele;
+  callback(ele);
 }
 p.prototype.play = function(){ return this.jw.play(); };
 p.prototype.pause = function(){ return this.jw.pause(); };

embed/wrappers/polytrope.js

@@ -1,6 +1,6 @@
 mistplayers.polytrope = {
   name: 'Polytrope Flash Player',
-  version: '0.1',
+  version: '0.2',
   mimes: ['flash/11','flash/10','flash/7'],
   priority: Object.keys(mistplayers).length + 1,
   isMimeSupported: function (mimetype) {
@@ -27,7 +27,7 @@ mistplayers.polytrope = {
 };
 var p = mistplayers.polytrope.player;
 p.prototype = new MistPlayer();
-p.prototype.build = function (options) {
+p.prototype.build = function (options,callback) {
   function createParam(name,value) {
     var p = document.createElement('param');
     p.setAttribute('name',name);
@@ -97,5 +97,5 @@ p.prototype.build = function (options) {
   ele.innerHTML =         '<param name="wmode" value="opaque">       <param name="menu" value="false">        <param name="allowFullScreen" value="true">        <param name="allowFullScreenInteractive" value="true">        <param name="allowScriptAccess" value="always">        <param name="expressInstall" value="/shared/swf/expressInstall.swf">        <param name="flashvars" value="rtmp_url=rtmp://www.stickystage.com/play/&amp;stream_name=stickystage_archive+SrA-2016.07.08.23.54.08&amp;poster=http://stickystage.com/stickystage/users/SrA/archive/SrA-2016.07.08.23.54.08.jpg&amp;autoplay=true&amp;color_1=0x1d1d1d&amp;color_2=0xffffff&amp;buffer_time=0.1&amp;is_streaming_url=/api/user/is_streaming&amp;username=SrA&amp;mode=archive&amp;guid=4dc64c18-59af-91a2-d0c5-ab8df4f45c65">        <param name="movie" value="players/polytrope.swf">';
   
   this.addlog('Built html');
-  return ele;
+  callback(ele);
 }

embed/wrappers/silverlight.js

@@ -1,6 +1,6 @@
 mistplayers.silverlight = {
   name: 'Silverlight',
-  version: '1.0',
+  version: '1.1',
   mimes: ['silverlight'],
   priority: Object.keys(mistplayers).length + 1,
   isMimeSupported: function (mimetype) {
@@ -25,7 +25,7 @@ mistplayers.silverlight = {
 };
 var p = mistplayers.silverlight.player;
 p.prototype = new MistPlayer();
-p.prototype.build = function (options) {
+p.prototype.build = function (options,callback) {
   function createParam(name,value) {
     var p = document.createElement('param');
     p.setAttribute('name',name);
@@ -52,5 +52,5 @@ p.prototype.build = function (options) {
   img.setAttribute('style','border-style: none;')
   
   this.addlog('Built html');
-  return ele;
+  callback(ele);
 }

embed/wrappers/template.js

@@ -14,11 +14,11 @@ mistplayers.myplayer = {
 };
 var p = mistplayers.myplayer.player;
 p.prototype = new MistPlayer();
-p.prototype.build = function (options) {
+p.prototype.build = function (options,callback) {
   var ele = this.element('object');
   
   //TODO your code here
   
   this.addlog('Built html');
-  return ele;
+  callback(ele);
 }

embed/wrappers/theoplayer.js

@@ -1,6 +1,6 @@
 mistplayers.theoplayer = {
   name: 'TheoPlayer',
-  version: '0.1',
+  version: '0.2',
   mimes: ['html5/application/vnd.apple.mpegurl','dash/video/mp4'],
   priority: Object.keys(mistplayers).length + 1,
   isMimeSupported: function (mimetype) {
@@ -17,7 +17,7 @@ mistplayers.theoplayer = {
 };
 var p = mistplayers.theoplayer.player;
 p.prototype = new MistPlayer();
-p.prototype.build = function (options) {
+p.prototype.build = function (options,callback) {
   var ele = this.getElement('video');
   
   ele.src = options.src;
@@ -40,7 +40,7 @@ p.prototype.build = function (options) {
   this.theoplayer = theoplayer(ele);
   
   this.addlog('Built html');
-  return ele;
+  callback(ele);
 }
 p.prototype.play = function(){ return this.theoplayer.play(); };
 p.prototype.pause = function(){ return this.theoplayer.pause(); };

embed/wrappers/videojs.js

@@ -1,6 +1,6 @@
 mistplayers.videojs = {
   name: 'VideoJS player',
-  version: '1.0',
+  version: '1.1',
   mimes: ['html5/video/mp4','html5/application/vnd.apple.mpegurl','html5/video/ogg','html5/video/webm'],
   priority: Object.keys(mistplayers).length + 1,
   isMimeSupported: function (mimetype) {
@@ -22,12 +22,21 @@ mistplayers.videojs = {
     
     //dont use HLS if there is an MP3 audio track, unless we're on apple or edge
     if ((mimetype == 'html5/application/vnd.apple.mpegurl') && (['iPad','iPhone','iPod','MacIntel'].indexOf(navigator.platform) == -1) && (navigator.userAgent.indexOf('Edge') == -1)) {
+      var audio = false;
+      var nonmp3 = false;
       for (var i in streaminfo.meta.tracks) {
         var t = streaminfo.meta.tracks[i];
-        if (t.codec == 'MP3') {
-          return false;
+        if (t.type == 'audio') {
+          audio = true;
+          if (t.codec != 'MP3') {
+            nonmp3 = true;
+          }
         }
       }
+      if ((audio) && (!nonmp3)) {
+        if (logfunc) { logfunc('This source has audio, but only MP3, and this browser can\'t play MP3 via HLS'); }
+        return false;
+      }
     }
     
     
@@ -37,118 +46,139 @@ mistplayers.videojs = {
 };
 var p = mistplayers.videojs.player;
 p.prototype = new MistPlayer();
-p.prototype.build = function (options) {
-  var cont = document.createElement('div');
-  cont.className = 'mistplayer';
+p.prototype.build = function (options,callback) {
   var me = this; //to allow nested functions to access the player class itself
   
-  this.addlog('Building VideoJS player..');
-  
-  var ele = this.getElement('video');
-  cont.appendChild(ele);
-  ele.className = '';
-  ele.crossOrigin = 'anonymous'; //required for subtitles
-  
-  var shortmime = options.source.type.split('/');
-  shortmime.shift();
-  
-  var source = document.createElement('source');
-  source.setAttribute('src',options.src);
-  this.source = source;
-  ele.appendChild(source);
-  source.type = shortmime.join('/');
-  this.addlog('Adding '+source.type+' source @ '+options.src);
-  if (source.type == 'application/vnd.apple.mpegurl') { source.type = 'application/x-mpegURL'; }
-  
-  ele.className += ' video-js';
-  ele.width = options.width;
-  ele.height = options.height;
-  ele.style.width = options.width+'px';
-  ele.style.height = options.height+'px';
-  
-  var vjsopts = {
-    preload: 'auto'
-  };
-  
-  if (options.autoplay) { vjsopts.autoplay = true; }
-  if (options.loop) { 
-    vjsopts.loop = true;
-    ele.loop = true;
-  }
-  if (options.poster) { vjsopts.poster = options.poster; }
-  if (options.controls) {
-    if ((options.controls == 'stock') || (!this.buildMistControls())) {
-      //MistControls have failed to build in the if condition
-      ele.setAttribute('controls',true);
+  function onplayerload () {
+    me.addlog('Building VideoJS player..');
+    
+    var cont = document.createElement('div');
+    cont.className = 'mistplayer';
+    
+    var ele = me.getElement('video');
+    cont.appendChild(ele);
+    ele.className = '';
+    ele.crossOrigin = 'anonymous'; //required for subtitles
+    
+    var shortmime = options.source.type.split('/');
+    shortmime.shift();
+    
+    var source = document.createElement('source');
+    source.setAttribute('src',options.src);
+    me.source = source;
+    ele.appendChild(source);
+    source.type = shortmime.join('/');
+    me.addlog('Adding '+source.type+' source @ '+options.src);
+    if (source.type == 'application/vnd.apple.mpegurl') { source.type = 'application/x-mpegURL'; }
+    
+    ele.className += ' video-js';
+    ele.width = options.width;
+    ele.height = options.height;
+    ele.style.width = options.width+'px';
+    ele.style.height = options.height+'px';
+    
+    var vjsopts = {
+      preload: 'auto'
+    };
+    
+    if (options.autoplay) { vjsopts.autoplay = true; }
+    if (options.loop) { 
+      vjsopts.loop = true;
+      ele.loop = true;
     }
-  }
-  
-  
-  me.onready(function(){
-    me.videojs = videojs(ele,vjsopts,function(){
-      me.addlog('Videojs initialized');
-    });
-  });
-  
-  this.addlog('Built html');
-  
-  //forward events
-  ele.addEventListener('error',function(e){
-    var msg;
-    if ('message' in e) {
-      msg = e.message;
-    }
-    else {
-      msg = 'readyState: ';
-      switch (me.element.readyState) {
-        case 0:
-          msg += 'HAVE_NOTHING';
-          break;
-        case 1:
-          msg += 'HAVE_METADATA';
-          break;
-        case 2:
-          msg += 'HAVE_CURRENT_DATA';
-          break;
-        case 3:
-          msg += 'HAVE_FUTURE_DATA';
-          break;
-        case 4:
-          msg += 'HAVE_ENOUGH_DATA';
-          break;
-      }
-      msg += ' networkState: ';
-      switch (me.element.networkState) {
-        case 0:
-          msg += 'NETWORK_EMPTY';
-          break;
-        case 1:
-          msg += 'NETWORK_IDLE';
-          break;
-        case 2:
-          msg += 'NETWORK_LOADING';
-          break;
-        case 3:
-          msg += 'NETWORK_NO_SOURCE';
-          break;
+    if (options.poster) { vjsopts.poster = options.poster; }
+    if (options.controls) {
+      if ((options.controls == 'stock') || (!me.buildMistControls())) {
+        //MistControls have failed to build in the if condition
+        ele.setAttribute('controls',true);
       }
     }
-    //prevent onerror loops
-    if (e.target == me.element) {
-      e.message = msg;
-    }
-    else {
-      me.adderror(msg);
-    }
-  });
-  var events = ['abort','canplay','canplaythrough','durationchange','emptied','ended','interruptbegin','interruptend','loadeddata','loadedmetadata','loadstart','pause','play','playing','ratechange','seeked','seeking','stalled','volumechange','waiting','progress'];
-  for (var i in events) {
-    ele.addEventListener(events[i],function(e){
-      me.addlog('Player event fired: '+e.type);
+    
+    
+    me.onready(function(){
+      me.videojs = videojs(ele,vjsopts,function(){
+        me.addlog('Videojs initialized');
+      });
     });
+    
+    me.addlog('Built html');
+    
+    //forward events
+    ele.addEventListener('error',function(e){
+      var msg;
+      if ('message' in e) {
+        msg = e.message;
+      }
+      else {
+        msg = 'readyState: ';
+        switch (me.element.readyState) {
+          case 0:
+            msg += 'HAVE_NOTHING';
+            break;
+          case 1:
+            msg += 'HAVE_METADATA';
+            break;
+          case 2:
+            msg += 'HAVE_CURRENT_DATA';
+            break;
+          case 3:
+            msg += 'HAVE_FUTURE_DATA';
+            break;
+          case 4:
+            msg += 'HAVE_ENOUGH_DATA';
+            break;
+        }
+        msg += ' networkState: ';
+        switch (me.element.networkState) {
+          case 0:
+            msg += 'NETWORK_EMPTY';
+            break;
+          case 1:
+            msg += 'NETWORK_IDLE';
+            break;
+          case 2:
+            msg += 'NETWORK_LOADING';
+            break;
+          case 3:
+            msg += 'NETWORK_NO_SOURCE';
+            break;
+        }
+      }
+      //prevent onerror loops
+      if (e.target == me.element) {
+        e.message = msg;
+      }
+      else {
+        me.adderror(msg);
+      }
+      
+    });
+    var events = ['abort','canplay','canplaythrough','durationchange','emptied','ended','interruptbegin','interruptend','loadeddata','loadedmetadata','loadstart','pause','play','playing','ratechange','seeked','seeking','stalled','volumechange','waiting','progress'];
+    for (var i in events) {
+      ele.addEventListener(events[i],function(e){
+        me.addlog('Player event fired: '+e.type);
+      });
+    }
+    
+    callback(cont);
   }
   
-  return cont;
+  if ('videojs' in window) {
+    onplayerload();
+  }
+  else {
+    //load the videojs player
+    var scripttag = document.createElement('script');
+    scripttag.src = options.host+'/videojs.js';
+    me.addlog('Retrieving videojs player code from '+scripttag.src);
+    document.head.appendChild(scripttag);
+    scripttag.onerror = function(){
+      me.askNextCombo('Failed to load videojs.js');
+    }
+    scripttag.onload = function(){
+      onplayerload();
+    }
+  }
 }
 p.prototype.play = function(){ return this.element.play(); };
 p.prototype.pause = function(){ return this.element.pause(); };
@@ -177,13 +207,16 @@ if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.m
   };
 }
 p.prototype.updateSrc = function(src){
-  if (src == '') {
-    this.videojs.dispose();
-    return;
+  if (videojs in this) {
+    if (src == '') {
+      this.videojs.dispose();
+      return;
+    }
+    this.videojs.src({
+      src: src,
+      type: this.source.type
+    });
+    return true;
   }
-  this.videojs.src({
-    src: src,
-    type: this.source.type
-  });
-  return true;
+  return false;
 };