Ext.Media representa la clase base para propocionar controles audio visuales. Es una clase abstracta y no debe ser usada directamente. De esta clase, se herendan las clases Ext.Video y Ext. Audio

Estos componentes solo son soportados en navegadores que implementen HTML5, de lo contrario se marcará un error.

Opciones de configuración

• autoPause : Boolean
• autoResume : Boolean
• enableControls : Boolean
• loop : Boolean
• media : Ext.Element
• preload : Boolean
• url : String

Métodos

• getAutoPause( ) : Boolean
• getAutoResume( ) : Boolean
• getEnableControls( ) : Boolean
• getLoop( ) : Boolean
• getMedia( ) : Ext.Element
• getPreload( ) : Boolean
• getUrl( ) : String
• isPlaying( ) : Boolean
• pause( )
• play( )
• setAutoPause( Boolean autoPause )
• setAutoResume( Boolean autoResume )
• setEnableControls( Boolean enableControls )
• setLoop( Boolean loop )
• setMedia( Ext.Element media )
• setPreload( Boolean preload )
• setUrl( String url )
• toggle( )
• updateEnableControls( Object enableControls )
• updateLoop( Object loop )
• updateUrl( Object newUrl )

Ext.Video

Proporciona un contenedor adecuado para Video de HTML 5. Por ejemplo:

<pre name="code" class="javascript">
var panel = new Ext.Panel({
fullscreen: true,
items: [
{
xtype : 'video',
x : 600,
y : 300,
width : 175,
height : 98,
url : "porsche911.mov",
posterUrl: 'porsche.png'
}
]
});
</pre>


Opciones de configuración

posterUrl : String
url : String

Métodos

getPosterUrl( ) : String
getUrl( ) : String
setPosterUrl( String posterUrl )
setUrl( String url )
updatePosterUrl( Object newUrl )


Ext.Audio
Esta clase proporciona los controles adecuados para manipular audio en HTML 5. Los tipos de archivo recomendados son:

• Uncompressed WAV y AIF audio
• MP3
• AAC-LC
• HE-AAC

En dispositivos con Android, las etiquetas de audio pueden no mostrarse. Se deben utilizar en lugar de ellos los metodos play, pause y toggle para el control del audio.

Ejemplos de uso:

<pre name="code" class="javascript">
Ext.create('Ext.Container', {
fullscreen: true,
layout: {
type : 'vbox',
pack : 'center',
align: 'stretch'
},
items: [
{
xtype : 'toolbar',
docked: 'top',
title : 'Ext.Audio'
},
{
xtype: 'audio',
url : 'touch/examples/audio/crash.mp3'
}
]
});
</pre>

También es posible esconder el componende de Audio definiendo su opcion hidden en verdadero por defecto y el control pasa a los metodos, play, pause y toggle. Por ejemplo:
<pre name="code" class="javascript">
Ext.create('Ext.Container', {
fullscreen: true,
layout: {
type: 'vbox',
pack: 'center'
},
items: [
{
xtype : 'toolbar',
docked: 'top',
title : 'Ext.Audio'
},
{
xtype: 'toolbar',
docked: 'bottom',
defaults: {
xtype: 'button',
handler: function() {
var container = this.getParent().getParent(),
// use ComponentQuery to get the audio component (using its xtype)
audio = container.down('audio');

audio.toggle();
this.setText(audio.isPlaying() ? 'Pause' : 'Play');
}
},
items: [
{ text: 'Play', flex: 1 }
]
},
{
html: 'Hidden audio!',
styleHtmlContent: true
},
{
xtype : 'audio',
hidden: true,
url : 'touch/examples/audio/crash.mp3'
}
]
});
</pre>



Opciones de configuración

url : String



Métodos

getUrl( ) : String
setUrl( String url )

---