LSP restructure (v3)

2015-02-12 16:59:16 +01:00 · 2015-02-12 16:59:16 +01:00 · ed9c917bf2
commit ed9c917bf2
parent 8e6da507bc
18 changed files with 4898 additions and 4842 deletions
--- a/lsp/test_embedmultitrack.html
+++ b/lsp/test_embedmultitrack.html
@ -0,0 +1,139 @@
+<html>
+  <head>
+    <title></title>
+    <meta content="">
+    <style>
+      #vidcontainer {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-around;
+      }
+      #vidcontainer .track {
+        overflow: hidden;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+      }
+      #vidcontainer .track .trackname {
+        flex-shrink: 0;
+        display: none; /* comment this to show trackname */
+      }
+    </style>
+  </head>
+  <body>
+    <div id=vidcontainer>
+    </div>
+    <script>
+      var vidname = 'multibitrate';             // change this to the appropriate stream name
+      var embedbase = 'http://localhost:8080/';  //change this to the appropriate host (with http port)
+      
+      //load the info script
+      var script = document.createElement('script');
+      script.src = embedbase+'info_'+vidname+'.js';
+      script.onerror = function(){
+        document.getElementById('vidcontainer').innerHTML = 'Error loading "'+script.src+'".';
+      };
+      script.onload = function(){
+        multitrack(vidname);
+      }
+      document.getElementById('vidcontainer').appendChild(script);
+      
+      function multitrack(vidname) {
+        if (typeof mistvideo[vidname] != 'undefined') {
+          var vid = mistvideo[vidname];
+          
+          var audio = false;
+          vid.elements = [];
+          if (typeof vid.meta.tracks != 'undefined') {
+            var cont = document.getElementById('vidcontainer');
+            var n = 0;
+            var width = cont.offsetWidth * .49;
+            for (var i in vid.meta.tracks) {
+              var track = vid.meta.tracks[i];
+              n++;
+              
+              if (track.type != 'video') {
+                continue;
+              }
+              
+              var child = document.createElement('div');
+              child.className = 'track';
+              child.innerHTML = '<span class=trackname>'+i+'</span>';
+              
+              var sources = [];
+              var rtmp = '';
+              for (var j in vid.source) {
+                if (vid.source[j].type == 'flash/10') {
+                  rtmp = vid.source[j].url+'?video='+n+'&audio='+(audio ? '0' : '-1');
+                }
+                else {
+                  sources.push('<source src="'+vid.source[j].url+'?video='+n+'&audio='+(audio ? '0' : '-1')+'">');
+                }
+              }
+              
+              //check html mp4 support
+              var support = false;
+              /*try {
+                var v = document.createElement('video');
+                if( v && v.canPlayType('video/mp4') != "" ){
+                  support = true;
+                }
+              } catch(e){}*/
+              
+              var height = width / track.width * track.height;
+              if (support) {
+                //HTML5 MP4 embed
+                var video = document.createElement('video');
+                video.setAttribute('style','width:'+width+'px; height:'+height+'px;');
+                if (!audio) { 
+                  video.setAttribute('controls','');
+                  video.addEventListener('play',function(){
+                    for (var i in vid.elements) {
+                      if (vid.elements[i].paused) {
+                        vid.elements[i].play();
+                      }
+                    }
+                  });
+                  video.addEventListener('pause',function(){
+                    for (var i in vid.elements) {
+                      if (!vid.elements[i].paused) {
+                        vid.elements[i].pause();
+                      }
+                    }
+                  });
+                  audio = true;
+                }
+                else {
+                  //just in case..
+                  video.volume = 0;
+                }
+                video.innerHTML = sources.join('');
+              }
+              else {
+                //go for RTMP (Flash/10) instead
+                var video = document.createElement('object');
+                video.setAttribute('width',width);
+                video.setAttribute('height',height);
+                var url = encodeURIComponent(rtmp)+'&controlBarMode=floating&initialBufferTime=0.5&expandedBufferTime=5&autoPlay=true&minContinuousPlaybackTime=3' + (vid.type == 'live' ? "&streamType=live" : "");
+                var params = [];
+                params.push('<param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf"></param>');
+                params.push('<param name="flashvars" value="src='+url+'"></param>');
+                params.push('<param name="allowFullScreen" value="true"></param>');
+                params.push('<param name="allowscriptaccess" value="always"></param>');
+                params.push('<param name="wmode" value="direct"></param>');
+                params.push('<param name="autoPlay" value="true">');
+                params.push('<embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="'+width+'" height="'+height+'" flashvars="src='+url+'"></embed>');
+                video.innerHTML = params.join('');
+              }
+              
+              
+              child.appendChild(video);
+              vid.elements.push(video);
+              cont.appendChild(child);
+            }
+          }
+        }
+      };
+    </script>
+  </body>
+</html>