87,923
社区成员
发帖
与我相关
我的任务
分享
<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();
});
設定完畢!!
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
});