用HTML5和jQuery實作出來的播放器
可以改善對於嵌入影音在網頁上，都會被播放軟體限制住的問題
jPlayer官網
另外網路上也有人會開發樣版，例如 Midnight-Black
由於官網並沒有很明顯的文件說明HTML要怎麼寫，因此附上自己使用的HTML
2 | <div id="jquery_jplayer_1" class="jp-jplayer"></div> |
3 | <div id="jp_container_1" class="jp-audio"> |
4 | <div class="jp-type-single"> |
5 | <div class="jp-gui jp-interface"> |
6 | <ul class="jp-controls"> |
7 | <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li> |
8 | <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li> |
9 | <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li> |
10 | <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li> |
11 | <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li> |
12 | <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li> |
14 | <div class="jp-progress"> |
15 | <div class="jp-seek-bar"> |
16 | <div class="jp-play-bar"></div> |
19 | <div class="jp-volume-bar"> |
20 | <div class="jp-volume-bar-value"></div> |
22 | <div class="jp-time-holder"> |
23 | <div class="jp-current-time"></div> |
24 | <div class="jp-duration"></div> |
25 | <ul class="jp-toggles"> |
26 | <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li> |
27 | <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li> |
31 | <div class="jp-title"> |
36 | <div class="jp-no-solution"> |
37 | <span>Update Required</span> |
38 | To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. </div> |
jPlayer基本使用
1 | $("#jquery_jplayer_1").jPlayer({ |
2 | ready: function (event) { |
3 | $(this).jPlayer("setMedia", { |
14 | remainingDuration: true, |
動態切換歌曲
1 | var player = $("#jquery_jplayer_1"); |
5 | console.log(e.jPlayer.error); |
6 | alert(e.jPlayer.error.message); |
12 | player.jPlayer("setMedia", { |
18 | player.jPlayer("play", 0); |