Home » Sencha Touch » Sencha touch Media

Sencha touch Media

Welcome to the seventh and last module of this series. In this module we will learn about Sencha touch media, how to add images, how to add videos, how to add audio. We will also learn about how to create our own audio player.

Image

Image can be added by using “Ext.Img” class, below is the code snippet to add an image.

var image = Ext.create('Ext.Img', {
    src: 'images/sencha_touch_logo.jpg',
    centered:true,
    border: 5,
    style: 'border-color: black; border-style: solid;',
    height: 140,
    width: 320
 });

image.on({
   load:function(image,e,eOpts){
     console.log("Image loaded");
   },
   tap:function(image,e,eOpts){
      console.log("Image tapped");
   }
});
Ext.Viewport.add(image);

Let’s go through each line in above code.

“Ext.Img” class is used to add image in an application.

src: src is the source of an image.

centered: will center align the image in its container if set to true.

border: will set the border of an image in px.

style: will apply custom css styling on image.

height: will set height of an image.

widht: will set width of an image.

Then in next step I am adding events to an image object. “load” event will be fired after image has been loaded successfully, “tap” event will be fired when user taps on image. I haven’t added much logic in “load” and “tap” event, but you can write a logic to zoom an image when user taps on it or you can write a logic to modify an image when image loads for the first time.

 

 audio

Ext.Audio class is used to add audio.

Recommended File Types/Compressions are:

  • Uncompressed WAV and AIF audio
  • MP3 audio
  • AAC-LC
  • HE-AAC audio
  • Below is the code snippet to add audio.
var audio = Ext.create('Ext.Audio',{
    url:'samplemp3.mp3'
});

This code is pretty straight forward, I am adding audio using “Ext.Audio” and then passing url of audio file.

Above code will display audio player with default controls, but what if you want to hide the default audioplayer and use our own custom controls to play, pause and stop. Below is the sample code to add custom controls.

var audioPlayer = Ext.create('Ext.Panel', {
    fullscreen: true,
    items: [{
       xtype : 'toolbar',
       id:'id_audio',
       docked: 'top',
       title : 'Audio Player',
    },{
       xtype : 'audio',
       hidden: true, // hide the audio player
       url   : 'samplemp3.mp3'
    },{
       xtype: 'toolbar',
       docked: 'bottom',
       defaults: {
          xtype: 'button',
          flex:1,
          handler:function(e){
             var id = e.getId(); // get the id of clicked button
             var container = this.getParent().getParent(); // will get the container
             var  audio = container.down('audio'); // will get the audio object
             if(id=="id_Play"){
                 audio.toggle();  // toggle the player state, if audio is in play state then pause it or if pause then play it
                  this.setText(audio.isPlaying() ? 'Pause' : 'Play'); // change the button text. audio.isPlaying() will return true if audio is playing.
              }else if(id=="id_Stop"){
                   audio.stop(); // stop the audio
              }
          }
      },
      items: [
                { text: 'Play', id: 'id_Play' },
                { text: 'Stop', id: 'id_Stop' }
            ]
        }
    ]
});

Above code will create a panel with three child items, one is toolbar to display simple header, second is audio player which will be hidden and third is bottom toolbar which will have play/pause and stop button.

Lower toolbar has handler which will handle the play/pause and stop functionality.

 

Video

Ext.Video class is used to add video.

Below is the code snippet to add video.

var video = Ext.create('Ext.Video', {
   fullscreen: true,
   width    : 320,
   height   : 145,
   url      : ["sampleVideo.mp4","sampleVideo.webm"],
   posterUrl: 'images/sencha_touch_logo.jpg', // poster image to be shown before showing the video.
   loop:true, // will run the video in loop
   volume:1, // volume of the video from 0.0 to 1.0.
   centered:true
});

most of the config options are same as audio. You must have noticed that I am passing two different formats to url, it is because not all the browsers support all the formats. For example all the browsers support mp4 except opera, opera supports webm video format. Because of this limitation it is always a good practice to provide different formats, so your application can support all the browsers.

So finally we have come to an end of this series,we have tried to cover almost all the major concepts that you need to create an application using Sencha Touch. Please comment and let us know if you have any suggestion or if you want us to include more topics.

Thanks!!! Happy CoDing…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>