JW Player使用簡(jiǎn)介
雜項 2009-10-20 23:07:45 閱讀15674 評論92
字號：大中小
一、JW Player是什么？
簡(jiǎn)單地說(shuō)，JW Player是一種基于flash的交互式網(wǎng)頁(yè)媒體播放器。它是由Jeroen 和 Wijering共同建立的LongTail Video所開(kāi)發(fā)，問(wèn)世于2005年，當時(shí)仍名不經(jīng)傳的YouTube首次采用的播放器就是JW Player。官方網(wǎng)址：
http://www.longtailvideo.com/。
JW Player含：FLV Player、WMV Player、Image Rotator和Desktop Player四種，除了最后一種實(shí)為桌面播放器，其他三種都是網(wǎng)頁(yè)播放器。本篇內容僅限FLV Player。
二、JW FLV Media Player簡(jiǎn)介
JW FLV Media Player可播放Adobe Flash Player所支持的媒體，具體包括：FLV、MP4、MP3、AAC、JPG、PNG和GIF等，還支持RTMP、HTTP、實(shí)時(shí)視頻流、各種播放清單格式、靈活的設置和廣泛的javascript API。此外它還提供多種外觀(guān)、功能性插件來(lái)擴展播放器，以便我們可以分享、推薦、搜索、分析甚至廣告投放。
目前（2009-10-20）最新的版本是4.6版。
三、安裝
JW Player可安裝在網(wǎng)絡(luò )空間，我從未如此運用過(guò)，而是上傳到我的網(wǎng)盤(pán)，因此本篇的介紹也是基于此種情況，而列為看官當然懂得如何觸類(lèi)旁通。另外，我們一定要選擇可以直鏈的網(wǎng)盤(pán)上傳（本篇的示例網(wǎng)盤(pán)是MyOtherDrive），何謂“直鏈”，即外鏈地址以完整的文件名為結尾（含.后綴名），如
http://www.xxx.com/xxx.mp3。
下載來(lái)的文件是zip壓縮包，解壓之后可以看到內含以下文件：
2、將player.swf和swfobject.js這兩個(gè)文件上傳到網(wǎng)盤(pán)（建議在網(wǎng)盤(pán)上為它們單獨建立一個(gè)文件夾，本篇示例文件夾JW Player），安裝即告完畢，就這么簡(jiǎn)單！
四、使用設置向導
設置向導提供兩種代碼：默認的Swfobject 1.5 Code（即JavaScripting）和Embed Code。我沒(méi)有機會(huì )運用Swfobject 1.5 Code，因此本篇只介紹Embed Code。
前面我提到過(guò)生成的代碼要稍作修正：為了方便在網(wǎng)頁(yè)小窗口瀏覽生成的代碼，官網(wǎng)給出的代碼是按各項參數分行了的，如果復制后就直接粘貼，可能會(huì )使播放器不能正常工作，我建議先把代碼復制到“記事本”后，刪除段落標記，注意每項參數之間還要保留一個(gè)空格位，再復制到空間或博客。
Embed 代碼的格式一般是這樣：參數1=”參數值” 參數2=”參數值” ……參數n=”參數值”>。
1、設置向導概覽
（點(diǎn)擊打開(kāi)大圖）
特別注意：如果你的網(wǎng)址參數值帶有“?”、“=”和“&”這三個(gè)字符，必須先轉換再填寫(xiě)，如下：
“?”轉換為“%3F”
“=”轉換為“%3D”
“&”轉換為“%26”
例如：原網(wǎng)址為：getplaylist.php?id=123&type=flv，轉換后為：getplaylist.php%3Fid%3D123%26type%3Dflv。
2、選擇模板
官網(wǎng)為我們提供了多達21種模板，每選擇一種模板，下面的參數值和播放器預覽將自動(dòng)更新。雖然大部分模板今后我們恐怕幾乎用不上，我還是建議新手一定要把每一種模板都點(diǎn)擊一下，再好好體會(huì )下面的參數值，這既有助于我們領(lǐng)會(huì )眾多參數所代表的含義，還可以在播放器預覽直接看到參數所體現的效果。
模板其實(shí)就是一件半成品，熟悉模板還可以讓我們快速而準確地挑選最接近成品的模板，善用模板將大大提高效率。
需要多費口舌的是帶播放清單模板“flvplayer with an rss playlist”，這個(gè)留待后面談flie參數時(shí)再詳細介紹。
3、嵌入參數
嵌入參數有三個(gè)內容：
*swf來(lái)源：填寫(xiě)我們之前上傳到網(wǎng)盤(pán)player.swf的直鏈地址
*播放器高度：填寫(xiě)pix（像素）值或瀏覽窗口百分比
*播放器寬度：填寫(xiě)pix（像素）值或瀏覽窗口百分比
如果高度和寬度填寫(xiě)的是百分比，那么播放器的大小是彈性的，它將隨瀏覽器窗口和所在網(wǎng)頁(yè)留給播放器窗口的大小而變化。
4、媒體文件屬性參數
*媒體作者：填寫(xiě)媒體作者名字
*媒體描述：媒體的文字描述
*字幕：XML字幕文件的鏈接地址（XML字幕文件也是一個(gè)大話(huà)題，將另文介紹）
*持續時(shí)間：媒體播放的持續時(shí)間（秒）
*媒體文件：媒體文件或XML播放清單的鏈接地址
我們要面對的模板其實(shí)可以歸于兩大類(lèi)：一是播放單文件媒體；二是播放多文件媒體。單文件媒體好辦，直接在參數file告訴播放器媒體文件的所在地址既可。如果要播放多文件媒體，那就要把所有媒體文件按順序組織起來(lái)，并保存為XML文件（可以用“記事本”打開(kāi)和編輯） ，這就是XML播放清單，而file參數就填上這個(gè)XML文件的鏈接地址。JW Player支持的播放清單格式有：XSPF、RSS（itunes、media）、ASX、ATOM。
關(guān)于XML播放清單見(jiàn)我的另一篇介紹文章《JW Player之XML播放清單簡(jiǎn)介》。
請注意，JW Player是以文件后綴名來(lái)判斷媒體類(lèi)別，如果播放器沒(méi)有找到合適的后綴名，它將假定載入的是播放清單。
*預覽圖像：預覽圖片的鏈接地址
何謂“預覽圖像”？當播放器停止播放時(shí)，它顯示的圖像。
外部鏈接地址：當填寫(xiě)此項參數值后，播放器的控制面板將多出一個(gè)鏈接按鈕，點(diǎn)擊可以打開(kāi)外部鏈接網(wǎng)頁(yè)。請看截圖：
*開(kāi)始時(shí)間：定位從第幾秒開(kāi)始播發(fā)，僅對HTTP / RTMP流媒體有效。
*媒體標題：如果你將播放器設置成帶播放清單（Playlist），媒體標題將出現在播放清單。
*媒體類(lèi)別：一般來(lái)說(shuō)JW Player可以根據媒體文件后綴名自動(dòng)判斷媒體類(lèi)別，如果沒(méi)有后綴名，或者媒體來(lái)自流媒體服務(wù)器，你可以手動(dòng)設置媒體類(lèi)別?？蛇x擇的參數如下：
video： FLV / MP4視頻,也適用于 AAC 音頻
sound： MP3
image： JPG/GIF/PNG 圖像
youtube： 來(lái)自YouTube的視頻
http： 來(lái)自HTTP服務(wù)器的FLV/MP4 流媒體
rtmp： 來(lái)自RTMP服務(wù)器的FLV/MP4/MP3流媒體
5、播放器顏色參數
* backcolor：控制面板和播放清單的背景顏色（默認為白色）
* frontcolor：控制面板和播放清單所有圖標和文字顏色
* lightcolor：鼠標懸停于播放清單時(shí)，圖標和文字顯示顏色
* screencolor：播放屏幕的背景顏色
6、播放器布局參數
*controlbar：控制面板放置位置：底部bottomd（默認）、覆蓋over、無(wú)none。如果選擇覆蓋，只有鼠標懸停于播放屏幕，或者停止播放時(shí)，才會(huì )出現控制面板，此時(shí)控制面板出現于播放屏幕的底部。
*logo：填寫(xiě)logo圖片（JPG/PNG/GIF）的直鏈地址。當采用默認皮膚時(shí)，Logo圖像會(huì )顯示于屏幕的右上角。
*playlist：播放清單放置位置：無(wú)none（默認）、底部bottom、覆蓋over、右邊right、左邊left、頂部top。
*playlistsize：填寫(xiě)播放清單顯示尺寸，默認180pix。當播放清單置于底部或頂部時(shí)，該值代表高度；當播放清單置于左邊或右邊時(shí)，該值代表寬度；當播放清單置于覆蓋時(shí)，播放清單將在停止播放時(shí)才出現，并覆蓋全部播放屏幕，且不受該值影響。
*dock：默認不顯示dock。這個(gè)我確實(shí)不知道如何翻譯，用過(guò)蘋(píng)果操作系統的朋友應該知道那是什么。JW Player 4.5版以后支持dock。dock實(shí)際上就是某些插件（plugins）以圖標的形式顯示于屏幕的右側，從上往下排列，具體哪些插件（例如：語(yǔ)音解說(shuō)audiodescription，字幕caption等插件）支持dock，我尚不清楚。請看截圖吧：
請你們特別注意，不同的皮膚，其播放清單顯示的具體內容會(huì )有所增減。
7、播放器行為參數
*autostart：自動(dòng)播放，默認無(wú)false。
*bufferlength：緩沖時(shí)長(cháng)（秒），默認1秒。設置開(kāi)始播放前預先緩沖的時(shí)長(cháng)，設置時(shí)長(cháng)短可以及時(shí)播放，設置時(shí)長(cháng)長(cháng)則可以減少中斷。
*displayclick：點(diǎn)擊動(dòng)作，默認為播放play。設置點(diǎn)擊屏幕時(shí)播放器的行為：播放（默認）play，鏈接link，切換到全屏fullscreen，無(wú)任何行為none，靜音mute，下一個(gè)曲目next。當選擇“無(wú)任何行為none”時(shí)，鼠標點(diǎn)擊手勢不會(huì )出現于屏幕。
*icons：緩沖圖標，默認顯示true。
*item：開(kāi)始播放曲目，默認為0。注意：JW Player認為播放清單第一個(gè)曲目的順序號為“0”。
*mute：以靜音開(kāi)始，默認無(wú)false。該選擇將會(huì )保存在瀏覽器的cookie。
*quality：回放品質(zhì)，默認高品質(zhì)true。
*repeat：重復方式，默認無(wú)none。list：播放清單的所有曲目都完整播放一遍。always：重復循環(huán)播放。
*shuffle：亂序播放，默認無(wú)false。設置是否按播放清單的順序播放，或者亂序播放。
*stretching：圖片延展方式。none：不延展；exactfit：不鎖定高寬比填滿(mǎn)屏幕；fill：鎖定高寬比填滿(mǎn)屏幕；默認uniform：鎖定高寬比，以黑色填充空白部分。
*volume：音量值，默認90。參數可以填寫(xiě)0-100之間的整數值，并將存放在瀏覽器的cookie。
8、外部通訊參數
*linktarget：鏈接目標。當我們在“媒體文件屬性 — 外部鏈接地址”參數里填寫(xiě)了外部鏈接地址之后，這個(gè)參數就用于設置外部鏈接打開(kāi)的方式：默認“_blank”，即在新窗口打開(kāi)鏈接，或者“_self”，即在原窗口打開(kāi)鏈接。
*plugins：插件，插件是播放器的擴展，使播放器具有更多的外觀(guān)和功能，官方提供的插件詳見(jiàn)：
http://www.longtailvideo.com/AddOns/。官方把所有插件分為三類(lèi)：皮膚skin、插件plugins和組件modules。皮膚插件我之前已有介紹，它們實(shí)際上是swf文件，使用前要先上傳到網(wǎng)絡(luò )空間或網(wǎng)盤(pán)，運用皮膚插件也不在此設置，而是在皮膚“skin”參數中設置。組件modules本篇亦不打算涉及。那么以我的理解，在此的plugins應該是功能性的插件。
需要注意的是某些plugins是需要付費購買(mǎi)的，比如廣告plugins “Adtonomy Text Ads (Run Your Own Ads)”：
如果是免費plugins，一般會(huì )給出參數值，直接填寫(xiě)就可以加載了。以字幕plugins “captions”為例：
要加載多個(gè)plugins，請在參數值之間用英文的逗號“,”隔開(kāi)，如圖：
9、預覽你的播放器
當需要填寫(xiě)的參數都填寫(xiě)完之后，請點(diǎn)擊“更新預覽和代碼（Update Preview & Code）”，其下的“預覽你的播放器（Preview Your Player）”和“復制你的代碼（Copy Your Code）” 將根據你的參數而改變，你可以實(shí)時(shí)看到效果。
10、復制你的代碼
在前面我曾經(jīng)提到：為了方便在網(wǎng)頁(yè)小窗口瀏覽生成的代碼，設置向導給出的代碼是按各項參數分行了的，如果復制后就直接粘貼，可能會(huì )使播放器不能正常工作，我建議先把代碼復制到“記事本”后，刪除段落標記，注意每項參數之間還要保留一個(gè)空格位，再復制到空間或博客。
仔細觀(guān)察設置向導給出的Embeded代碼，它們大致可以分為以下幾項：
*src：（已介紹）
*width：（已介紹）
*height：（已介紹）
*allowscriptaccess：這是Adobe Falsh Player 6.0以后開(kāi)始支持的參數。這個(gè)參數是控制在HTML網(wǎng)頁(yè)中，swf的ActionScript是否允許調取JavaScript，它有三個(gè)選項：
·總是允許always：默認值，一般保持默認即可。
·只允許同域名sameDomain：僅當SWF文件與HTML網(wǎng)頁(yè)來(lái)自同一域名時(shí)才允許調取。
·不允許never。
*allowfullscreen：是否允許切換到全屏，默認是允許true。
*flashvars：即flash變量。我們可以發(fā)現絕大部分用戶(hù)對JW Player的個(gè)性定制都體現在這里，定制得越具體，這個(gè)參數包含的內容就越復雜。
我們可以看到，設置向導給出參數的格式是這樣的：
flashvars='變量1=變量值&變量2=變量值&變量3=變量值&……變量n=變量值'
我建議把“&”改為“&”！
修改之后就是這樣：
flashvars='變量1=變量值&變量2=變量值&變量3=變量值&……變量n=變量值'
全選框內的文本并刪除：
將設置向導給出的Embeded代碼復制進(jìn)來(lái)，再次點(diǎn)擊左上角的“源碼”按鈕：
點(diǎn)擊之后是這樣：
再點(diǎn)擊一次左上角的“源碼”按鈕，此時(shí)框內的代碼已被修正了：
五、補充說(shuō)明
1、如果要商業(yè)性地使用JW Player，必須向官方購買(mǎi)許可，比如：
*帶廣告的站點(diǎn)
*由商業(yè)機構擁有或運營(yíng)的站點(diǎn)
*用于產(chǎn)品推廣的站點(diǎn)
*提供捆綁有LongTail產(chǎn)品的產(chǎn)品
如果要播放的媒體文件的域名與swf文件、播放清單文件的域名不一致，插件無(wú)法加載。
4、更正一點(diǎn)：JW FLV Player支持XML和SRT兩種字幕文件。
跋
1、限于本人的水平和精力，本篇僅僅是對JW FLV Player非常粗淺的介紹，例如皮膚設計、plugins的開(kāi)發(fā)、API Calls、RTMP/HTTP Streaming、Crossdomain security以及JW Player家族中其他在線(xiàn)播放器如：WMV Player、Image Rotator等都沒(méi)有涉及。
2、本篇介紹如與LongTailVideo官網(wǎng)有不一致之處，以官網(wǎng)為準。
3、雖然本篇介紹是應老胡的請求而寫(xiě)的，其實(shí)最大的受益者卻是本人。為了完成這篇介紹文章，促使本人更深入地去學(xué)習這款非常值得研究的播放器，孔子說(shuō)：“學(xué)而時(shí)習之，不亦悅乎？”自己親身實(shí)踐帶來(lái)的快感遠遠不是由別人灌輸給你的所能比擬的！
4、近一段時(shí)間我還特別去學(xué)習了字幕插件，在介紹XML播放清單之后，我會(huì )把我學(xué)習字幕插件的心得分享給你們。在介紹字幕插件時(shí)，我將會(huì )涉及插件如何再附加其他參數，還會(huì )提到dock，因為碰巧字幕插件支持dock。同樣的，當我搞清楚JW FLV Player的字幕插件之后，那種喜悅也是難以言表。
