利用Video组件播放视频文件：综合示例

 

 

 此时视频处于暂停状态：按钮文字是“播放”

 

 

此时，视频是播放状态，按钮文字是：暂停

 

 

__________________________________________________________________________________

app.js

 

 

launch: function() {
  //-----------------------------利用Video组件播放视频文件--------------------------------------

  //用户单击播放/暂停按钮,视频被相应的播放/暂停
  //sencha touch2.0中提供一个Video组件,该组件中封装HTML5的video元素,因此可以直接通过该组件在页面中播放视频文件
  
  //播放,暂停,快进,快退
  
  var video=Ext.create('Ext.Video',{
   //fullscreen:true,
   //width:500,
   //height:700, 
   centered:true,
   url:['resources/media/BigBuck.m4v','resources/media/BigBuck.webm'],//指定播放视频的url
   loop:false,//是否循环播放,true:循环播放.false:不循环
   posterUrl:'resources/images/4.jpg',//指定视频在尚未播放时所显示的一幅代替图片
   listeners:{
    play:function(media){//当视频开始播放,设置按钮为有效状态,文字为暂停;有一个参数media:代表触发事件的Video组件
     button.setDisabled(false);
     button.setText('暂停');
    },
    ended:function(media,time){//视频播放结束后,按钮的文字自动设置为播放;两个参数:media:代表触发事件的Video组件;time:代表播放结束时视频被播放的秒数
     button.setText('播放'); 
    }
   }
  });
  
  var videoPlayOrPause=function(){
   if(button.getText()=="暂停"){
    video.pause();
    button.setText("播放");
    console.log("------暂停------");
    console.log(video.media.dom.playbackRate);//获取video元素的播放速率
    video.media.dom.playbackRate+=1;//修改video元素的播放速率,加快视频播放速率
   }else if(button.getText()=="播放"){
    video.play();
    button.setText("暂停");
    console.log("------播放------");
    console.log(video.media.dom.playbackRate);//获取video元素的播放速率
    video.media.dom.playbackRate+=1;//修改video元素的播放速率,加快视频播放速率
   }
  }
  
  var button=Ext.create('Ext.Button',{
   id:'playButton',
   text:'播放',//显示的文字是播放
   disabled:true,//按钮处于无效状态
   handler:videoPlayOrPause
        
  });
  
  var toolbar=new Ext.Toolbar({
   docked:'top',
   items:button
         
  });
  
  var panel=new Ext.Panel({
   layout:'vbox',
   items:[
    toolbar  ,
    video
   ]
  });
  
  
  
  Ext.Viewport.add(panel);
  
    },