JW Player參數詳解
1,安裝
下載后,你可以得到一個例子,當用文本或HTML編輯器打開的時候,你可以發現swf是用一段短小的
javascript嵌入到頁面上的。這個Javascript是Geoff Stearns寫的swfobject.js,它解決了Flash需要激
活的麻煩。當復制swf到你的站點的時候,不要忘記了把swfobject.js一同復制過去。並且在頁面中的
Head中加入下面代碼
程序代碼
<script type="text/javascript" src="swfobject.js"></script>
在swfobject.js的幫助下你可以方便的設置swf的路徑,寬度,高度,背景顏色和所需要的Flash播放器的版本,也可以通過它設置一組參數來配置swf。當頁面加載的時候,javascript會根據id來替換頁面中的節點。
程序代碼:
<p id="player"><a href="http://www.macromedia.com/go/getflashplayer">Get Flash</a> to see this player.</p>
<script type="text/javascript">
var so = new SWFObject('mediaplayer.swf','player','400','400','7');
so.addParam("allowfullscreen","true");
so.addVariable("file","test.flv");
so.addVariable("displayheight","300");
so.write('player');
</script>
在你不能使用javascript的情況下(比如你的bsp不支持,如myspace),你可以使用"embed"的方式來插入swf。
需要注意的是 swf可以不在該服務器上,但是如果你需要用xml的播放列表可能會有問題,因為xml必須和swf在同一個服務器上,否則會因為安全問題被組織。mp3,jpg,flv可以不在該服務器上。
程序代碼
<embed src="http://www.myfileserver.com/folder/mediaplayer.swf" width="400" height="400"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
flashvars="file=http://www.myfileserver.com/folder/test.flv&displayheight=300" />
2,參數
這些參數可以配置被嵌入到html中的播放器的行為和外觀。如果使用swfobject.js,可以用addVariable()方法來配置,如果使用的embed方式,可以通過定義"flashvars"屬性來配置變量,注意用"&"符號分割這些變量。
被*號標注的同樣適用於 JW Image Rotator
基本變量
displayheight(number):顯示區域的高度.控制區域最小高度是20px,當該值大於或等於swf的高度時,播放列表會自動隱藏,否這會顯示。
file*(url):要播放文件的地址。 支持單文件播放(MP3/FLV/RTMP/JPG/SWF/PNG/GIF),也支持播放列表。JW Image Rotator只支持列表
height*(number):設置swf的高度,當使用embed方式插入的時候,在embed的屬性里已經設置了。但是有時候(特別是使用IE的時候)高度會變的不確定,影響了布局,這時候需要通過該參數設置下,該值的單位是px
image(url):當你播放mp3,flv的時候,你可以通過該值設置一個預覽圖作為專輯封面,支持 JPG/SWF/PNG/GIF file. 你也可以在播放列表中對每一項進行設置。
shownavigation*(true,false):該參數僅被JW Image Rotator支持。用來顯示或隱藏圖片導航。
transition* (fade,bgfade,blocks,bubbles,circles,fluids,lines,random,slowfade): 該參數僅被JW Image Rotator支持。用來設置圖片替換的效果。 設置為"random" 將隨機的設置效果.默認值為 "fade".
width*(number):設置swf的寬度,其他同height;
顏色變量
backcolor*(color):設置播放器的背景顏色。JW Media Player等默認為 0xFFFFFF (白色) JW Image Rotator默認為 0x000000 (黑色).
fontcolor*(color):設置文字和按鈕的顏色。JW Media Player等默認為 0x000000 (黑色) JW Image Rotator默認為 0xFFFFFF (白色).
lightcolor*(color):設置被被激活狀態的顏色。JW Media Player等默認為 0x000000 (黑色) JW Image Rotator默認為 0xCC0000 (紅色).
界面參數
autoscroll(true,false):當播放列表過長的時候,默認會自動顯示滾動條。當該值設置為'true'的時候,會自動根據鼠標滾動播放列表。
displaywidth(number of pixes):設置顯示區域的寬度,當設置的比較小的時候,播放列表會顯示在顯示區域的右側而不是底部。
kenburns* (true,false): 用以實現在運動的時候實現kb效果(Ken Burns effect),注意,當圖比較大,而且網速比較快的時候,建議打開,否則關閉。建議設置transition為"slowfade"來配合。
largecontrols (true,false): 設置該值為true用來放大控制區域的按鈕。建議為視力不好的用戶打開
logo* (url): 設置一個圖片用來作為右上角的水印,支持所有圖片格式,支持通明圖層的png效果最佳。
overstretch* (true,false,fit,none): 設置圖片/影片在顯示區域的縮放。"true"等比例拉伸用來符合顯示區域。"false"僅拉伸合顯示區域。"fit"全屏顯示。"none"顯示原始 大小。JW Media Player等默認為"fit",JW Image Rotator默認為"false"
showdigits (true,false,total): 設置為"false"隱藏播放時間等信息用來節省控制區域的空間。設置為"total"用來顯示全部時間。
showdownload (true,false):設置該值用來在控制區域顯示下載按鈕。鏈接到link所設置的地址。
showeq (true,false): 用來顯示一個假的音頻波動效果。當播放mp3的時候打設置該值可以得到很好的效果
showicons* (true,false): 用來顯示或者隱藏顯示區域中間的圖片,JW Media Player等默認為true。JW Image Rotator默認為false;
showvolume (true,false): 用來設置是否顯示音量控制按鈕
thumbsinplaylist (true,false): 設置列表中是否顯示預覽圖
播放參數
autostart (true,false,muted): 設置為ture,頁面加載完后會自動播放。設置為muted,會在靜音模式下自動播放,並且顯示區域中間有靜音圖標。
bufferlength (number): 設置flv的緩存時間。默認為3秒
repeat* (true,false,list): 默認為flase,從當前播放位置播放到列表尾部后停止。設置為list會播放列表中所有的項目,設置為true會循環播放。
rotatetime* (number): 設置圖片的顯示時間。JW Media Player等默認為10秒,JW Image Rotator默認為5秒
shuffle* (true,false): 設置為false順序播放,設置為true無序播
smoothing (true,false): 設置為false關閉視頻平滑處理,推薦設置true用以得到更好效果。但對於大屏幕或者配置低的機器設置false是有好處的
start* (second): 在使用RTMP 或 HTTP 流媒體的時候(非常規的flv/mp3),使用該變量准確的定位開始位置。該參數設置在XSPE格式的列表中以便准且的設置文件的章節。
volume* (number): 設置音量,默認為80.
互動參數
audio* (url):用這個參數來添加一個mp3文件作為單獨的音頻,可以作為圖片的背景音樂解說等。
bwfile (url):用以帶寬檢測的文件的地址,可以放一個圖片,或者rtmp流媒體。可以在右鍵菜單中查看到貸款數值。
bwstreams (comma-separated list of bitrates):
和 bwfile配合使用,根據帶寬值來選擇不同的文件。如:你要播放video.flv並且設置該項的值為100,250,500,1000,當播放器發現 帶寬為349kbps的時候,將會播放video_250.flv。所以他有一套有效的命名設置,他將會自動切換,哪怕是在采用播放列表的情況下。
callback (url):設置這個參數為服務端程序(php/asp)地址用來回傳數據。在每個項播放和停止的時候會發送數據到服務器,以便在服務器端保存播放統計。
captions (url): 設置該值用以載入一個文本格式的文本作為字幕。播放器至支持SMIL格式和DVD的SRT格式的字幕。如果你的flv文件內置字體你可以設置該值 為"captionate".如果你有多頻道字幕,可以設置這個值為"captionate0", "captionate3"等。可以在列表中設置每一個項的值。
enablejs* (true,false): 設置為true打開對javascript的支持。僅支持在線使用。javascript可以控制播放,加載媒體,獲得當前播放項的詳盡信息。
fsbuttonlink (url):如果用戶的flashplayer版本高於(9.0.28)播放器會自動的顯示一個全屏按鈕。通過設置該值,你可以鏈接到另外的頁面用以全屏顯示。服務端程可以設定將要播放的文件。
id (string): 播放器的唯一標識。將會被回傳到服務器端。
javascriptid* (string):如果你的頁面上有多個播放器,你可以設置這個參數給每個播放器不同的id,這樣就可以方便的用javascript來控制。他將回傳到getUpdate()事件中。
link (url): 通過這個參數用來設置一個可現在的版本,或者強制用戶通過該地址下載當前項。可以在播放列表中為每一項設置該值。
linkfromdisplay* (true,false):設置顯示區域被點擊時要訪問的頁面。默認點擊顯示區域時會進行播放/暫停操作。
linktarget* (frame): 設置鏈接目標,"_self"在當前頁打開。"_blank"在新頁面中打開。
streamscript (url):設置這個參數為了兼容‘偽流媒體'FLV文件。
type (mp3,flv,rtmp,jpg,png,gif,swf,rbs,3gp,mp4,m4v): 播放器會根據文件名的最后三個字符來判斷類型。在你使用服務器端語言進行重定向時,這種方法將不會再有效。所以你可以設置這個參數來告訴播放器文件類型。 你也可以在播放列表中對每一項進行設置。如果播放器找不到文件類型將會被識別為播放列表。
useaudio (true,false): 設置為false用來改變為靜音狀態。
usecaptions (true,false):設置為false隱藏字幕.
usefullscreen (true,false):如果你不希望用flashplayer9的全屏模式。可以設置"fsbuttonlink"參數用來替換全屏按鈕的事件。
usekeys (true,false): 設置為"false"用來取消鍵盤操作(SPACE,UP,DOWN,LEFT,RIGHT)
repeat播放模式 :list列模式、none單曲模式、always循環模式
autostart是否自動播放:true,false
stretching縮放模式: fill按比例拉伸 uniform居中、exactfit拉伸、none無
new SWFObject(hostPlayer + "player.swf", "adPlayer", wid, hei, "9");
adPlayer.sendEvent(event); //event值 1.stop停止視頻、2. play開始
/*
*對播放器的狀態監聽,stateTracker為監聽方法在狀態改變時自動調用
*state值:1.playing播放中 2.paused停止 3.idle空閑 4. completed結束
**/
adPlayer.addModelListener("state", "stateTracker");
//播放視頻在播放列表中的索引
slPlayer.sendEvent("ITEM", i);
//設置電台容器標簽
sObj.write("slPlayerSpace");
duration視頻持續時間(播放時間)
----------------------js版jwplayer方法記載--------------------
jwplayer().getPosition();//播放了多少秒
jwplayer('playerdiv').play(); ||
jwplayer(0).play(true/false); //是否播放 0為索引
jwplayer(0). pause (true/false); //是否暫停
jwplayer(0). stop(); //停止無參
jwplayer().getBuffer(); //加載了百分之幾
jwplayer().getFullscreen();setFullscreen(state);//是否全屏
jwplayer().getMute();setMute(state)//是否靜音
jwplayer().getPlaylist()[0]['file'] ||
jwplayer().getPlaylistItem(0)['file']//獲取播放列表中索引為0項的file值
jwplayer().getWidth() jwplayer().getHeight() //寬高
jwplayer().getState()//state值:1.playing播放中 2.paused停止 3.idle空閑 4. completed結束
jwplayer().getDuration() //視頻播放結束需要的時間
jwplayer().getVolume()//聲音大小
//加載播放列表
var playlist = new Array(
{file:"video/123.mp4", image:"images/videoimg1.jpg"},
{file:"video/234.flv", image:"images/videoimg1.jpg"});
jwplayer(0).load(playlist);
jwplayer(0).playlistItem(1); //播放下標為1的視頻
jwplayer(0).playlistNext();//播放下一個視頻
jwplayer(0).playlistPrev();//播放上一個視頻
jwplayer(0).resize(width, height); //寬高
//從第(10-緩沖秒數)秒開始,緩沖(bufferlength)默認為3秒
jwplayer(0).seek(10);
events:{
onComplete: function(){ alert("播放結束!!!");},
onVolume: function(){ alert("聲音大小改變!!!"); },
onReady: function(){ alert("准備就緒!!!"); },
onPlay: function(){ alert("開始播放!!!");},
onPause: function(){ alert("暫停!!!");} --1
}
Jwplayer(0).onPause: function(){ alert("暫停!!!");} //與1等同,先執行1
//回調函數
jwplayer(0).onBufferChange( function(){ alert("緩沖改變!!!"); } );
jwplayer(0).onBufferFull(function(){ alert("視頻緩沖完成!!!");});
jwplayer(0).onError(function(obj){alert("播放器出錯!!!"+obj.message);})
jwplayer(0).onFullscreen(function(obj){
if(obj.fullscreen){alert("全屏");}
else{alert("非全屏");}
});
onMute(callback) // obj. mute是否靜音
onPlaylist(function(obj){ //視頻列表載入完成
alert(obj.playlist[0]['file']);
});
onPlaylistItem(callback) // 開始播放一個視頻時觸發obj. index為視頻索引
onReady(callback) //准備就緒
onResize(callback) //obj.width obj.height 寬高
//進入播放時觸發obj.oldstate 值:從BUFFERING PAUSE狀態進入播放狀態
onPlay(callback)
//進入暫停obj.oldstate 值1:從PLAYING BUFFERING狀態進入暫停
onPause(callback)
onBuffer(callback) //進入加載obj.oldstate 值PLAYING, PAUSED or IDLE
onIdle(callback) //進入空閑obj.oldstate 值PLAYING, PAUSED or BUFFERING.
onComplete(callback) //結束播放
onVolume(callback) //obj.volume