139 lines
No EOL
5.3 KiB
HTML
139 lines
No EOL
5.3 KiB
HTML
<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> |