PDA

View Full Version : Multiple Video Sources



hitman01
11 Aug 2011, 10:59 AM
I'm trying to override the Video component in order to make it accept multiple video sources.

<video width="320" height="240" controls="controls">
<source src="movie.mov" />
<source src="movie.mp4" />
</video>

I was wondering did anyone achieved this?

hitman01
11 Aug 2011, 11:47 AM
Here is my first attempt at it.

// Override Media to include additional sources
Ext.override(Ext.Media, {

// @private
afterRender : function() {
var cfg = this.getConfiguration();

// Single Source
if(!Ext.isArray(this.url)) {
Ext.apply(cfg, {
src: this.url,
preload: this.preload ? 'auto' : 'none'
});
}

// Multiple Sources
else {
Ext.apply(cfg, {
preload: this.preload ? 'auto' : 'none'
});
}
if(this.enableControls){
cfg.controls = 'controls';
}
if(this.loop){
cfg.loop = 'loop';
}
/**
* A reference to the underlying audio/video element.
* @property media
* @type Ext.Element
*/
this.media = this.el.createChild(cfg);

// Add additional sources
if(Ext.isArray(this.url)) {
for(i=0;i<this.url.length;i++) {
var optSrc = {
tag: 'source',
src: this.url[i]
};
this.media.createChild(optSrc);
}
}
Ext.Media.superclass.afterRender.call(this);


this.on({
scope: this,
activate: this.onActivate,
beforedeactivate: this.onDeactivate
});
},


});