Embed: dynamically load player js only if required
This commit is contained in:
Cat
Thulinma
parent
43d8da036a
commit
8143d6af05
21 changed files with 532 additions and 39724 deletions
|
|
@ -1,6 +1,6 @@
|
|||
mistplayers.videojs = {
|
||||
name: 'VideoJS player',
|
||||
version: '1.0',
|
||||
version: '1.1',
|
||||
mimes: ['html5/video/mp4','html5/application/vnd.apple.mpegurl','html5/video/ogg','html5/video/webm'],
|
||||
priority: Object.keys(mistplayers).length + 1,
|
||||
isMimeSupported: function (mimetype) {
|
||||
|
|
@ -22,12 +22,21 @@ mistplayers.videojs = {
|
|||
|
||||
//dont use HLS if there is an MP3 audio track, unless we're on apple or edge
|
||||
if ((mimetype == 'html5/application/vnd.apple.mpegurl') && (['iPad','iPhone','iPod','MacIntel'].indexOf(navigator.platform) == -1) && (navigator.userAgent.indexOf('Edge') == -1)) {
|
||||
var audio = false;
|
||||
var nonmp3 = false;
|
||||
for (var i in streaminfo.meta.tracks) {
|
||||
var t = streaminfo.meta.tracks[i];
|
||||
if (t.codec == 'MP3') {
|
||||
return false;
|
||||
if (t.type == 'audio') {
|
||||
audio = true;
|
||||
if (t.codec != 'MP3') {
|
||||
nonmp3 = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if ((audio) && (!nonmp3)) {
|
||||
if (logfunc) { logfunc('This source has audio, but only MP3, and this browser can\'t play MP3 via HLS'); }
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -37,118 +46,139 @@ mistplayers.videojs = {
|
|||
};
|
||||
var p = mistplayers.videojs.player;
|
||||
p.prototype = new MistPlayer();
|
||||
p.prototype.build = function (options) {
|
||||
var cont = document.createElement('div');
|
||||
cont.className = 'mistplayer';
|
||||
p.prototype.build = function (options,callback) {
|
||||
var me = this; //to allow nested functions to access the player class itself
|
||||
|
||||
this.addlog('Building VideoJS player..');
|
||||
|
||||
var ele = this.getElement('video');
|
||||
cont.appendChild(ele);
|
||||
ele.className = '';
|
||||
ele.crossOrigin = 'anonymous'; //required for subtitles
|
||||
|
||||
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);
|
||||
function onplayerload () {
|
||||
me.addlog('Building VideoJS player..');
|
||||
|
||||
var cont = document.createElement('div');
|
||||
cont.className = 'mistplayer';
|
||||
|
||||
var ele = me.getElement('video');
|
||||
cont.appendChild(ele);
|
||||
ele.className = '';
|
||||
ele.crossOrigin = 'anonymous'; //required for subtitles
|
||||
|
||||
var shortmime = options.source.type.split('/');
|
||||
shortmime.shift();
|
||||
|
||||
var source = document.createElement('source');
|
||||
source.setAttribute('src',options.src);
|
||||
me.source = source;
|
||||
ele.appendChild(source);
|
||||
source.type = shortmime.join('/');
|
||||
me.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
if (options.poster) { vjsopts.poster = options.poster; }
|
||||
if (options.controls) {
|
||||
if ((options.controls == 'stock') || (!me.buildMistControls())) {
|
||||
//MistControls have failed to build in the if condition
|
||||
ele.setAttribute('controls',true);
|
||||
}
|
||||
}
|
||||
//prevent onerror loops
|
||||
if (e.target == me.element) {
|
||||
e.message = msg;
|
||||
}
|
||||
else {
|
||||
me.adderror(msg);
|
||||
}
|
||||
});
|
||||
var events = ['abort','canplay','canplaythrough','durationchange','emptied','ended','interruptbegin','interruptend','loadeddata','loadedmetadata','loadstart','pause','play','playing','ratechange','seeked','seeking','stalled','volumechange','waiting','progress'];
|
||||
for (var i in events) {
|
||||
ele.addEventListener(events[i],function(e){
|
||||
me.addlog('Player event fired: '+e.type);
|
||||
|
||||
|
||||
me.onready(function(){
|
||||
me.videojs = videojs(ele,vjsopts,function(){
|
||||
me.addlog('Videojs initialized');
|
||||
});
|
||||
});
|
||||
|
||||
me.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;
|
||||
}
|
||||
}
|
||||
//prevent onerror loops
|
||||
if (e.target == me.element) {
|
||||
e.message = msg;
|
||||
}
|
||||
else {
|
||||
me.adderror(msg);
|
||||
}
|
||||
|
||||
});
|
||||
var events = ['abort','canplay','canplaythrough','durationchange','emptied','ended','interruptbegin','interruptend','loadeddata','loadedmetadata','loadstart','pause','play','playing','ratechange','seeked','seeking','stalled','volumechange','waiting','progress'];
|
||||
for (var i in events) {
|
||||
ele.addEventListener(events[i],function(e){
|
||||
me.addlog('Player event fired: '+e.type);
|
||||
});
|
||||
}
|
||||
|
||||
callback(cont);
|
||||
}
|
||||
|
||||
return cont;
|
||||
if ('videojs' in window) {
|
||||
onplayerload();
|
||||
}
|
||||
else {
|
||||
//load the videojs player
|
||||
var scripttag = document.createElement('script');
|
||||
scripttag.src = options.host+'/videojs.js';
|
||||
me.addlog('Retrieving videojs player code from '+scripttag.src);
|
||||
document.head.appendChild(scripttag);
|
||||
scripttag.onerror = function(){
|
||||
me.askNextCombo('Failed to load videojs.js');
|
||||
}
|
||||
scripttag.onload = function(){
|
||||
onplayerload();
|
||||
}
|
||||
}
|
||||
}
|
||||
p.prototype.play = function(){ return this.element.play(); };
|
||||
p.prototype.pause = function(){ return this.element.pause(); };
|
||||
|
|
@ -177,13 +207,16 @@ if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.m
|
|||
};
|
||||
}
|
||||
p.prototype.updateSrc = function(src){
|
||||
if (src == '') {
|
||||
this.videojs.dispose();
|
||||
return;
|
||||
if (videojs in this) {
|
||||
if (src == '') {
|
||||
this.videojs.dispose();
|
||||
return;
|
||||
}
|
||||
this.videojs.src({
|
||||
src: src,
|
||||
type: this.source.type
|
||||
});
|
||||
return true;
|
||||
}
|
||||
this.videojs.src({
|
||||
src: src,
|
||||
type: this.source.type
|
||||
});
|
||||
return true;
|
||||
return false;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue