hydrar/mistserver
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Embed: VideoJS player added

Browse source
This commit is contained in:
Cat 2016-12-06 12:40:55 +01:00 • committed by Thulinma
parent 133a8f36da
commit 1c0fd833bb
12 changed files with 39989 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CMakeLists.txt
View file

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

101
embed/core.js
View file

@ -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,9 +664,14 @@ function mistPlay(streamName,options) {
forceSupportCheck = true;
}
var forcePlayer = false;
if (('forcePlayer' in options) && (options.forcePlayer) && (options.forcePlayer in mistplayers)) {
embedLog('Forcing '+mistplayers[options.forcePlayer].name);
forcePlayer = options.forcePlayer;
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 ('setTracks' in options) { player.setTracks(options.setTracks); }
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);
}

1234
embed/mist.css
View file

File diff suppressed because one or more lines are too long

38369
embed/players/old_videojs.js Normal file
View file

File diff suppressed because one or more lines are too long

24
embed/players/video.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

6
embed/players/videojs-contrib-hls.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

29
embed/players/videojs.js Normal file
View file

File diff suppressed because one or more lines are too long

34
embed/test.html
View file

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

52
embed/wrappers/dashjs.js
View file

@ -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) {

61
embed/wrappers/html5.js
View file

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

156
embed/wrappers/videojs.js Normal file
View file

@ -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;
};

8
src/output/output_http_internal.cpp
View file

@ -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());
}