Embed: VideoJS player added

CMakeLists.txt

@@ -361,10 +361,12 @@ add_custom_target(embedcode
   COMMAND ./sourcery ${SOURCE_DIR}/embed/wrappers/jwplayer.js jwplayer_js ${BINARY_DIR}/jwplayer.js.h
   COMMAND ./sourcery ${SOURCE_DIR}/embed/wrappers/polytrope.js polytrope_js ${BINARY_DIR}/polytrope.js.h
   COMMAND ./sourcery ${SOURCE_DIR}/embed/wrappers/dashjs.js dash_js ${BINARY_DIR}/dashjs.js.h
+  COMMAND ./sourcery ${SOURCE_DIR}/embed/wrappers/videojs.js video_js ${BINARY_DIR}/videojs.js.h
   COMMAND ./sourcery ${SOURCE_DIR}/embed/players/dash.js playerdash_js ${BINARY_DIR}/playerdash.js.h
+  COMMAND ./sourcery ${SOURCE_DIR}/embed/players/videojs.js playervideo_js ${BINARY_DIR}/playervideo.js.h
   COMMAND ./sourcery ${SOURCE_DIR}/embed/core.js core_js ${BINARY_DIR}/core.js.h
   COMMAND ./sourcery ${SOURCE_DIR}/embed/mist.css mist_css ${BINARY_DIR}/mist.css.h
-  DEPENDS sourcery ${SOURCE_DIR}/src/embed.js ${SOURCE_DIR}/embed/wrappers/html5.js ${SOURCE_DIR}/embed/wrappers/flash_strobe.js ${SOURCE_DIR}/embed/wrappers/silverlight.js ${SOURCE_DIR}/embed/wrappers/theoplayer.js ${SOURCE_DIR}/embed/wrappers/jwplayer.js ${SOURCE_DIR}/embed/wrappers/polytrope.js ${SOURCE_DIR}/embed/wrappers/dashjs.js ${SOURCE_DIR}/embed/players/dash.js ${SOURCE_DIR}/embed/core.js ${SOURCE_DIR}/embed/mist.css
+  DEPENDS sourcery ${SOURCE_DIR}/src/embed.js ${SOURCE_DIR}/embed/wrappers/html5.js ${SOURCE_DIR}/embed/wrappers/flash_strobe.js ${SOURCE_DIR}/embed/wrappers/silverlight.js ${SOURCE_DIR}/embed/wrappers/theoplayer.js ${SOURCE_DIR}/embed/wrappers/jwplayer.js ${SOURCE_DIR}/embed/wrappers/polytrope.js ${SOURCE_DIR}/embed/wrappers/dashjs.js ${SOURCE_DIR}/embed/wrappers/videojs.js ${SOURCE_DIR}/embed/players/dash.js ${SOURCE_DIR}/embed/players/videojs.js ${SOURCE_DIR}/embed/core.js ${SOURCE_DIR}/embed/mist.css
   VERBATIM
 )
 

embed/core.js

@@ -46,12 +46,74 @@ MistPlayer.prototype.element = function(tag){
   this.element = ele;
   return ele;
 };
+MistPlayer.prototype.onreadylist = [];
+MistPlayer.prototype.onready = function(dothis){
+  this.onreadylist.push(dothis);
+};
 MistPlayer.prototype.play = false;
 MistPlayer.prototype.pause = false;
 MistPlayer.prototype.volume = false;
 MistPlayer.prototype.loop = false;
 MistPlayer.prototype.fullscreen = false;
-MistPlayer.prototype.setTracks = false;
+MistPlayer.prototype.setTracks = function(usetracks){
+  if (usetracks == false) {
+    if (!('updateSrc' in this)) { return false; }
+    return true;
+  }
+  
+  function urlAddParam(url,params) {
+    var spliturl = url.split('?');
+    var ret = [spliturl.shift()];
+    var splitparams = [];
+    if (spliturl.length) {
+      splitparams = spliturl[0].split('&');
+    }
+    for (var i in params) {
+      splitparams.push(i+'='+params[i]);
+    }
+    if (splitparams.length) { ret.push(splitparams.join('&')); }
+    return ret.join('?');
+  }
+  
+  if ('subtitle' in usetracks) {
+    //remove previous subtitles
+    var ts = this.element.getElementsByTagName('track');
+    for (var i = ts.length - 1; i >= 0; i--) {
+      this.element.removeChild(ts[i]);
+    }
+    var tracks = this.tracks.subtitle;
+    for (var i in tracks) {
+      if (tracks[i].trackid == usetracks.subtitle) {
+        var t = document.createElement('track');
+        this.element.appendChild(t);
+        t.kind = 'subtitles';
+        t.label = tracks[i].desc;
+        t.srclang = tracks[i].lang;
+        t.src = this.subtitle+'?track='+tracks[i].trackid;
+        t.setAttribute('default','');
+        break;
+      }
+    }
+    delete usetracks.subtitle;
+    if (Object.keys(usetracks).length == 0) { return true; }
+  }
+  
+  var time = this.element.currentTime;
+  this.updateSrc(urlAddParam(this.options.src,usetracks));
+  if (this.element.readyState) {
+    this.element.load();
+  }
+  
+  this.element.currentTime = time;
+  
+  if ('trackselects' in this) {
+    for (var i in usetracks) {
+      if (i in this.trackselects) { this.trackselects[i].value = usetracks[i]; }
+    }
+  }
+  
+  return true;
+};
 MistPlayer.prototype.resize = false;
 MistPlayer.prototype.buildMistControls = function(){
   if (!('flex' in document.head.style) || (['iPad','iPod','iPhone'].indexOf(navigator.platform) != -1)) {
@@ -136,14 +198,20 @@ MistPlayer.prototype.buildMistControls = function(){
   var progressCont = document.createElement('div');
   controls.appendChild(progressCont);
   progressCont.className = 'progress_container';
+  ele.startTime = 0;
   if (!options.live) {
     var progress = document.createElement('div');
     progressCont.appendChild(progress);
     progress.className = 'button progress';
     progress.getPos = function(e){
       if (!isFinite(ele.duration)) { return 0; }
-      var style = e.target.currentStyle || window.getComputedStyle(e.target, null);
-      return Math.max(0,e.clientX - progress.getBoundingClientRect().left - parseInt(style.borderLeftWidth,10)) / progress.offsetWidth * ele.duration;
+      var style = progress.currentStyle || window.getComputedStyle(progress, null);
+      var zoom = Number(controls.style.zoom == '' ? 1 : controls.style.zoom);
+      
+      var pos0 = progress.getBoundingClientRect().left - parseInt(style.borderLeftWidth,10);
+      var perc = (e.clientX - pos0 * zoom) / progress.offsetWidth / zoom;
+      var secs = Math.max(0,perc) * ele.duration;
+      return secs;
     }
     progress.onmousemove = function(e) {
       if (ele.duration) {
@@ -260,7 +328,7 @@ MistPlayer.prototype.buildMistControls = function(){
   buttons.className = 'column';
   controls.appendChild(buttons);
   
-  if ((this.setTracks) && ((this.tracks.audio.length) || (this.tracks.video.length) || (this.tracks.subtitle.length)) && (this.source.type != 'application/vnd.apple.mpegurl')) {
+  if ((this.setTracks(false)) && ((this.tracks.audio.length) || (this.tracks.video.length) || (this.tracks.subtitle.length)) && ((this.options.source.type != 'html5/application/vnd.apple.mpegurl') && (this.options.source.type != 'html5/video/ogg'))) {
     
     /*
       - the player supports setting tracks;
@@ -596,10 +664,15 @@ function mistPlay(streamName,options) {
       forceSupportCheck = true;
     }
     var forcePlayer = false;
-    if (('forcePlayer' in options) && (options.forcePlayer) && (options.forcePlayer in mistplayers)) {
+    if (('forcePlayer' in options) && (options.forcePlayer)) {
+      if (options.forcePlayer in mistplayers) {
         embedLog('Forcing '+mistplayers[options.forcePlayer].name);
         forcePlayer = options.forcePlayer;
       }
+      else {
+        embedLog('The forced player ('+options.forcePlayer+') isn\'t known, ignoring. Possible values are: '+Object.keys(mistplayers).join(', '));
+      }
+    }
     
     embedLog('Checking available players..');
     
@@ -741,7 +814,7 @@ function mistPlay(streamName,options) {
         playerOptions: playerOpts
       });
       
-      if (player.setTracks) {
+      if (player.setTracks(false)) {
         //gather track info
         //tracks
         var tracks = {
@@ -803,9 +876,11 @@ function mistPlay(streamName,options) {
       element.setAttribute('data-player',mistPlayer);
       element.setAttribute('data-mime',source.type);
       
-      if (player.setTracks) {
-        player.setTracks(usetracks);
+      if (player.setTracks(false)) {
+        player.onready(function(){
+          //player.setTracks(usetracks);
           if ('setTracks' in options) { player.setTracks(options.setTracks); }
+        });
       }
       
       if (player.resize) {
@@ -815,6 +890,10 @@ function mistPlay(streamName,options) {
         });
       }
       
+      for (var i in player.onreadylist) {
+        player.onreadylist[i]();
+      }
+      
       protoplay.sendEvent('initialized','',options.target);
       
     }

embed/test.html

@@ -15,8 +15,9 @@
     <script>
       // global options can be set here
       var mistoptions = {
-        host: 'http://cat.mistserver.org:8080'
+        //host: 'http://cat.mistserver.org:8080'
         //host: 'https://cat.mistserver.org:4433'
+        host: 'http://localhost:8080'
       };
     </script>
     
@@ -25,11 +26,13 @@
     <!--<script src=wrappers/jwplayer.js></script>-->
     <script src=wrappers/html5.js></script>
     <script src=wrappers/dashjs.js></script>
+    <script src=wrappers/videojs.js></script>
     <script src=wrappers/flash_strobe.js></script>
     <script src=wrappers/silverlight.js></script>
     <script src=wrappers/polytrope.js></script>
     
     <script src=players/dash.js></script>
+    <script src=players/videojs.js></script>
 
     <link rel=stylesheet href=mist.css id=mist_player_css>
     <style>
@@ -53,41 +56,55 @@
     
     
       function mistinit(){
+        var logele = document.querySelector('.log');
+        var contele = document.querySelector('.cont');
         document.addEventListener('error',function(e){
           console.log('[Error] '+e.message,e.target);
+          var msg = document.createTextNode('['+(new Date()).toTimeString().split(' ')[0]+'] '+e.message+' from '+e.target.outerHTML.slice(0,e.target.outerHTML.indexOf('>')+1));
+          var div = document.createElement('div');
+          div.appendChild(msg);
+          div.style.color = 'red';
+          logele.appendChild(div);
         },true);
         document.addEventListener('log',function(e){
           console.log('[log] '+e.message)
           var msg = document.createTextNode('['+(new Date()).toTimeString().split(' ')[0]+'] '+e.message);
           var div = document.createElement('div');
           div.appendChild(msg);
-          document.body.appendChild(div);
+          logele.appendChild(div);
         },true);
         
         //tryplayers = Object.keys(mistplayers);
         tryplayers = [];
         //tryplayers.push('html5');
-        tryplayers.push('dashjs');
+        //tryplayers.push('dashjs');
+        tryplayers.push('videojs');
         //tryplayers.push('flash_strobe');
         //tryplayers.push('silverlight');
         streams = [];
         //streams.push('live');
+        //streams.push('subtel');
+        streams.push('ogg');
         //streams.push('vids+mist.mp4');
         //streams.push('lama');
-        streams.push('bunny');
+        //streams.push('bunny');
         
         for (var j in streams) {
           for (var i in tryplayers) {
             var c = document.createElement('div');
             c.className = 'mistvideo';
             c.title = tryplayers[i];
-            document.body.appendChild(c);
+            contele.appendChild(c);
             mistPlay(streams[j],{
               target: c,
+              maxwidth: 800,
               forcePlayer: tryplayers[i],
-              //forceType: 'flash/7',
+              //forceType: 'html5/video/mp4',
+              //forceType: 'html5/application/vnd.apple.mpegurl',
+              //forceType: 'dash/video/mp4',
               //forceSource: 5,
-              loop: true
+              loop: true,
+              //controls: 'stock'
             });
           }
         }
@@ -154,6 +171,7 @@
         })();
       </script>
     </div>-->
-    
+    <div class=cont></div>
+    <div class=log></div>
   </body>
 </html>

embed/wrappers/dashjs.js

@@ -43,20 +43,46 @@ p.prototype.build = function (options,callback) {
   }
   
   ele.addEventListener('error',function(e){
-    var n = {
-      0: 'NETWORK_EMPTY',
-      1: 'NETWORK_IDLE',
-      2: 'NETWORK_LOADING',
-      3: 'NETWORK_NO_SOURCE'
+    var msg;
+    if ('message' in e) {
+      msg = e.message;
     }
-    var r = {
-      0: 'HAVE_NOTHING',
-      1: 'HAVE_METADATA',
-      2: 'HAVE_CURRENT_DATA',
-      3: 'HAVE_FUTURE_DATA',
-      4: 'HAVE_ENOUGH_DATA'
-    };
-    me.adderror("Player event fired: error\nnetworkState: "+n[this.networkState]+"\nreadyState: "+r[this.readyState]);
+    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;
+      }
+    }
+    me.adderror(msg);
   },true);
     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) {

embed/wrappers/html5.js

@@ -24,7 +24,7 @@ mistplayers.html5 = {
 };
 var p = mistplayers.html5.player;
 p.prototype = new MistPlayer();
-p.prototype.build = function (options,callback) {
+p.prototype.build = function (options) {
   var cont = document.createElement('div');
   cont.className = 'mistplayer';
   var me = this; //to allow nested functions to access the player class itself
@@ -35,7 +35,7 @@ p.prototype.build = function (options,callback) {
   var ele = this.element((shortmime[0] == 'audio' ? 'audio' : 'video'));
   ele.className = '';
   cont.appendChild(ele);
-  ele.crossOrigin = 'anonymous';
+  //ele.crossOrigin = 'anonymous';
   if (shortmime[0] == 'audio') {
     this.setTracks = false;
     this.fullscreen = false;
@@ -66,7 +66,6 @@ p.prototype.build = function (options,callback) {
   ele.height = options.height;
   ele.style.width = options.width+'px';
   ele.style.height = options.height+'px';
-  ele.startTime = 0;
   
   if (options.autoplay) {
     ele.setAttribute('autoplay','');
@@ -220,60 +219,10 @@ if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.m
     }
   };
 }
-p.prototype.setTracks = function(usetracks){
-  function urlAddParam(url,params) {
-    var spliturl = url.split('?');
-    var ret = [spliturl.shift()];
-    var splitparams = [];
-    if (spliturl.length) {
-      splitparams = spliturl[0].split('&');
-    }
-    for (var i in params) {
-      splitparams.push(i+'='+params[i]);
-    }
-    if (splitparams.length) { ret.push(splitparams.join('&')); }
-    return ret.join('?');
-  }
-  
-  if ('subtitle' in usetracks) {
-    //remove previous subtitles
-    var ts = this.element.getElementsByTagName('track');
-    for (var i = ts.length - 1; i >= 0; i--) {
-      this.element.removeChild(ts[i]);
-    }
-    var tracks = this.tracks.subtitle;
-    for (var i in tracks) {
-      if (tracks[i].trackid == usetracks.subtitle) {
-        var t = document.createElement('track');
-        this.element.appendChild(t);
-        t.kind = 'subtitles';
-        t.label = tracks[i].desc;
-        t.srclang = tracks[i].lang;
-        t.src = this.subtitle+'?track='+tracks[i].trackid;
-        t.setAttribute('default','');
-        break;
-      }
-    }
-    delete usetracks.subtitle;
-    if (Object.keys(usetracks).length == 0) { return true; }
-  }
-  
-  var time = this.element.currentTime;
-  this.source.setAttribute('src',urlAddParam(this.options.src,usetracks));
-  if (this.element.readyState) {
-    this.element.load();
-  }
-  
-  this.element.currentTime = time;
-  
-  if ('trackselects' in this) {
-    for (var i in usetracks) {
-      if (i in this.trackselects) { this.trackselects[i].value = usetracks[i]; }
-    }
-  }
-  
+p.prototype.updateSrc = function(src){
+  this.source.setAttribute('src',src);
   return true;
-}
+};
 p.prototype.resize = function(size){
   this.element.width = size.width;
   this.element.height = size.height;

embed/wrappers/videojs.js

@@ -0,0 +1,156 @@
+mistplayers.videojs = {
+  name: 'VideoJS player',
+  mimes: ['html5/video/mp4','html5/application/vnd.apple.mpegurl','html5/video/ogg','html5/video/webm'],
+  priority: Object.keys(mistplayers).length + 1,
+  isMimeSupported: function (mimetype) {
+    return (this.mimes.indexOf(mimetype) == -1 ? false : true);
+  },
+  isBrowserSupported: function (mimetype,source,options) {
+    if ((options.host.substr(0,7) == 'http://') && (source.url.substr(0,8) == 'https://')) { return false; }
+    var support = true;
+    if ((location.protocol == 'file:') && (mimetype == 'html5/application/vnd.apple.mpegurl')) { return false; }
+    return ('MediaSource' in window);
+  },
+  player: function(){},
+};
+var p = mistplayers.videojs.player;
+p.prototype = new MistPlayer();
+p.prototype.build = function (options) {
+  var cont = document.createElement('div');
+  cont.className = 'mistplayer';
+  var me = this; //to allow nested functions to access the player class itself
+  
+  this.addlog('Building VideoJS player..');
+  
+  var ele = this.element('video');
+  cont.appendChild(ele);
+  ele.className = '';
+  
+  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);
+    }
+  }
+  
+  
+  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;
+      }
+    }
+    me.adderror(msg);
+  },true);
+  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);
+    },true);
+  }
+  
+  return cont;
+}
+p.prototype.play = function(){ return this.element.play(); };
+p.prototype.pause = function(){ return this.element.pause(); };
+p.prototype.volume = function(level){
+  if (typeof level == 'undefined' ) { return this.element.volume; }
+  return this.element.volume = level;
+};
+p.prototype.loop = function(bool){ 
+  if (typeof bool == 'undefined') {
+    return this.element.loop;
+  }
+  return this.element.loop = bool;
+};
+p.prototype.load = function(){ return this.element.load(); };
+if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
+  p.prototype.fullscreen = function(){
+    if(this.element.requestFullscreen) {
+      return this.element.requestFullscreen();
+    } else if(this.element.mozRequestFullScreen) {
+      return this.element.mozRequestFullScreen();
+    } else if(this.element.webkitRequestFullscreen) {
+      return this.element.webkitRequestFullscreen();
+    } else if(this.element.msRequestFullscreen) {
+      return this.element.msRequestFullscreen();
+    }
+  };
+}
+p.prototype.updateSrc = function(src){
+  this.videojs.src({
+    src: src,
+    type: this.source.type
+  });
+  return true;
+};

src/output/output_http_internal.cpp

@@ -79,6 +79,7 @@ namespace Mist {
     /*capa["optional"]["wrappers"]["allowed"].append("theoplayer");
     capa["optional"]["wrappers"]["allowed"].append("jwplayer");*/
     capa["optional"]["wrappers"]["allowed"].append("html5");
+    capa["optional"]["wrappers"]["allowed"].append("videojs");
     capa["optional"]["wrappers"]["allowed"].append("dashjs");
     //capa["optional"]["wrappers"]["allowed"].append("polytrope"); //currently borked
     capa["optional"]["wrappers"]["allowed"].append("flash_strobe");
@@ -577,6 +578,13 @@ namespace Mist {
           response.append((char*)dash_js, (size_t)dash_js_len);
           used = true;
         }
+        if (it->asStringRef() == "videojs"){
+          #include "playervideo.js.h"
+          response.append((char*)playervideo_js, (size_t)playervideo_js_len);
+          #include "videojs.js.h"
+          response.append((char*)video_js, (size_t)video_js_len);
+          used = true;
+        }
         if (!used) {
           WARN_MSG("Unknown player type: %s",it->asStringRef().c_str());
         }