Sencha Touch Cookbook

Working with videos

In this recipe, we will look at the video component to see how to use it to add the video playing capability to our application.

Getting ready

Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.

How to do it...

Carry out the following steps:

1. Create and open a new file named ch07_03.js and paste the following code in it:

   Ext.setup({ onReady: function() { var pnl = new Ext.Panel({ fullscreen: true, items: [ { xtype : 'video', id : 'video-pnl', enableControls: false, x : 600, y : 300, width : 300, height : 250, url : "ch07/space.mp4", posterUrl: "ch07/Screenshot.png" } ], dockedItems: [{ xtype: 'toolbar', dock: 'bottom', items: [ { text: 'Resume', ui: 'confirm', handler: function() ...