Embed: VideoJS player added
This commit is contained in:
Cat
Thulinma
parent
133a8f36da
commit
1c0fd833bb
12 changed files with 39989 additions and 89 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
156
embed/wrappers/videojs.js
Normal 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;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue