基于jQuery的網頁影音播放器jPlayer的基本使用教程_jquery

想在網頁上播放背景音樂，不想用html標簽的方式，因為那樣只有音樂全部下載完以后才能播放，還容易出現跨瀏覽器兼容性的問題，于是選了一款基于jQuery的播放器jPlayer來做。

設置jPlayer的尺寸大小
使用構造函數配置jPlayer({size:Object})設置jPlayer的高寬。

使用構造函數配置jPlayer({sizeFull:Object})設置全屏尺寸。

注意可通過構造函數配置jPlayer({backgroundColor:"#RRGGBB"})設置jPlayer背景顏色。

Flash 安全規則
使用下面的代碼放寬了對jPlayer SWF 文件的限制，并且可以調用任何域名的swf文件了。

部署

通常，要上傳swf文件和js文件到你域名下的js目錄中。更改swf路徑使用構造函數配置jPlayer({"swfPath":path})。

嚴格來講，插件文件可能會遠程鏈接到jplayer.org上，但請求你們不要鏈接到jplayer.com上，因為當前我們還沒有充足資源做一個cdn。另外，遠程服務器上的Flash播放軟件要求所有的jPlayer("setMedia", media)設置的多媒體文件URL使用絕對路徑。

要在本地開發，你需要在自己的電腦上安裝一個服務器，比如apache,使localhost生效。

使用Javascript API控制你網站上的媒體文件jPlayer支持的媒體格式：HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm* Flash: mp3, m4a (AAC), m4v (H.264)

jPlayer需要兩個文件上傳到你的服務器：

（1）Jplayer.swf

（2）jquery.jplayer.min.js

jPlayer構造在jQuery選擇器上。采用 $(ID).jPlayer(Object: options) 的形式執行動作。在某些場合，jPlayer也可以構造在body上，指你不用播放視頻的時候。

注意：swfPath，它定義jPlayer SWF文件的路徑。記得把SWF文件上傳到你的服務器！你也可以使用類似jPlayer({solution:"flash, html")的語句規定用什么方式播放媒體優先。

初始化后更改設置
初始化之后 使用類似 jPlayer("option",{key:value})的形式改變設置。
實現一個自動播放音樂的網頁

解釋一下上面的代碼：

第一行“$(document).ready(function(){”大家都無比親切吧，文檔載入事件。

第二行“$("#jquery_jplayer_1").jPlayer({”選擇的是一個DIV，用于承載HTML5元素或是Flash，大家在文檔里寫一個空的DIV即可。

第三行“ready: function (event) {”，ready是一個鍵，function是一個值，灰常熟悉的東西。

第四行“$(this).jPlayer("setMedia", {”this指的是“$("#jquery_jplayer_1")”，意為：“$("#jquery_jplayer_1").jPlayer("setMedia", {”很熟悉。setMedia是一個option，根據第二步說的。

第九行“swfPath: "js",”，這個定義了swf播放器所在的相對路徑，如果你不打算兼容不支持HTML5的網頁，可以不寫:）

第十行“supplied: "m4a, oga",”所支持的格式。

第十一行“jPlayer("play");”意為：$("#jquery_jplayer_1").jPlayer("play");，播放媒體，實現自動播放。

jPlayer常用的方法：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com