使用jPlayer構(gòu)建音頻和視頻多媒體網(wǎng)站探析
2012-04-18 02:47:13歐群雍
吉林廣播電視大學(xué)學(xué)報(bào) 2012年12期
關(guān)鍵詞：多媒體
歐群雍
（鄭州華信學(xué)院，河南 鄭州 424204）
隨著數(shù)字化時(shí)代的來臨，圖像、聲音、視頻等多媒體技術(shù)也有了較為成熟的發(fā)展，在網(wǎng)頁設(shè)計(jì)中發(fā)揮著重要的作用。一個(gè)文字、圖像、聲音、視頻結(jié)合良好的多媒體網(wǎng)站能夠生動(dòng)地向網(wǎng)站訪問者提供互動(dòng)良好的體驗(yàn)效果，提高網(wǎng)站內(nèi)容可讀性；對于企業(yè)來說，通過多媒體網(wǎng)站可以減少昂貴的印刷、壓制光碟和郵寄等開支，真正做到小投入大回報(bào)；多媒體網(wǎng)站對于企業(yè)的形象的提高也起到不可估量的作用。
一、構(gòu)建音頻多媒體網(wǎng)站中常見方法
在網(wǎng)頁中插入音頻和視頻等多媒體元素的方法很多，常見的方法有以下幾種：
1.使用標(biāo)簽
2.使用
3.使用
使用上述方法可以網(wǎng)頁中插入音頻或視頻，但也有許多局限性，而jPlayer很好的解決了這些問題。
二、jPlayer基礎(chǔ)
jPlayer是個(gè)用JavaScript寫的完全免費(fèi)和開源的用于控制和播放mp3、mp4等音頻和視頻文件的jQuery插件。它在后臺根據(jù)訪問該網(wǎng)站的瀏覽器不同而選擇Flash或html5代碼來播放mp3、mp4等文件，前臺播放器外觀完全可以使用XHML/CSS自定義，用它可以選擇需要播放的mp3文件，實(shí)現(xiàn)播放、暫停、停止、音量等控制，獲取播放進(jìn)度等信息。
使用jPlayer之前，先從“http://www.jplayer.org/download/”網(wǎng)站上下載“jQuery.jPlayer”插件，里面含有“Jplayer.swf”和“jquery.jplayer.min.js”兩個(gè)文件，這兩個(gè)文件必須上傳到網(wǎng)站目錄中，如果需要的話，也可以通過創(chuàng)建選項(xiàng)swfPath來更改路徑。
jPlayer插件中的jPlayer構(gòu)造器“$(id).jPlayer(Ob－ject:options):jQuery”作用是當(dāng)用戶給定一個(gè)id后,就會創(chuàng)建用戶提供的選項(xiàng)。jPlayer使用的層必須要是空的,并且其它的應(yīng)用都不能使用。jPlayer提供許多函數(shù)或選項(xiàng)，其中ready函數(shù)為jPlayer指定一個(gè)將要使用的可用mp3、mp4等文件，而swfPath設(shè)置字符串用于定義jPlayer的“Jplayer.swf”文件的相對或絕路徑，、volume 參數(shù)用于按百分比定義音量。其他函數(shù)或選項(xiàng)限于篇幅不再列舉。
三、jPlayer應(yīng)用
以簡單的網(wǎng)頁音頻播放器為例，簡要闡述jPlayer應(yīng)用，在這個(gè)例子中，可以實(shí)現(xiàn)播放、暫停、停止、靜音和取消靜音。
第一步，先建立網(wǎng)頁音頻播放器的HTML的文件player.html，在HTML的標(biāo)簽中加上以下代碼：
第二步，建立main.js，把它放到Js目錄下。在main.js中指定了要播放的歌曲為“media/music.mp3”，指定“Jplayer.swf”文件的路徑為“swf”目錄下，并實(shí)現(xiàn)了歌曲自動(dòng)播放等操作。
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready:function(){
$(this).jPlayer("setMedia",{
mp3:"media/music.mp3",
}).jPlayer("play");//實(shí)現(xiàn)自動(dòng)播放
},
ended:function(event){
$(this).jPlayer("play");
},
swfPath:"swf",
supplied:"mp3"
})
.bind($.jPlayer.event.play,function(){//切換歌曲
$(this).jPlayer("pauseOthers");
});
});
第三步，引入所需要的文件。
建立main.css，把它放到css目錄下，CSS樣式代碼如下：
body{background:#eee;font-family:Verdana,Helvetica,Arial,sans-serif;margin:0;padding:0}
.example {background:#FFF;width:1000px;height:500px;font-size:80%;border:1px#000 solid;margin:0.5em 10%0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}
.example.players{float:left;margin:10px}
把“Jplayer.swf”放到 swf目錄下面。
把測試用的多媒體播放文件“music.mp3”放置在“media”下面。
把下載下來的Jplayer壓縮包解壓縮到j(luò)s目錄下。
完成上述步驟后，打開“player.html”文件，即可欣賞“music.mp3”這個(gè)曲子了，還可以對這首曲子進(jìn)行暫停、停止、暫停等操作。
四、結(jié)語
利用jPlayer插件可以輕松構(gòu)建音頻和視頻多媒體網(wǎng)站，對于音頻和視頻的播放、暫停、停止、靜音等各種操作，jPlayer插件已經(jīng)提供，我們只需設(shè)計(jì)網(wǎng)站，在網(wǎng)站中引入jPlayer插件即可，而且jPlayer插件是兼容性很好，基本上瀏覽器兼容性這塊不用考慮的。
[1]張曉蕓，楊明.淺談多媒體網(wǎng)頁的設(shè)計(jì)[J].科技風(fēng)，2009，(6).
[2]李安斌，曹巨江.新媒體時(shí)代的網(wǎng)頁設(shè)計(jì)[J].藝術(shù)與設(shè)計(jì)(理論)，2009，(9).
[3]隋涌.網(wǎng)頁布局之形式原理與設(shè)計(jì)要素[J].北京印刷學(xué)院學(xué)報(bào)，2007，(3).
猜你喜歡
名師在線·上旬刊(2021年3期)2021-09-10 04:20:48
甘肅教育(2020年21期)2020-04-13 08:09:26
電子制作(2019年22期)2020-01-14 03:16:28
時(shí)代人物(2019年29期)2019-11-25 01:35:20
消費(fèi)導(dǎo)刊(2018年10期)2018-08-20 02:56:28
中國教育技術(shù)裝備(2016年11期)2016-12-01 06:52:45
網(wǎng)絡(luò)空間安全(2016年3期)2016-06-15 20:27:08
中小學(xué)電教(2016年3期)2016-03-01 03:40:51
河南電力(2016年5期)2016-02-06 02:11:40
中國教育技術(shù)裝備(2015年21期)2015-03-11 20:16:04
