-----------------------------------------------------------------------------------------------------
The jQuery HTML5 Audio / Video Library
jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQueryplugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer's comprehensive API allows you to create innovative media solutions whilesupport and encouragement is provided by jPlayer's active and growing community.
Choose jPlayer
- easy to get started, deploy in minutes
- totally customizable and skinnable using HTML and CSS
- lightweight - only 12KB minified and Gzipped
- free and open source, no licensing restrictions
- active and growing community providing support
- free plugins available for popular platforms
- extensive platform support - multi-codec, cross-browser and cross-platform
- comprehensive documentation and getting started guide
- consistent API and interface in all browsers, HTML5 or Adobe® Flash™
- extensible architecture
Platforms and Browsers
- Windows: Chrome, Firefox, Internet Explorer, Safari, Opera
- Windows (legacy): IE6, IE7, IE8, IE9, IE10, IE11
- OSX: Safari, Firefox, Chrome, Opera
- iOS: Mobile Safari: iPad, iPhone, iPod Touch
- Android: Android 2.3 Browser
- Blackberry: OS 7 Phone Browser, PlayBook Browser
Media Support
- HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
- Flash: mp3, mp4 (AAC/H.264), rtmp, flv
For cross-browser support, a format must be supplied that works in both HTML5 and Flash.
Optional additional formats may be supplied to increase cross-browser HTML5 support.
ejQuery HTML5 音頻/視頻 庫
jPlayer是完全免費和開源的使用JavaScript寫的媒體庫。一個jQuery插件（和現在的Zepto插件，）jPlayer讓你快速的在網頁上編織跨平台的音頻和視頻。jPlayer綜合的API讓你創建創新的媒體解決方案，而支持和鼓勵來自jPlayer活躍和成長中的社區。
選擇jPlayer的理由
容易開始，在幾分鍾內部署
完全自定義和使用HTML+CSS換膚
輕量的 - 縮小和壓縮后只有12KB
免費和開源，沒有許可證限制
活躍和成長中的社區提供支持
免費的插件對流行平台可用
廣泛的平台支持 - 多編解碼器，跨瀏覽器和跨平台
全面的文檔和開始指導
在所有的瀏覽器，HTML5或Adobe Flash上擁有一致的API和接口
可擴展的架構
平台和瀏覽器
覆蓋大部分平台和瀏覽器。
媒體支持
HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
Flash: mp3, mp4 (AAC/H.264), rtmp, flv
為了跨瀏覽器支持，必須提供一個能同時在HTML5和FLASH上工作的格式。
可選的額外格式可以被提供用於增加跨瀏覽器HTML5支持。
官網：http://jplayer.org
下載jPlayer 2.7.0：http://jplayer.org/download/
GitHub：https://github.com/happyworm/jPlayer/
-----------------------------------------------------------------------------------------------
jPlayer2.9 開發者指南:
一. jplayer基礎
1. 必要的音頻格式
應用必要的格式之后，其余對應的格式可以用來提高HTML5解決方案的跨瀏覽器支持，主要選項是： jPlayer({"supplied": "formats"})
Audio: MP3, M4A 必須應用其中一個
Video: M4A 必須應用
2. 設置jplayer大小
設置寬高使用：jPlayer({size:Object}); 全屏幕尺寸使用：jPlayer({sizeFull:Object}); 設置背景色使用：jPlayer({backgroundColor:"#RRGGBB"})
3. Flash安全規則
使用下面的代碼, swf文件的安全規則是放松的，可以在任何域名被調用: flash.system.Security.allowDomain("*"); flash.system.Security.allowInsecureDomain("*");
改變路徑使用：jPlayer({"swfPath":path}); Flash依靠客戶端服務器使用絕對路徑：jPlayer("setMedia", media);
在本地運行jplayer會違反flash安全，所以需要在本地搭建環境。
4. 音頻編碼
使用的音頻必須確保解碼器被HTML5瀏覽器支持，提供的音頻格式必須確保解碼器被Adobe Flash支持。
jplayer區分audio和video，因為jplayer對兩種不同的音頻類型運行有輕微的不同。
- MP3
-
Since some browsers use the Flash element of jPlayer, the MP3 files used must be encoded according to the browser's Adobe Flash Plugin limitations:
- Constant Bitrate Encoded.
- Sample Rate a multiple of 11,025Hz. ie., 22,050Hz and 44,100Hz are valid sample rates.
- M4A / M4V
-
The MP4 file is a container that supports both audio and video. The M4A format is an audio MP4, and the M4V format is a video MP4. The recommended encoding options for standard and mobile browsers are:
- H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile.
- AAC-LC audio, up to 48 kHz.
The metadata should be at the start of the encoded data, since the Flash solution must have the metadata in order to begin playling. The option for this varies from encoder to encoder, but usually refers to optimizing for either web or streaming. This 3rd party link might help if you are having problems with the metadata: MetaData Mover
- OGA / OGV
-
The OGG file is a container that supports both audio and video. The OGA format is an audio OGG, and the OGV format is a video OGG. The Vorbis and Theora codecs appear to have full support.
- WEBMA / WEBMV
-
The WebM file is a container that supports both audio and video. The WEBMA format is an audio WebM, and the WEBMV format is a video WebM. The Vorbis and VP8 codecs appear to have full support.
- WAV
-
The WAV format is supported by many HTML5 browsers. We recommend that you avoid it though as a counterpart format. The recommended encoding options are:
- 8-bit and 16-bit linear PCM
- Only codec "1" (PCM) is supported.
- FLA / FLV
-
The Flash FLV file is a container that supports both audio and video. The FLA format is an audio FLV, and the FLV format is a video FLV. The FLA/FLV format is supported by the Flash fallback.
- RTMPA / RTMPV
-
The RTMP protocol uses a Flash Media Server (FMS) to stream media to jPlayer's Flash solution. The RTMPA format is an audio RTMP stream, and the RTMPV format is a video RTMP stream. The HTML solution does not support RTMP.
- M3U8A / M3U8V
-
The M3U8 playlist format is an Apple HLS (HTTP Live Streaming) file. m3u8a for audio and m3u8v for video. This format works well on Apple devices and browsers (Safari), but has limited support elsewhere.
- M3UA / M3UV
-
The M3U playlist format is am MPEG URL file. m3ua for audio and m3uv for video.
- FLAC
-
The flac audio format.
1) 編碼器：
2) 參考：
5. 服務端響應
1) MIME類型：
服務端必須為每個音頻地址給出正確地MIME類型，給出不正確的MIME類型，音頻在一些HTML5瀏覽器上將終止運行，這是影響Firefox和Operad的常見原因。其它瀏覽器不嚴格，但總是應該檢查MIME類型是否正確，當你在任何瀏覽器上遇到音頻不能播放的問題的時候。
2) 音頻的MIME類型有：
-
- MP3: audio/mpeg
- MP4: audio/mp4 video/mp4
- OGG: audio/ogg video/ogg
- WebM: audio/webm video/webm
- WAV: audio/wav
如果為音頻和視頻使用常見的后綴，如audio.mp4和video.mp4, 可以簡單的使用MIME類型的video版本 audio/mp4.
在Apache服務器上，可以使用.htaccess來基於文件后綴設置MIME類型。
# AddType TYPE/SUBTYPE EXTENSION AddType audio/mpeg mp3 AddType audio/mp4 m4a AddType audio/ogg ogg AddType audio/ogg oga AddType audio/webm webma AddType audio/wav wav AddType video/mp4 mp4 AddType video/mp4 m4v AddType video/ogg ogv AddType video/webm webm AddType video/webm webmv
3) 禁止GZIP編碼音頻文件：
音頻文件已經被壓縮，GZIP僅僅浪費服務器的CPU。如果GZIP音頻文件，Adobe Flash插件將遇到問題。同樣不要GZIP jplayer.swf文件，隨時修改javascript。
4) 字節范圍要求
服務器必須支持字節范圍，通過查看服務器響應的header中的Accept-Ranges來檢測，大多數HTML5瀏覽器支持在下載期間查找新文件位置，所以服務器必須支持新的字節請求。
持續時間常常不能從文件讀取因為一些格式需要讀取文件開始到結束才能知道持續時間。chrome瀏覽器會有最多的問題，如果服務端不支持字節請求的話，但是所有的瀏覽器都會有一些問題，即使只是在你跳到結尾前讓你等待所有音頻加載。
jplayer社區寫的一個PHP函數可以提供音頻文件支持字節請求。在話題中查找jPlayer Support Group Post。
5) 保護你的音頻文件
當嘗試限制訪問你的音頻文件時需要小心，音頻地址需要能在網絡上被用戶訪問到並且以預期的格式響應。
使用服務端響應來阻止本地緩存音頻的方式，在一些HTML5瀏覽器上會導致一些問題。它會導致音頻的持續時間不可知，在jplayer上顯示出來就是NaN。如果在后端做一些使其更安全的事情時，它們確保你能接收上面描述的字節范圍請求。
6. 如何通過CSS或jQuery讓jplayer不可用
當jplayer在瀏覽器上使用Flash，jplayer的<div>必須不被隱藏。同樣移動端瀏覽器不要出現被隱藏的HTML5音頻。
如果想使它不可見，可以把jplayer的<div>尺寸調為0，你應該小心任何jQuery動畫，如fadeIn()和fadeOut()，不要應用在jplayer的<div>或任何它的父元素上。
<!-- 不允許做的例子 --> <head> <style> #jquery_jplayer { display:none; /* Disables jPlayer when using Flash */ } </style> <script type="text/javascript"> $("#jquery_jplayer").hide(); /* Disables jPlayer when using Flash */ </script> </head> <body> <div id="jquery_jplayer"></div> </body>
7. 安全限制
為了消除跨站腳本攻擊(XSS), {noConflict}選項上和jplayer元素的ID名稱上要有一些限制，這些限制是因為需要jQuery變量和jplayer元素ID的頁面上Flash和Javascript之間的通信。它暴露了一個通過直接訪問jplayer.swf文件潛在的易受攻擊的需要通過額外的這些規則來限制的地方。
白名單字符是：A-Z a-z 0-9 _ - . 或者是在其它單詞中，字母數字組成的字符，下划線，連字符/減號和句號。
8. jplayer數據
jplayer數據通常通過事件對象訪問，然而里面的數據往往在事件產生前更新。下面是一個事件更新如何被創建的例子：
$('#jp').jPlayer({
timeupdate: function(event) { // 4Hz
// Restrict playback to first 60 seconds.
if (event.jPlayer.status.currentTime > 60) {
$(this).jPlayer('stop');
}
}
// Then other options, such as: ready, swfPath, supplied and so on.
});
jplayer對象自身同樣可以通過 $('#jp').data('jPlayer'); 訪問，然而，在給所有的讀/寫訪問給所有的數據和所有的方法訪問權之前，即使里面的方法，僅僅推薦給先前的開發者。讀取數據是好的，但設置數據可能有出乎意料的影響。
前面的更新事件代碼可以直接被模仿，使用一個間隔：
var jp = $('#jp'), jpData = jp.data('jPlayer'); setInterval(function() { // Restrict playback to first 60 seconds. if (jpData.status.currentTime > 60) { jp.jPlayer('stop'); } },100); // 10Hz
見：jPlayer("option")
9. jPlayer和Zepto
jplayer已被微調，為了你可以現在使用Zepto代替jQuery。
和數據模塊編譯的Zepto1.0+是需要的。
如果想使用jplayer作為Zepto的一個AMD模塊，你需要編輯源碼里的幾行代碼。默認AMD模塊有設置為jQuery的依賴，而不是Zepto。下面是jplayer頂部的代碼，你可以清楚的看到兩行需要切換。
(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['jquery'], factory); // jQuery Switch // define(['zepto'], factory); // Zepto Switch } else { // Browser globals if(root.jQuery) { // Use jQuery if available factory(root.jQuery); } else { // Otherwise, use Zepto factory(root.Zepto); } } }(this, function ($, undefined) {
如果你沒有使用AMD模塊，那么jplayer安裝准備使用Zepto. 簡單的在頁面中包含Zepto代替jQuery。
Zepto支持正式在jplayer2.4中發布。
二. jplayer文件
jplayer需要兩個文件上傳至你的服務器：jquery.jplayer.min.js 和 Jplayer.swf
當更新jplayer，由於文件更改，確保插件ZIP包中的所有文件被上傳。
1. 插件文件
jquery.jplayer.min.js
插件的JS文件，需要添加在<head>里，在jQuery文件之后，下面是使用絕對路徑和相對路徑的引入方式。
<head> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"> </script> <script type="text/javascript" src="/jPlayer/js/jquery.jplayer.min.js"> </script> </head>
jquery.jplayer.swf
jplayer插件的Flash10.1文件，使用grunt mxmlc模塊，被Adobe Flex 4.6 SDK編譯。
這個文件在不支持HTML5 <video> 和 <audio> 的瀏覽器中使用。
文件必須上傳至你的服務器，修改路徑使用swfPath方法，下面是設置相對路徑的方式。
$("#jpId").jPlayer( {
swfPath: "/scripts/jPlayer"
});
2. 源文件
jquery.jplayer.js
jplayer的JS源文件，可以切換到jquery.jplayer.min.js，運行是相同的，但這個文件更大。JS源文件使用JSHint檢測。這個文件是可以被人閱讀的。
Jplayer.fla
這個文件不再需要，作為Flex編譯器現在被用來編譯ActionScript。它被留在了源碼里，你可以有選擇的使用它來編譯ActionScript。
Jplayer.as
jplayer的ActionScript3源文件，jplayer不再需要這個文件除非用來編譯。
happyworm.jPlayer AS3 package
同上。
三. jplayer結構
1. 描述
$(id).jPlayer(object:options):jQuery
jplayer構造器應用在jQuery選擇器上，並使用提供的選項。被jplayer使用的div應該是空的，並且不被任何其它東西使用。
在一些例子中，jplayer的div可以放在body的最高級別上來防止頁面上對jplayer的操作影響。
最重要的選項時ready事件句柄，用來定義jplayer開始使用的一個操作函數。 在ready事件發生前對jplayer使用命令會導致jplayer出錯並且命令被忽略，即使使用的是Flash。
接下來最重要的選項是swfPath元素，定義了jplayer的swf文件。記得上傳到你的服務器上。
2. 在實例化jplayer之后改變選項
在實例化jplayer后使用 jPlayer("option", key, value); 方法。具體在： http://jplayer.org/latest/developer-guide/#jPlayer-option
3. 事件句柄通過jplayer選項創建。
4. 參數
1) 選項：
ready：
Function : (Default: undefined)
事件綁定在.jPlayer命名空間下。
swfPath：
String : (Default: "js")
使用例如 jPlayer({swfPath:"/scripts/banana.swf"}); 通過使用 jPlayer({solution:"flash, html");來測試HTML5瀏覽器是否支持Flash。當 jPlayer("setMedia", media) 正確時，不正確的swfPath會產生 $.jPlayer.event.error 事件，類型是：$.jPlayer.error.FLASH。
solution:
String : (Default: "html, flash")
定義html和flash解決方案的優先權，上面的優先使用html其次是flash，調整順序即可優先使用flash。
根據使用的格式，jplayer可能同時使用兩種方案。如：{supplied:"mp3,oga,m4v"}，flash方法來播放視頻，音頻可以在HTML方法中播放。
雖然你可以只指定一種方案，但是不推薦。
下面是一個aurora.js的解決方案，使用方式：
# 核心庫添加對WAV的支持
<script src="aurora.js"></script>
添加Aurora編解碼器到頁面中，如添加FLAC和OGG支持（OGGs使用Vorbis或Opus）。
<script src="flac.js"></script> <script src="ogg.js"></script> <script src="vorbis.js"></script> <script src="opus.js"></script>
添加autora到solution選項中，如：{solution:"html,flash,aurora"}將把aurora排在第三個順序。
設置auroraFormats，如：{auroraFormats:"wav,flac,oga"}告訴jplayer Aurora播放器可以播放這些格式，定義的格式應該以相同的方式，如jplayer的命名應用選項的慣例，如：{auroraFormats:"m4a"}
當Aurora的頁面訪問文件中的數據時，音頻必須在同一個域名下。（可以安裝CORS頭，但不一定生效）
記住Aurora播放器解決方案是實驗性的，僅僅有經驗的開發者才應該嘗試使用它。作者質疑其它任何人將需要它，部分是由於Aurora庫要被其它類庫使用需要修復它的seek()方法。
supplied：
String : (Default: "mp3")
定義jplayer使用的格式。順序定義了優先級，最左邊的格式優先級最高。
格式上的更多細節見：Media Encoding ，為什么一些格式成本上升的細節見：Essential Formats
基本的音頻格式：mp3 或 m4a
基本的視頻格式：m4v
相應的格式：webma, webmv, oga, ogv, wav, fla, flv, rtmpa, rtmpv。
所有格式個應用選項必須在 jPlayer("setMedia",media) 命令里。
solution的優先級決定了應用格式的優先級，jplayer通過找到給出的第一個運行的格式才工作。所以 {solution:"html,flash"} 和 {supplied:"mp3,oga"} 在Chrome里，mp3文件將使用原生的HTML播放，即使Chrome可以同時使用來播放。
（ jplayer挑選的格式依賴於你的瀏覽器和solution選項。基礎的格式是那些被flash支持的和幸運地被不支持flash的瀏覽器ie./iPad/iPhone所支持的格式。對應部分的格式用來提高跨瀏覽器的HTML5音頻支持。）
size:
用來設置保存屏幕模式的大小。默認依賴應用的格式是音頻還是視頻。當同時應用兩種類型時，視頻格式默認被使用。
對象屬性：
width
String : (Default: [Video:"480px"] [Audio:"0px"]) ；寬度作為CSS規則。
height
String : (Default: [Video:"270px"] [Audio:"0px"]) ；高度作為CSS規則。
cssClass
String : (Default: [Video:"jp-video-270p"] [Audio:""])；css類名添加到css選擇器上。
sizeFull：
設置全屏幕模式。其余同上。
width
String : (Default: [Video:"100%"] [Audio:"0px"])
height
String : (Default: [Video:"100%"] [Audio:"0px"])
cssClass
String : (Default: [Video:"jp-video-full"] [Audio:""])
smoothPlayBar:
Boolean : (Default: false); 平滑過渡的進度條。
播放條寬度的改變動畫是超過250ms的平滑變化，相當於一步的改變。這同樣影響在播放條上的點擊。
短的音頻受影響最大，因為它們的一步改變是最大的。
fullScreen：
Boolean : (Default: false)；設置初始狀態為全屏幕模式。
這個選項通常通過界面上得全屏和恢復按鈕改變。如果瀏覽器支持，視頻將在全屏幕顯示，否則在整個窗口。
改變fullScreen選項將改變fullWindow選項來匹配它。這條規則的異常情況是當WebKit視頻在IOS上使用時，fullWindow選項將不會改變。
fullWindow：
Boolean : (Default: false) ；設置初始狀態為全窗口模式。
這個選項是當設置為全屏，但全屏不可用時自動被設置的備選方式。
這個選項影響 jPlayer({cssSelectorAncestor})，為了jplayer顯示不同於GUI界面。
改變 fullWindow 選項不會影響 fullScreen 選項。
audioFullScreen:
Boolean : (Default: false); 使鍵盤能夠控制視頻的全屏顯示。
這個選項允許鍵控制全屏顯示音頻的圖片，這對音頻播放器來說是有用的。
更多關於鍵盤控制的信息見 jPlayer({keyEnabled}); 選項。
autohide：
為GUI在屏幕中的顯示狀態設置自動隱藏選項。
參數：
restored
Boolean : (Default: false)；恢復屏幕顯示時自動隱藏GUI。
full
Boolean : (Default: true)；全屏幕顯示時自動隱藏GUI。
fadeIn
Number : (Default: 200); 在毫秒內漸顯的動畫。
fadeOut
Number : (Default: 600); 毫秒內漸隱的動畫。
hold
Number : (Default: 1000)；毫秒內自動隱藏前暫停。
preload：
String : (Default: "metadata")；有效的值是“none”，“metadata” 和 “auto”，符合HTML5標准。使用“auto”來預加載文件。
預加載是給用戶代理的一個示意，不是一個命令。一些瀏覽器忽略這個選項。
volume：
Number : (Default: 0.8)；用0到1的值定義開始的音量。
muted：
Boolean : (Default: false)；定義開始的停止狀態。
globalVolume：
Boolean : (Default: false)；打開globalVolume選項會使volume選項應用到其它jplayer實例上。
verticalVolume：
Boolean : (Default: false) ；默認點擊音量條是從左計算。設置該選項為ture，會使計算從底部開始。
如果使用這個選項，下面的CSS樣式需要使用在音量條上來使它們垂直的顯示。
<style> .jp-volume-bar { position:relative; } .jp-volume-bar-value { position:absolute; bottom: 0; } </style>
remainingDuration：
Boolean : (Default: false)；