Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Supporting HTML5 Video with Ext.Video

Page of 168

The Ext.Audio class (xtype: audio) acts as a wrapper for the html5 <audio> tag.

Use H.264 encoded video for the greatest degree of compatibility across devices.

You will typically set the following configuration properties:

Config Option Description
url String/Array. The URL of the video file. Use an H.264 .mov file for the broadest compatibility.

autoPause Pauses the media when the container is deactivated.
autoResume Starts playing the audio immediately when the container is activated.
enableControls Boolean. Set to false to turn off native controls. Defaults to false on Android.
muted Boolean. Determines if the media is muted. Sets the volume to 0. Defaults to false.
posterUrl String. A jpg or png to display prior playing the video.
preload Boolean. Starts downloading the media immediately. Defaults to true.
volume Number. The volume of the playback in a range of 0.0 to 1.0

Consequently, a simple instantiation of the Ext.Video class resembles the following:

var basepath = "http://docs.sencha.com/touch/2-1/touch-build/examples/video/";
Ext.Viewport.add({
 xtype: 'video',
 url: [
  basepath + 'resources/media/BigBuck.m4v',
  basepath + 'resources/media/BigBuck.webm'
  ],
  loop: true,
  posterUrl: basepath + 'resources/images/cover.jpg'
});

Ext.Audio and Ext.Video also support the following methods:

Method Description
isPlaying()Returns the current play status as a boolean.
pause()Pauses playback.
play()Continues playback.
stop()Stops playback and returns to the beginning of the loop.
toggle()Toggles the playback state.

Unfortunately, Android devices do not support native controls, so to ensure cross-device compatibility, you might want to develop your own custom player, as illustrated by the following example:

Ext.define('MyApp.view.VideoPlayer', {
 extend: 'Ext.Container',
 alias: 'widget.videoplayer',

 config: {
  url: 'http://webapps.figleaf.com/arch101/friends.mp4',
  autoPause: true,
  autoResume: true,
  enableControls: false,
  preload: true,
  posterUrl: 'http://webapps.figleaf.com/arch101/friends.png',
  layout: {
    type: 'vbox'
  }
 },

 initialize: function() {
  
  this.callParent(arguments);
  this.add(
   {
    xtype: 'video',
    url: this.getUrl(),
    flex: 1,
    autoResume: this.getAutoResume(),
    preload: this.getPreload(),
    autoPause: this.getAutoPause(),
    enableControls: this.getEnableControls(),
    posterUrl: this.getPosterUrl()
   }
  );

  if (!this.getEnableControls() || Ext.os.is.Android) {
   this.add(
    {
     xtype: 'button',
     text: 'Play Video',
     handler: function(b,e) {
      var video = this.getParent().down('video');
      if (video.isPlaying()) {
       video.pause();
       b.setText('Play Video');
      } else {
       video.play();
       b.setText('Pause Video');
      }
     }
    }
   )
  }
 }
});
Page of 168
comments powered by Disqus