web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-25 11:13:52 +02:00
Code Releases Activity

Updated swf object to newest version.

Browse Source 
Optimizing player for later loaded sources.
This commit is contained in:
Steve Heffernan 2011-12-01 15:47:12 -08:00
parent ec145f6d4d
commit 7e747e95ab
8 changed files with 125 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
flash/swfobject.js
View File

File diff suppressed because one or more lines are too long

BIN
flash/video-js.swf
View File

Binary file not shown.

7
src/component.js
View File

@ -141,10 +141,12 @@ _V_.Component = _V_.Class.extend({
/* Ready - Trigger functions when component is ready
================================================================================ */
ready: function(fn){
if (!fn) return;
if (this.isReady) {
fn.call(this);
} else {
if (this.readyQueue !== undefined) {
if (this.readyQueue === undefined) {
this.readyQueue = [];
}
this.readyQueue.push(fn);
@ -152,9 +154,8 @@ _V_.Component = _V_.Class.extend({
},
triggerReady: function(){
if (this.isReady) return;
this.isReady = true;
if (this.readyQueue.length > 0) {
if (this.readyQueue && this.readyQueue.length > 0) {
// Call all functions in ready queue
this.each(this.readyQueue, function(fn){
fn.call(this);

3
src/core.js
View File

@ -51,6 +51,9 @@ VideoJS.options = {
// Default of web browser is 300x150. Should rely on source width/height.
width: "auto",
height: "auto",
// defaultVolume: 0.85,
defaultVolume: 0.00, // The freakin seaguls are driving me crazy!
// Included control sets
components: [

2
src/lib.js
View File

@ -62,7 +62,7 @@ _V_.extend({
insertFirst: function(node, parent){
if (parent.firstChild) {
parent.insertBefore(parent.firstChild, node);
parent.insertBefore(node, parent.firstChild);
} else {
parent.appendChild(node);
}

98
src/player.js
View File

@ -13,28 +13,18 @@ _V_.Player = _V_.Component.extend({
// Browsers default to 300x150 if there's no width/height or video size data.
initWidth = width || 300,
initHeight = height || 150,
// If the HTML5 video is already playing, we'll adjust
paused = tag.paused;
initHeight = height || 150;
// Make player findable on elements
tag.player = el.player = this;
// Add callback to ready queue
this.ready(ready);
// Wrap video tag in div (el/box) container
tag.parentNode.insertBefore(el, tag);
el.appendChild(tag); // Breaks iPhone, fixed in HTML5 setup.
// Safari (5.1.1) and Chrome (15) both have issues when you use autoplay and a poster and no controls.
// Chrome just hides the video. Safari hides the video if you move it in the DOM like VJS does.
// This fixes the Safari issue by removing the poster, which is currently never used again after
// the video starts playing.
if (!paused) {
// options.poster = tag.poster
// tag.poster = null;
// tag.play();
}
// Give video tag properties to box
el.id = this.id = tag.id; // ID will now reference box, not the video tag
el.className = tag.className;
@ -72,11 +62,6 @@ _V_.Player = _V_.Component.extend({
}
}
// Add callback to ready queue
this.apiIsReady = false;
this.readyQueue = [];
if (ready) { this.ready(ready); }
// Holder for playback tech components
this.techs = {};
@ -88,11 +73,12 @@ _V_.Player = _V_.Component.extend({
this.addEvent("ended", this.onEnded);
this.addEvent("play", this.onPlay);
this.addEvent("pause", this.onPause);
this.addEvent("error", this.onError);
// When the API is ready, loop through the components and add to the player.
this.components = [];
if (this.options.controls) {
this.addEvent("techready", function(){
this.ready(function(){
this.each(this.options.components, function(set){
this.addComponent(set);
});
@ -173,9 +159,20 @@ _V_.Player = _V_.Component.extend({
// And append playback element in player div.
loadTech: function(techName, source){
this.triggerEvent("loadingtech");
// Pause and remove current playback technology
if (this.tech) {
this.removeTech(tech);
this.removeTech(this.tech);
// Turn off any manual progress or timeupdate tracking
if (this.manualProgress) {
this.manualProgressOff()
}
if (this.manualTimeUpdates) {
this.manualTimeUpdatesOff()
}
// If the first time loading, HTML5 tag will exist but won't be initialized
// So we need to remove it if we're not loading HTML5
@ -188,28 +185,30 @@ _V_.Player = _V_.Component.extend({
// Turn off API access because we're loading a new tech that might load asynchronously
this.isReady = false;
// Finsh API Setup when tech is ready
this.addEvent("techready", _V_.proxy(this, function(){
// Reomve this so it's not called twice next load
this.removeEvent("techready", arguments.callee);
var techReady = function(){
// Set up playback technology's event triggers
this.tech.setupTriggers();
this.triggerReady();
this.setupTriggers();
this.player.triggerReady();
// Manually track progress in cases where the browser/flash player doesn't report it.
if (!_V_.techSupports(techName, "event", "progress")) { this.manualProgressOn(); }
if (!_V_.techSupports(this.name, "event", "progress")) {
this.player.manualProgressOn();
}
// Manually track timeudpates in cases where the browser/flash player doesn't report it.
if (!_V_.techSupports(techName, "event", "timeupdate")) { this.manualTimeUpdatesOn(); }
}));
if (!_V_.techSupports(this.name, "event", "timeupdate")) {
this.player.manualTimeUpdatesOn();
}
}
// Initialize new tech if it hasn't been yet and load source
// Add tech element to player div
if (this.techs[techName] === undefined) {
this.techs[techName] = this.tech = new _V_[techName](this, { source: source });
this.tech.ready(techReady)
} else {
this.tech = this.techs[techName];
_V_.log("here3")
_V_.insertFirst(this.techs[techName].el, this.el);
this.src(source);
}
@ -330,6 +329,10 @@ _V_.Player = _V_.Component.extend({
onPause: function(){
_V_.removeClass(this.el, "vjs-playing");
_V_.addClass(this.el, "vjs-paused");
},
onError: function(e) {
_V_.log("Video Error", e);
}
});
@ -342,7 +345,9 @@ _V_.Player.prototype.extend({
if (this.isReady) {
return this.tech[method](arg);
} else {
throw new Error("The playback technology API is not ready yet. Use player.ready(myFunction).");
_V_.log("The playback technology API is not ready yet. Use player.ready(myFunction)."+" ["+method+"]")
return false;
// throw new Error("The playback technology API is not ready yet. Use player.ready(myFunction)."+" ["+method+"]");
}
},
@ -506,6 +511,8 @@ _V_.Player.prototype.extend({
// Case: Array of source objects to choose from and pick the best to play
if (source instanceof Array) {
var sources = source;
techLoop: // Named loop for breaking both loops
// Loop through each playback technology in the options order
for (var i=0,j=this.options.techOrder;i<j.length;i++) {
@ -517,7 +524,7 @@ _V_.Player.prototype.extend({
if (tech.isSupported()) {
// Loop through each source object
for (var a=0,b=this.options.sources;a<b.length;a++) {
for (var a=0,b=sources;a<b.length;a++) {
var source = b[a];
// Check if source can be played with this technology
@ -540,12 +547,27 @@ _V_.Player.prototype.extend({
// Case: Source object { src: "", type: "" ... }
} else if (source instanceof Object) {
this.src(source.src);
if (this.tech.canPlaySource(source)) {
this.src(source.src);
} else {
// Send through tech loop to check for a compatible technology.
this.src([source]);
}
// Case: URL String (http://myvideo...)
} else {
this.apiCall("src", source);
this.load();
if (!this.isReady) {
this.ready(function(){
this.src(source);
});
} else {
this.apiCall("src", source);
if (this.options.preload == "auto") {
this.load();
}
if (this.options.autoplay) {
// this.play();
}
}
}
return this;
},

86
src/tech.js
View File

@ -11,7 +11,11 @@ _V_.PlaybackTech = _V_.Component.extend({
},
createElement: function(){},
setupTriggers: function(){},
removeTriggers: function(){}
removeTriggers: function(){},
canPlaySource: function(source){
return _V_[this.name].canPlaySource(source);
}
});
// Create placeholder methods for each that warn when a method
@ -28,33 +32,35 @@ _V_.each(_V_.apiMethods, function(methodName){
_V_.HTML5 = _V_.PlaybackTech.extend({
name: "HTML5",
init: function(player, options){
init: function(player, options, ready){
this.player = player;
this.el = this.createElement();
this.ready(ready);
var source = options.source;
if (source && this.el.currentSrc != source.src) {
this.el.src = source.src;
} else if (source) {
// If the element source is already set, we may have missed the loadstart event, and want to trigger it.
// We don't want to set the source again and interrupt playback.
if (source && this.el.currentSrc == source.src) {
player.triggerEvent("loadstart");
// Otherwise set the source if one was provided.
} else if (source) {
this.el.src = source.src;
}
// Moving video inside box breaks autoplay on Safari. This forces it to play.
// Currently triggering play in other browsers as well.
player.addEvent("techready", function(){
// Chrome and Safari both have issues with autoplay.
// In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work.
// In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays)
// This fixes both issues. Need to wait for API, so it updates displays correctly
player.ready(function(){
if (this.options.autoplay && this.paused()) {
this.tag.poster = null; // Chrome Fix. Fixed in Chrome v16.
this.play();
}
this.removeEvent("techready", arguments.callee);
});
// Trigger tech ready on player.
// TODO: Switch to component ready when available.
setTimeout(_V_.proxy(this, function(){
this.player.triggerEvent("techready");
}), 0);
this.triggerReady();
},
createElement: function(){
@ -76,7 +82,8 @@ _V_.HTML5 = _V_.PlaybackTech.extend({
player.el.removeChild(el);
el = newEl;
player.el.appendChild(el);
_V_.log("here")
_V_.insertFirst(el, player.el);
}
// Update tag settings, in case they were overridden
@ -186,7 +193,7 @@ _V_.HTML5.isSupported = function(){
};
_V_.HTML5.canPlaySource = function(srcObj){
return !!document.createElement("video").canPlayType(srcObj.type); // Switch to global check
return !!document.createElement("video").canPlayType(srcObj.type);
// TODO: Check Type
// If no Type, check ext
// Check Media Type
@ -222,18 +229,19 @@ if (_V_.isAndroid()) {
_V_.H5swf = _V_.PlaybackTech.extend({
name: "H5swf",
// swf: "flash/video-js.swf",
swf: "flash/video-js.swf",
// swf: "https://s3.amazonaws.com/video-js/3.0b/video-js.swf",
// swf: "http://video-js.zencoder.com/3.0b/video-js.swf",
swf: "http://video-js.com/test/video-js.swf",
// swf: "http://video-js.com/test/video-js.swf",
// swf: "http://video-js.com/source/flash/video-js.swf",
// swf: "http://video-js.com/source/flash/video-js.swf",
// swf: "video-js.swf",
init: function(player, options){
this.player = player;
// this.el = this.createElement();
var placeHolder = this.el = _V_.createElement("div", { id: player.el.id + "_temp_h5swf" });
var source = options.source,
placeHolder = this.el = _V_.createElement("div", { id: player.el.id + "_temp_h5swf" }),
objId = player.el.id+"_h5swf_api",
playerOptions = player.options;
@ -244,8 +252,7 @@ _V_.H5swf = _V_.PlaybackTech.extend({
autoplay: playerOptions.autoplay,
preload: playerOptions.preload,
loop: playerOptions.loop,
muted: playerOptions.muted,
poster: playerOptions.poster
muted: playerOptions.muted
},
params = {
@ -260,12 +267,16 @@ _V_.H5swf = _V_.PlaybackTech.extend({
'class': 'vjs-tech'
};
if (playerOptions.poster) {
flashvars.poster = playerOptions.poster;
}
// If source was supplied pass as a flash var.
if (source) {
flashvars.src = source.src;
}
player.el.appendChild(placeHolder);
_V_.insertFirst(placeHolder, player.el);
swfobject.embedSWF(options.swf || this.swf, placeHolder.id, "480", "270", "9.0.124", "", flashvars, params, attributes);
},
@ -276,7 +287,16 @@ _V_.H5swf = _V_.PlaybackTech.extend({
play: function(){ this.el.vjs_play(); },
pause: function(){ this.el.vjs_pause(); },
src: function(src){ this.el.vjs_src(src); },
src: function(src){
this.el.vjs_src(src);
// Currently the SWF doesn't autoplay if you load a source later.
// e.g. Load player w/ no source, wait 2s, set src.
if (this.player.autoplay) {
// var tech = this;
// setTimeout(function(){ tech.play(); }, 0);
}
},
load: function(){ this.el.vjs_load(); },
poster: function(){ this.el.vjs_getProperty("poster"); },
@ -347,24 +367,26 @@ _V_.H5swf.supports = {
};
_V_.H5swf.onSWFReady = function(currSwf){
_V_.log(currSwf, "currSwf")
// Flash seems to be catching errors, so raising them manally
try {
// Delay for real swf ready.
setTimeout(function(){
var el = _V_.el(currSwf),
var el = _V_.el(currSwf);
// Get player from box
player = el.parentNode.player;
var player = el.parentNode.player,
tech = player.techs["H5swf"];
// Reference player on tech element
el.player = player;
// Update reference to playback technology element
player.techs["H5swf"].el = el;
tech.el = el;
player.ready(function(){
// this.src("http://video-js.zencoder.com/oceans-clip.mp4");
});
player.triggerEvent("techready");
tech.triggerReady();
},0);

BIN
video-js.zip
View File

Binary file not shown.