姚 軍

（石家莊職業(yè)技術(shù)學(xué)院 現(xiàn)代教育技術(shù)中心，河北 石家莊 050081）

近年來，隨著通信技術(shù)、網(wǎng)絡(luò)技術(shù)和媒體技術(shù)的飛速發(fā)展，用戶可以通過訪問網(wǎng)站的網(wǎng)頁來觀看視頻.這就要求網(wǎng)頁中含有播放器，能在線播放視頻和音樂.要成為合格的網(wǎng)絡(luò)播放器，需要滿足以下條件：（1）支持所有主流瀏覽器.（2）提供必要的 API.（3）可定制外觀，方便后期擴展.（4）支持flv，mp3和mp4格式，支持播放列表.（5）有詳盡的幫助文檔說明.

用戶在觀看視頻的過程中操作網(wǎng)頁播放器，會對服務(wù)器端產(chǎn)生較大的影響，有可能導(dǎo)致播放效果不佳，出現(xiàn)播放時卡、頓、緩沖時間長等現(xiàn)象.要使用戶的操作不過多地增加對服務(wù)器的影響，網(wǎng)頁播放器可以采用ActiveX技術(shù)實現(xiàn).使用此技術(shù)可以把流媒體播放器控件嵌入到網(wǎng)頁中，用編程語言對控件進行設(shè)置，從而實現(xiàn)在線視頻播放功能.但這種方法的缺點是用戶機必須安裝該播放器才能使用，且播放視頻的頁面和原來的網(wǎng)頁不在同一頁面上，使用起來很不方便.因此，網(wǎng)頁上最好能自帶播放器.JW Player容易擴展和融入網(wǎng)站，或連接到第三方服務(wù)器，使用它作為網(wǎng)頁自帶播放器可避免上述問題的發(fā)生，且它能滿足網(wǎng)絡(luò)播放器的所有條件.本文主要研究如何將JW Player應(yīng)用于網(wǎng)頁中.

1 關(guān)鍵技術(shù)

1.1 JW Player

JW Player是一款非常優(yōu)秀的開源網(wǎng)頁媒體播放器，支持 H.264（.mp4，.mov，.f4v），F(xiàn)LV（.flv），3GPP（.3gp，.3g2），OGG Theora（.ogv）和 WebM（.webm）視頻格式；MP3（.mp3），AAC（.aac，.m4a），OGG Vorbis（.ogg）和 WAV（.wav）音頻格式；swf、圖片（gif，jpg，png）和 YouTube格式視頻；支持HTML5，有非常豐富的可用插件［1］.

在使用JW Player的過程中，可以根據(jù)需要對參數(shù)進行設(shè)置，如播放器的大小、是否添加預(yù)覽圖片、播放器外觀樣式等.

1.2 JavaScript

JavaScript是一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言.常用來給HTML網(wǎng)頁添加動態(tài)功能，比如響應(yīng)用戶的各種操作，是一種動態(tài)、弱類型、基于原型的語言.

目前流行的Jquery，Ext和prototype都基于Javascript框架，各自包含一個強大的JavaScript類庫.

將JW Player技術(shù)與JavaScript技術(shù)相結(jié)合，即可將JW Player應(yīng)用于網(wǎng)頁中.

2 流程圖

JW Player媒體播放器的應(yīng)用流程見圖1.

3 步驟

3.1 項目工程引用JW Player

用戶訪問JW Player官方網(wǎng)站，地址為http：／／www.jwplayer.com，下載JW Player播放器，將下載后的文件進行解壓，如圖2.

圖1 流程圖

圖2 JW Player解壓后包含的文件

將解壓后的文件jwplayer.js和player.swf復(fù)制到工程目錄下.需要注意的是，后續(xù)操作中要引用這兩個文件，其引用的地址要和目錄結(jié)構(gòu)相對應(yīng).如圖3.

圖3 項目工程引用JW Player

3.2 頁面head區(qū)域引用必要的js文件

網(wǎng)頁中的＜head＞標(biāo)簽之間通過script標(biāo)簽引用jwplayer播放器的腳本文件.但需要注意目錄的結(jié)構(gòu)層次，其代碼為：

3.3 頁面body區(qū)域結(jié)構(gòu)

在網(wǎng)頁中，＜body＞標(biāo)簽是頁面中心區(qū)域代碼.頁面中要顯示什么內(nèi)容，都要在其標(biāo)簽中書寫相應(yīng)的代碼.要在頁面中顯示JWplayer播放器，就需要先通過＜script＞標(biāo)簽引用JWplayer，再根據(jù)JavaScript語言規(guī)范，定義設(shè)置JWplayer播放器.其代碼為：

執(zhí)行代碼，即可實現(xiàn)JW Player在網(wǎng)頁中的應(yīng)用.

4 演示效果

采用上述代碼將媒體播放器JW Player嵌入網(wǎng)頁后，其操作的初始頁面效果見圖4.

圖4 初始頁面效果圖

點擊播放按鈕后，其顯示的頁面效果見圖5.

圖5 播放頁面效果圖

通過相應(yīng)的按鈕可以實現(xiàn)播放暫停、聲音大小調(diào)整、播放進度控制及是否全屏的功能.

5 結(jié)束語

網(wǎng)頁通過JavaScript引用JW Player播放器，實現(xiàn)各種視頻文件在線播放的功能.用戶端無須安裝任何播放器，大大降低了對服務(wù)器端的影響.當(dāng)然，該播放器還存在一些不足，如遇到視頻文件較大時（即便是同一文件，文件格式不同，文件大小的差別也很大），受網(wǎng)絡(luò)帶寬限制，在使用過程中播放器的加載速度較慢.這還有待于今后進一步優(yōu)化.

［1］JW Player官網(wǎng).JW Player播放器 ［EB／OL］.（2005－01－01）［2013－07－23］.http：／／www.jwplayer.com.