Add Video Component in Sencha Touch

Today, we are going to see how to add Ext.Video component in the Sencha Touch. This component provides a simple Container for HTML5 Video.This component is used to play video (H.264 format, .mov file format etc) in the mobile web apps. Let us see the important configuration properties available in Ext.Video class.

url: Location url of the video to play.
autoResume: Will automatically start playing the media when the container is activated.
autoPause: Will automatically pause the media when the container is deactivated.
loop: Will loop the media forever.
volume: The volume of the media from 0.0 to 1.0.
posterUrl: Location of a poster image to be shown before showing the video.
width: The width of the media.
height: The height of the media.


Let's see the implementation which will display video using Ext.Video view component with basic configurations.

 Ext.define('MyApp.view.SenchaVideo', {
     extend: 'Ext.Video',
     alias: 'widget.SenchaVideo',

     config: {
         height: '350px',
         width: '400px',
         autoResume: true,
         loop: true,
         url: 'senchalearn.mov',
         volume: 0.7,
         posterUrl: 'imageUrl.jpg'
     }
 });

Hope, you enjoyed this Post.