国产日韩欧美一区二区三区三州_亚洲少妇熟女av_久久久久亚洲av国产精品_波多野结衣网站一区二区_亚洲欧美色片在线91_国产亚洲精品精品国产优播av_日本一区二区三区波多野结衣 _久久国产av不卡

?

使用jPlayer構建音頻和視頻多媒體網(wǎng)站探析

2012-04-18 02:47歐群雍
吉林廣播電視大學學報 2012年12期
關鍵詞:播放器插件瀏覽器

歐群雍

(鄭州華信學院,河南 鄭州 424204)

隨著數(shù)字化時代的來臨,圖像、聲音、視頻等多媒體技術也有了較為成熟的發(fā)展,在網(wǎng)頁設計中發(fā)揮著重要的作用。一個文字、圖像、聲音、視頻結合良好的多媒體網(wǎng)站能夠生動地向網(wǎng)站訪問者提供互動良好的體驗效果,提高網(wǎng)站內容可讀性;對于企業(yè)來說,通過多媒體網(wǎng)站可以減少昂貴的印刷、壓制光碟和郵寄等開支,真正做到小投入大回報;多媒體網(wǎng)站對于企業(yè)的形象的提高也起到不可估量的作用。

一、構建音頻多媒體網(wǎng)站中常見方法

在網(wǎng)頁中插入音頻和視頻等多媒體元素的方法很多,常見的方法有以下幾種:

1.使用標簽

標簽是用以插入背景音樂,但只適用于Internet Explorer瀏覽器,在netscape和firefox瀏覽器中并不適用。該標簽共有 balance、delay、loop、src、volume 五個屬性,用于設置音樂左右均衡、播放延時、循環(huán)播放次數(shù)、音樂文件的路徑及音量大小,通常在網(wǎng)頁中添加背景音樂僅需要src、loop等幾個主要的參數(shù)。例如:在網(wǎng)頁中需要反復播放“music.mp3”的代碼為:。其中,src="music.mp3"指定了要播放的文件,loop="-1"表示音樂無限循環(huán)播放。標簽可設定參數(shù)很少,對于多個音樂文件連播及音樂播放、暫停、停止等操作不易實現(xiàn),且只能支持特定的瀏覽器,其局限性是顯而易見的。

2.使用標簽

標簽用于Internet Explorer3.0及以后瀏覽器或者其它支持Activex控件的瀏覽器。它可以使網(wǎng)頁包含指定的對象,比如圖像、音頻、視頻等。標簽通常與標簽一同使用,需要指定的屬性較多。使用標簽在網(wǎng)頁中自動播放“music.mp3”的代碼為:。標簽也只能支持特定的瀏覽器,依賴于Activex控件很容易實現(xiàn)音樂播放、暫停、停止等操作,但瀏覽器必須有相關Activex控件支持,兼容性不強。

3.使用標簽

標簽是用于Netscape Navigator2.0及以后的瀏覽器或其它支持Netscape插件的瀏覽器。的功能也非常強大,屬性也很多。它的使用方法與第一種基本一樣,自動且循環(huán)播放“music.mp3”的代碼為:。其中autostart用來設置打開頁面時音樂是否自動播放,而hidden設置是否隱藏媒體播放器。標簽是html5標簽,要求較新的瀏覽器才能較好的支持,它依賴于插件很容易實現(xiàn)音樂播放、暫停、停止等操作,但瀏覽器必須有相關插件支持,根據(jù)插入多媒體元素的不同而指定的“pluginspage”屬性。

使用上述方法可以網(wǎng)頁中插入音頻或視頻,但也有許多局限性,而jPlayer很好的解決了這些問題。

二、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ù)或選項限于篇幅不再列舉。

三、jPlayer應用

以簡單的網(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).

猜你喜歡
播放器插件瀏覽器
自編插件完善App Inventor與樂高機器人通信
Walkman誕生40周年 索尼適時發(fā)布NW-ZX500和NW-A100系列播放器
反瀏覽器指紋追蹤
基于STM32的MP3播放器設計
Moon ACE播放器/放大器一體機
基于jQUerY的自定義插件開發(fā)
環(huán)球瀏覽器
MapWindowGIS插件機制及應用
播放器背板注塑模具設計
基于Revit MEP的插件制作探討