<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>