歐群雍
(鄭州華信學院,河南 鄭州 424204)
隨著數(shù)字化時代的來臨,圖像、聲音、視頻等多媒體技術也有了較為成熟的發(fā)展,在網(wǎng)頁設計中發(fā)揮著重要的作用。一個文字、圖像、聲音、視頻結合良好的多媒體網(wǎng)站能夠生動地向網(wǎng)站訪問者提供互動良好的體驗效果,提高網(wǎng)站內容可讀性;對于企業(yè)來說,通過多媒體網(wǎng)站可以減少昂貴的印刷、壓制光碟和郵寄等開支,真正做到小投入大回報;多媒體網(wǎng)站對于企業(yè)的形象的提高也起到不可估量的作用。
在網(wǎng)頁中插入音頻和視頻等多媒體元素的方法很多,常見的方法有以下幾種:
使用上述方法可以網(wǎng)頁中插入音頻或視頻,但也有許多局限性,而jPlayer很好的解決了這些問題。
jPlayer是個用JavaScript寫的完全免費和開源的用于控制和播放mp3、mp4等音頻和視頻文件的jQuery插件。它在后臺根據(jù)訪問該網(wǎng)站的瀏覽器不同而選擇Flash或html5代碼來播放mp3、mp4等文件,前臺播放器外觀完全可以使用XHML/CSS自定義,用它可以選擇需要播放的mp3文件,實現(xiàn)播放、暫停、停止、音量等控制,獲取播放進度等信息。
使用jPlayer之前,先從“http://www.jplayer.org/download/”網(wǎng)站上下載“jQuery.jPlayer”插件,里面含有“Jplayer.swf”和“jquery.jplayer.min.js”兩個文件,這兩個文件必須上傳到網(wǎng)站目錄中,如果需要的話,也可以通過創(chuàng)建選項swfPath來更改路徑。
jPlayer插件中的jPlayer構造器“$(id).jPlayer(Ob-ject:options):jQuery”作用是當用戶給定一個id后,就會創(chuàng)建用戶提供的選項。jPlayer使用的層必須要是空的,并且其它的應用都不能使用。jPlayer提供許多函數(shù)或選項,其中ready函數(shù)為jPlayer指定一個將要使用的可用mp3、mp4等文件,而swfPath設置字符串用于定義jPlayer的“Jplayer.swf”文件的相對或絕路徑,、volume 參數(shù)用于按百分比定義音量。其他函數(shù)或選項限于篇幅不再列舉。
以簡單的網(wǎng)頁音頻播放器為例,簡要闡述jPlayer應用,在這個例子中,可以實現(xiàn)播放、暫停、停止、靜音和取消靜音。
第一步,先建立網(wǎng)頁音頻播放器的HTML的文件player.html,在HTML的標簽中加上以下代碼:
第二步,建立main.js,把它放到Js目錄下。在main.js中指定了要播放的歌曲為“media/music.mp3”,指定“Jplayer.swf”文件的路徑為“swf”目錄下,并實現(xiàn)了歌曲自動播放等操作。
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready:function(){
$(this).jPlayer("setMedia",{
mp3:"media/music.mp3",
}).jPlayer("play");//實現(xiàn)自動播放
},
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壓縮包解壓縮到js目錄下。
完成上述步驟后,打開“player.html”文件,即可欣賞“music.mp3”這個曲子了,還可以對這首曲子進行暫停、停止、暫停等操作。
利用jPlayer插件可以輕松構建音頻和視頻多媒體網(wǎng)站,對于音頻和視頻的播放、暫停、停止、靜音等各種操作,jPlayer插件已經提供,我們只需設計網(wǎng)站,在網(wǎng)站中引入jPlayer插件即可,而且jPlayer插件是兼容性很好,基本上瀏覽器兼容性這塊不用考慮的。
[1]張曉蕓,楊明.淺談多媒體網(wǎng)頁的設計[J].科技風,2009,(6).
[2]李安斌,曹巨江.新媒體時代的網(wǎng)頁設計[J].藝術與設計(理論),2009,(9).
[3]隋涌.網(wǎng)頁布局之形式原理與設計要素[J].北京印刷學院學報,2007,(3).