Video元件：控制視訊的播放與暫停

來自《sencha touch權威指南》第10章，315頁開始

app.js程式碼如下：

Ext.require(['Ext.Video','Ext.MessageBox','Ext.Toolbar','Ext.Panel']);
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    
    launch: function(){
        var video = Ext.create('Ext.Video',{
            fullScreen: false,
            width: '300',
            height: '200',
            url: 'images/music.mp4',
            enableControls: true,
            loop: true,
            listeners: {
                play: function(){
                    button.setDisabled(false);
                    button.setText("暫停");
                },
                ended: function(){
                    button.setText('播放');
                }
            }
        });

        var videoPlayOrPause = function(){
            if(button.getText() == "暫停"){
                video.pause();
                button.setText("播放");
            }else{
                video.play();
                button.getText("暫停");
            }
        }

        var button = Ext.create('Ext.Button',{
            id: 'playButton',
            text: '播放',
            disabled: true,
            handler: videoPlayOrPause
        });

        var toolbar = new Ext.Toolbar({
            docked: 'top',
            items: button
        });

        var panel = Ext.create('Ext.Panel',{
            layout: 'vbox',
            items: [toolbar,video]
        });

        Ext.Viewport.add(panel);
    }
});