embed: partial rewrite

This commit is contained in:
Cat 2017-02-10 12:30:12 +01:00 committed by Thulinma
parent f5da3614fe
commit dc6d0643bb
2 changed files with 160 additions and 155 deletions

View file

@ -213,6 +213,9 @@ MistPlayer.prototype.buildMistControls = function(){
play.setAttribute('data-state','paused'); play.setAttribute('data-state','paused');
play.onclick = function(){ play.onclick = function(){
if (ele.paused) { if (ele.paused) {
if (options.live) {
me.load();
}
me.play(); me.play();
} }
else { else {
@ -300,7 +303,7 @@ MistPlayer.prototype.buildMistControls = function(){
var perc = (ypos - pos0 * zoom) / sound.offsetHeight / zoom; var perc = (ypos - pos0 * zoom) / sound.offsetHeight / zoom;
perc = 1 - Math.min(1,Math.max(0,perc)); //linear range between 0 and 1 perc = 1 - Math.min(1,Math.max(0,perc)); //linear range between 0 and 1
perc = -1 * Math.pow((1-perc),2) + 1; //transform to quadratic range between 0 and 1 perc = 1 - Math.pow((1-perc),1/2); //transform to quadratic range between 0 and 1
return perc; return perc;
} }
@ -515,9 +518,8 @@ MistPlayer.prototype.buildMistControls = function(){
play.setAttribute('data-state','paused'); play.setAttribute('data-state','paused');
}); });
ele.addEventListener('volumechange',function(){ ele.addEventListener('volumechange',function(){
//-1 * Math.pow((1-sound.getPos(e.clientY)),2) + 1; //transform to quadratic range between 0 and 1 var vol = 1 - Math.pow(1-ele.volume,2); //transform back from quadratic
var vol = 1 - Math.pow(1-ele.volume,0.5); volume.style.height = vol*100+'%';
volume.style.height = vol*100+'%'; //transform back from quadratic
if (ele.volume == 0) { if (ele.volume == 0) {
speaker.setAttribute('data-muted',''); speaker.setAttribute('data-muted','');
} }
@ -610,10 +612,22 @@ MistPlayer.prototype.askNextCombo = function(msg){
me.errorstate = true; me.errorstate = true;
me.addlog('Showing error window'); me.addlog('Showing error window');
//show the error
var err = document.createElement('div'); var err = document.createElement('div');
var msgnode = document.createTextNode(msg ? msg : 'Player or stream error detected'); var msgnode = document.createTextNode(msg ? msg : 'Player or stream error detected');
err.appendChild(msgnode); err.appendChild(msgnode);
err.className = 'error'; err.className = 'error';
err.style.position = 'absolute';
err.style.top = 0;
err.style.width = '100%';
err.style['margin-left'] = 0;
this.target.appendChild(err);
this.element.style.opacity = '0.2';
//if there is a next source/player, show a button to activate it
var opts = this.mistplaySettings.options;
opts.startCombo = this.mistplaySettings.startCombo;
if (mistCheck(mistvideo[this.mistplaySettings.streamname],opts)) {
var button = document.createElement('button'); var button = document.createElement('button');
var t = document.createTextNode('Try next source/player'); var t = document.createTextNode('Try next source/player');
button.appendChild(t); button.appendChild(t);
@ -621,6 +635,9 @@ MistPlayer.prototype.askNextCombo = function(msg){
button.onclick = function(){ button.onclick = function(){
me.nextCombo(); me.nextCombo();
} }
}
//show a button to reload with the current settings
var button = document.createElement('button'); var button = document.createElement('button');
var i = document.createElement('div'); //a css countdown clock for 10sec var i = document.createElement('div'); //a css countdown clock for 10sec
i.className = 'countdown10'; i.className = 'countdown10';
@ -631,13 +648,6 @@ MistPlayer.prototype.askNextCombo = function(msg){
button.onclick = function(){ button.onclick = function(){
me.reload(); me.reload();
} }
err.style.position = 'absolute';
err.style.top = 0;
err.style.width = '100%';
err.style['margin-left'] = 0;
this.target.appendChild(err);
this.element.style.opacity = '0.2';
//after 10 seconds, reload the player //after 10 seconds, reload the player
err.timeOut = setTimeout(function(){ err.timeOut = setTimeout(function(){
@ -721,6 +731,90 @@ MistPlayer.prototype.unload = function(){
this.target.innerHTML = ''; this.target.innerHTML = '';
}; };
function mistCheck(streaminfo,options,embedLog) {
if (typeof embedLog != 'function') { embedLog = function(){}; }
embedLog('Checking available players..');
var source = false;
var mistPlayer = false;
if (options.startCombo) {
options.startCombo.started = {
player: false,
source: false
};
}
function checkPlayer(p_shortname) {
if ((options.startCombo) && (!options.startCombo.started.player)) {
if (p_shortname != options.startCombo.player) { return false; }
else {
options.startCombo.started.player = true;
}
}
embedLog('Checking '+mistplayers[p_shortname].name+' (priority: '+mistplayers[p_shortname].priority+') ..');
//loop over the available sources and check if this player can play it
var loop;
if (options.forceSource) {
loop = [streaminfo.source[options.forceSource]];
}
else {
loop = streaminfo.source;
}
for (var s in loop) {
if ((options.startCombo) && (!options.startCombo.started.source)) {
if (s == options.startCombo.source) {
options.startCombo.started.source = true;
}
continue;
}
if ((options.forceType) && (loop[s].type != options.forceType)) {
continue;
}
if (mistplayers[p_shortname].isMimeSupported(loop[s].type)) {
//this player supports this mime
if (mistplayers[p_shortname].isBrowserSupported(loop[s].type,loop[s],options,streaminfo,embedLog)) {
//this browser is supported
embedLog('Found a working combo: '+mistplayers[p_shortname].name+' with '+loop[s].type+' @ '+loop[s].url);
mistPlayer = p_shortname;
source = loop[s];
source.index = s;
return p_shortname;
}
else {
embedLog('This browser does not support '+loop[s].type);
}
}
}
return false;
}
if (options.forcePlayer) {
checkPlayer(options.forcePlayer);
}
else {
//sort the players
var sorted = Object.keys(mistplayers);
sorted.sort(function(a,b){
return mistplayers[a].priority - mistplayers[b].priority;
});
for (var n in sorted) {
var p_shortname = sorted[n];
if (checkPlayer(p_shortname)) { break; }
}
}
return ((source && mistPlayer) ? {
source: source,
mistPlayer: mistPlayer
} : false);
}
///////////////////////////////////////////////// /////////////////////////////////////////////////
// SELECT AND ADD A VIDEO PLAYER TO THE TARGET // // SELECT AND ADD A VIDEO PLAYER TO THE TARGET //
///////////////////////////////////////////////// /////////////////////////////////////////////////
@ -729,12 +823,12 @@ function mistPlay(streamName,options) {
var protoplay = new MistPlayer(); var protoplay = new MistPlayer();
protoplay.streamname = streamName; protoplay.streamname = streamName;
function embedLog(msg) { var embedLog = function(msg) {
protoplay.sendEvent('log',msg,options.target); protoplay.sendEvent('log',msg,options.target);
} };
function mistError(msg) { function mistError(msg) {
var info = {}; var info = {};
if ((typeof mistvideo != 'undefined') && ('streamName' in mistvideo)) { info = mistvideo[streamName]; } if ((typeof mistvideo != 'undefined') && (streamName in mistvideo)) { info = mistvideo[streamName]; }
var displaymsg = msg; var displaymsg = msg;
if ('on_error' in info) { displaymsg = info.on_error; } if ('on_error' in info) { displaymsg = info.on_error; }
@ -768,7 +862,11 @@ function mistPlay(streamName,options) {
loop: false, //don't loop when the stream has finished loop: false, //don't loop when the stream has finished
poster: null, //don't show an image before the stream has started poster: null, //don't show an image before the stream has started
callback: false, //don't call a function when the player has finished building callback: false, //don't call a function when the player has finished building
streaminfo: false //don't use this streaminfo but collect it from the mistserverhost streaminfo: false, //don't use this streaminfo but collect it from the mistserverhost
startCombo: false,
forceType: false,
forcePlayer: false,
forceSource: false
}; };
for (var i in global) { for (var i in global) {
options[i] = global[i]; options[i] = global[i];
@ -799,7 +897,6 @@ function mistPlay(streamName,options) {
} }
} }
function onstreaminfo() { function onstreaminfo() {
options.target.innerHTML = ''; options.target.innerHTML = '';
options.target.removeAttribute('data-loading'); options.target.removeAttribute('data-loading');
@ -819,139 +916,34 @@ function mistPlay(streamName,options) {
return; return;
} }
//sort the sources by priority and mime, but prefer HTTPS
streaminfo.source.sort(function(a,b){
return (b.priority - a.priority) || a.type.localeCompare(b.type) || b.url.localeCompare(a.url);
});
var mistPlayer = false;
var source;
var forceType = false;
if (('forceType' in options) && (options.forceType)) { if (('forceType' in options) && (options.forceType)) {
embedLog('Forcing '+options.forceType); embedLog('Forcing '+options.forceType);
forceType = options.forceType;
} }
var forceSource = false;
if (('forceSource' in options) && (options.forceSource)) { if (('forceSource' in options) && (options.forceSource)) {
forceSource = options.forceSource; options.forceType = streaminfo.source[options.forceSource].type;
forceType = streaminfo.source[forceSource].type; embedLog('Forcing source '+options.forceSource+': '+options.forceType+' @ '+streaminfo.source[options.forceSource].url);
embedLog('Forcing source '+options.forceSource+': '+forceType+' @ '+streaminfo.source[forceSource].url);
} }
var forceSupportCheck = false;
if (('forceSupportCheck' in options) && (options.forceSupportCheck)) {
embedLog('Forcing a full support check');
forceSupportCheck = true;
}
var forcePlayer = false;
if (('forcePlayer' in options) && (options.forcePlayer)) { if (('forcePlayer' in options) && (options.forcePlayer)) {
if (options.forcePlayer in mistplayers) { if (options.forcePlayer in mistplayers) {
embedLog('Forcing '+mistplayers[options.forcePlayer].name); embedLog('Forcing '+mistplayers[options.forcePlayer].name);
forcePlayer = options.forcePlayer;
} }
else { else {
embedLog('The forced player ('+options.forcePlayer+') isn\'t known, ignoring. Possible values are: '+Object.keys(mistplayers).join(', ')); embedLog('The forced player ('+options.forcePlayer+') isn\'t known, ignoring. Possible values are: '+Object.keys(mistplayers).join(', '));
options.forcePlayer = false;
} }
} }
var startCombo = false; if (('startCombo' in options) && (options.startCombo)) {
if ('startCombo' in options) { embedLog('Selecting a new player/source combo, starting after '+mistplayers[options.startCombo.player].name+' with '+streaminfo.source[options.startCombo.source].type+' @ '+streaminfo.source[options.startCombo.source].url);
startCombo = options.startCombo;
startCombo.started = {
player: false,
source: false
};
embedLog('Selecting a new player/source combo, starting after '+mistplayers[startCombo.player].name+' with '+streaminfo.source[startCombo.source].type+' @ '+streaminfo.source[startCombo.source].url);
} }
embedLog('Checking available players..'); //sort the sources by simultracks, priority and mime, but prefer HTTPS
streaminfo.source.sort(function(a,b){
var source = false; return (b.simul_tracks - a.simul_tracks) || (b.priority - a.priority) || a.type.localeCompare(b.type) || b.url.localeCompare(a.url);
var mistPlayer = false;
function checkPlayer(p_shortname) {
if ((startCombo) && (!startCombo.started.player)) {
if (p_shortname != startCombo.player) { return false; }
else {
startCombo.started.player = true;
}
}
embedLog('Checking '+mistplayers[p_shortname].name+' (priority: '+mistplayers[p_shortname].priority+') ..');
streaminfo.working[p_shortname] = [];
if (forceType) {
if ((mistplayers[p_shortname].mimes.indexOf(forceType) > -1) && (checkMime(p_shortname,forceType))) {
return p_shortname;
}
}
else {
for (var m in mistplayers[p_shortname].mimes) {
if ((checkMime(p_shortname,mistplayers[p_shortname].mimes[m])) && (!forceSupportCheck)) {
return p_shortname;
}
}
}
return false;
}
function checkMime(p_shortname,mime) {
var loop;
if (forceSource) {
loop = [streaminfo.source[forceSource]];
}
else {
loop = streaminfo.source;
}
var broadcast = false;
for (var s in loop) {
if (loop[s].type == mime) {
broadcast = true;
if ((startCombo) && (!startCombo.started.source)) {
if (s == startCombo.source) {
startCombo.started.source = true;
}
continue;
}
if (mistplayers[p_shortname].isBrowserSupported(mime,loop[s],options,streaminfo,embedLog)) {
embedLog('Found a working combo: '+mistplayers[p_shortname].name+' with '+mime+' @ '+loop[s].url);
streaminfo.working[p_shortname].push(mime);
if (!source) {
mistPlayer = p_shortname;
source = loop[s];
source.index = s;
}
if (!forceSupportCheck) {
return source;
}
}
else {
embedLog('This browser does not support '+mime);
}
}
}
if (!broadcast) {
embedLog('Mist doesn\'t broadcast '+mime);
}
return false;
}
streaminfo.working = {};
if (forcePlayer) {
checkPlayer(forcePlayer);
}
else {
//sort the players
var sorted = Object.keys(mistplayers);
sorted.sort(function(a,b){
return mistplayers[a].priority - mistplayers[b].priority;
}); });
for (var n in sorted) {
var p_shortname = sorted[n]; var r = mistCheck(streaminfo,options,embedLog);
if (checkPlayer(p_shortname)) { break; } var mistPlayer = r.mistPlayer;
} var source = r.source;
}
options.target.innerHTML = ''; options.target.innerHTML = '';
if (mistPlayer) { if (mistPlayer) {
@ -1086,7 +1078,7 @@ function mistPlay(streamName,options) {
//build the player //build the player
player.mistplaySettings = { player.mistplaySettings = {
streamname: streamName, streamname: streamName,
options: local, options: options,
startCombo: { startCombo: {
player: mistPlayer, player: mistPlayer,
source: source.index source: source.index
@ -1157,7 +1149,7 @@ function mistPlay(streamName,options) {
player.askNextCombo('Playback has stalled'); player.askNextCombo('Playback has stalled');
player.report({ player.report({
'type': 'playback', 'type': 'playback',
'warn': 'Playback was stalled for > 10 sec' 'warn': 'Playback was stalled for > 8 sec'
}); });
},10e3); },10e3);
}; };
@ -1187,6 +1179,7 @@ function mistPlay(streamName,options) {
if (newtime == 0) { return; } if (newtime == 0) { return; }
var progress = newtime - lasttime; var progress = newtime - lasttime;
lasttime = newtime; lasttime = newtime;
if (progress < 0) { return; }
if (progress == 0) { if (progress == 0) {
var msg = 'There should be playback but nothing was played'; var msg = 'There should be playback but nothing was played';
var r = { var r = {
@ -1249,8 +1242,8 @@ function mistPlay(streamName,options) {
} }
else if (('source' in streaminfo) && (streaminfo.source.length)) { else if (('source' in streaminfo) && (streaminfo.source.length)) {
var str = 'Could not find a compatible player and protocol combination for this stream and browser. '; var str = 'Could not find a compatible player and protocol combination for this stream and browser. ';
if (forceType) { str += "\n"+'The mimetype '+forceType+' was enforced. '; } if (options.forceType) { str += "\n"+'The mimetype '+options.forceType+' was enforced. '; }
if (forcePlayer) { str += "\n"+'The player '+mistplayers[forcePlayer].name+' was enforced. '; } if (options.forcePlayer) { str += "\n"+'The player '+options.forcePlayer+' was enforced. '; }
} }
else { else {
var str = 'Stream not found.'; var str = 'Stream not found.';

View file

@ -16,11 +16,11 @@
// global options can be set here // global options can be set here
var mistoptions = { var mistoptions = {
//host: 'http://cat.mistserver.org:8080' //host: 'http://cat.mistserver.org:8080'
host: 'http://thulmk3:8080' //host: 'http://thulmk3:8080'
//host: 'https://cat.mistserver.org:4433' //host: 'https://cat.mistserver.org:4433'
//host: 'http://localhost:8080' //host: 'http://localhost:8080'
//host: 'http://live.us.picarto.tv:8080' //host: 'http://live.us.picarto.tv:8080'
//host: 'balderlaptop:8080' host: 'http://cattop:8080'
}; };
</script> </script>
@ -47,10 +47,16 @@
margin: 0; margin: 0;
max-width: 100vw; max-width: 100vw;
max-height: 100vh; max-height: 100vh;
background-color: #0f0f0f;
color: #aaa;
} }
.mistvideo { .mistvideo {
margin: 1px; margin: 1px;
} }
.log {
max-height: 15em;
overflow-y: auto;
}
</style> </style>
@ -69,23 +75,26 @@
div.appendChild(msg); div.appendChild(msg);
div.style.color = 'red'; div.style.color = 'red';
logele.appendChild(div); logele.appendChild(div);
logele.scrollTop = logele.scrollHeight;
}); });
document.addEventListener('log',function(e){ document.addEventListener('log',function(e){
if (e.message.indexOf('Player event fired') > -1) { return; }
console.log('[log] '+e.message); console.log('[log] '+e.message);
return; return;
var msg = document.createTextNode('['+(new Date()).toTimeString().split(' ')[0]+'] '+e.message); var msg = document.createTextNode('['+(new Date()).toTimeString().split(' ')[0]+'] '+e.message);
var div = document.createElement('div'); var div = document.createElement('div');
div.appendChild(msg); div.appendChild(msg);
logele.appendChild(div); logele.appendChild(div);
logele.scrollTop = logele.scrollHeight;
}); });
//tryplayers = Object.keys(mistplayers); //tryplayers = Object.keys(mistplayers);
tryplayers = []; tryplayers = [];
//tryplayers.push('automatic'); tryplayers.push('automatic');
//tryplayers.push('html5'); //tryplayers.push('html5');
tryplayers.push('dashjs');
//tryplayers.push('videojs'); //tryplayers.push('videojs');
tryplayers.push('img'); //tryplayers.push('img');
//tryplayers.push('dashjs'); //tryplayers.push('dashjs');
//tryplayers.push('flash_strobe'); //tryplayers.push('flash_strobe');
//tryplayers.push('silverlight'); //tryplayers.push('silverlight');
@ -97,8 +106,7 @@
//streams.push('vids+mist.mp4'); //streams.push('vids+mist.mp4');
//streams.push('vids+hahalol.mp3'); //streams.push('vids+hahalol.mp3');
//streams.push('lama'); //streams.push('lama');
//streams.push('bunny'); streams.push('bunny');
streams.push('golive+SockyChannel');
for (var j in streams) { for (var j in streams) {
for (var i in tryplayers) { for (var i in tryplayers) {
@ -116,10 +124,11 @@
//forceType: 'html5/audio/mp3', //forceType: 'html5/audio/mp3',
//forceType: 'html5/application/vnd.apple.mpegurl', //forceType: 'html5/application/vnd.apple.mpegurl',
//forceType: 'dash/video/mp4', //forceType: 'dash/video/mp4',
//forceSource: 3, //forceType: 'rtsp',
//forceSource: 6,
loop: true, loop: true,
//controls: 'stock' //controls: 'stock'
streaminfo: { /*streaminfo: {
source: [{ source: [{
type: 'html5/video/mp4', type: 'html5/video/mp4',
url: 'http://localhost:8080/bunny.mp4' url: 'http://localhost:8080/bunny.mp4'
@ -140,15 +149,18 @@
height: 404, height: 404,
width: 720, width: 720,
type: 'vod' type: 'vod'
}, },*/
callback: function(player) { callback: function(player) {
var button = document.createElement('button'); var button = document.createElement('button');
button.innerHTML = 'askNextCombo();'; button.innerHTML = 'askNextCombo();';
button.onclick = function(){ button.onclick = function(){
player.askNextCombo('Button was clicked'); player.askNextCombo('Button was clicked');
d.removeChild(this); //d.removeChild(this);
}; };
d.append(button); d.append(button);
var i = document.createElement('div');
i.className = 'countdown10';
button.appendChild(i);
} }
}); });