youtube

Question

<script type="text/javascript" src="/ux/ext-base.js"></script> 
<script type="text/javascript" src="/ux/ext-all-debug.js"></script>  
<!– Ext.ux.Youtubeplayer derives from hendricd’s Ext.ux.MediaPanel component –> 
<script type="text/javascript" src="/ux/mediapanel.js"></script>  
<!– YoutubePlayer stuff - js & css –> 
<script type="text/javascript" src="/ux/YoutubePlayer.js"></script>    
<script type="text/javascript" src="/ux/YoutubePlayerControl.js"></script>    
<link rel="stylesheet" type="text/css" href="/ux/css/YoutubePlayer.css" />  
<link rel="stylesheet" type="text/css" href="/ux/ext-all.css"/>  4.申請DEVELOPER_KEY//DO NOT USE THIS DEVKEY. Register for your own here: 
//http://code.google.com/apis/youtube/dashboard/   //申請網址 
#請記得到http://code.google.com/apis/youtube/dashboard/申請DEVELOPER_KEY 
var DEVELOPER_KEY = ‘DEVELOPER_KEY放到這裡’; Ext.onReady(function(){ 
       var playerPanel = new Ext.ux.YoutubePlayer({ 
           developerKey : DEVELOPER_KEY,    
           playerId     : ‘myplayer’, 
           border         : false, 
           ratioMode    : ’strict’, 
           hideMode     : ‘visibility’, 
           bgColor      : "#000000", 
           bodyStyle      : ‘background-color:#000000;’ 
       }); 
         playerPanel.on(’ready’, function(panel, player) {  
         panel.cueVideoById(’<?echo $addr;?>‘, 0);                  }, playerPanel); var w = new Ext.Window({ 
        title        : ‘My blog Player’,    //Player的名稱可自行定義  
        layout          : ‘fit’, 
        maximizable  : true, 
        animCollapse : false, 
        hideMode      : ‘visibility’, 
        collapsible  : true, 
        resizable    : true, 
        items        : [playerPanel], 
        bbar         : new Ext.ux.YoutubePlayer.Control({ 
        player   : playerPanel, 
        border     : false, 
        id          : ‘control’, 
        style     : ‘border:none;’ 
        }), 
        listeners   : { 
            ‘resize’            : function(){this.bottomToolbar.fireEvent(’resize’)} 
        }, 
        height      : 200,          //顯示的大小可自行定義 
        width       : 180 
    });       
    w.show(); 
}); 設定完畢!! 
那位大大帮注释一下这个程序,看德不是很明白,还有这个能不能播放本地的视频,怎么设置?

Answer 1

var DEVELOPER_KEY = ‘DEVELOPER_KEY放到這裡’; //设定一个全局变量Ext.onReady(function(){ 
       var playerPanel = new Ext.ux.YoutubePlayer({ //new 一个播放控件,从下边的名字你可以知道是在设置这个控件的各个属性
           developerKey : DEVELOPER_KEY,    
           playerId     : ‘myplayer’, 
           border         : false, 
           ratioMode    : ’strict’, 
           hideMode     : ‘visibility’, 
           bgColor      : "#000000", 
           bodyStyle      : ‘background-color:#000000;’ 
       }); 
       //下边是给播放控件的ready事件添加一个监听函数
         playerPanel.on(’ready’, function(panel, player) {  
         panel.cueVideoById(’<?echo $addr;?>‘, 0);                  }, playerPanel); var w = new Ext.Window({ //new一个window来放播放控件，用来展示给用户看。
        title        : ‘My blog Player’,    //Player的名稱可自行定義  
        layout          : ‘fit’, //采用fit布局格式，
        maximizable  : true, //可以最大化最小化
        animCollapse : false, //不可自动收缩
        hideMode      : ‘visibility’, //可见
        collapsible  : true, //可收缩，但不是自动的
        resizable    : true,//可以改变窗口大小 
        items        : [playerPanel], //窗口中放到是playerPanel
        bbar         : new Ext.ux.YoutubePlayer.Control({ //底行工具栏是一个Youtube的控制控件
        player   : playerPanel, 
        border     : false, 
        id          : ‘control’, 
        style     : ‘border:none;’ 
        }), 
        listeners   : { //对改变窗口大小事件(resize)加一个监听函数
            ‘resize’            : function(){this.bottomToolbar.fireEvent(’resize’)} 
        }, 
        height      : 200,          //顯示的大小可自行定義 
        width       : 180 
    });       
    w.show(); //显示这个窗口和其中的player
});