專案需要展示一個企業宣傳片，遂去網上尋找一些能提供適應html5和非html5的視訊播放器框架，找了一天下了好多js視訊播放器框架，對比了好多demo發現了一個相對不錯的框架“jplayer”，它是基於jQuery的，剛好jquery稍微熟一點，所以果斷決定使用他了。

非常可喜的是，這個開源框架有一箇中文學習網站，並且提供中文的API，這裡附上網址： jPlayer中文網

在網站上可以尋找到jPlayer最新版本的下載地址，一些示例，以及中文API，我這裡就不提供下載地址了~

要使用jPlayer我們需要引入這幾個檔案，就像這樣：

第一個檔案是css檔案，第二個是jquery庫，第三個是jPlayer的js庫

然後準備html容器，就像這樣：

1. <divid="jp_container_1"class="jp-video jp-video-360p"role="application"aria-label="media player">
2. <divclass="jp-type-single">
3. <divid="jquery_jplayer_1"class="jp-jplayer"></div>
4. <divclass="jp-gui">
5. <divclass="jp-video-play">
6. <buttonclass="jp-video-play-icon"
   role="button"tabindex="0">play</button>
7. </div>
8. <divclass="jp-interface">
9. <divclass="jp-progress">
10. <divclass="jp-seek-bar">
11. <divclass="jp-play-bar"></div>
12. </div>
13. </div>
14. <divclass="jp-current-time"role="timer"aria-label="time">&nbsp;</div>
15. <div
    class="jp-duration"role="timer"aria-label="duration">&nbsp;</div>
16. <divclass="jp-controls-holder">
17. <divclass="jp-controls">
18. <buttonclass="jp-play"role="button"tabindex="0">play</button>
19. <buttonclass="jp-stop"role="button"tabindex="0">stop</button>
20. </div>
21. <divclass="jp-volume-controls">
22. <buttonclass="jp-mute"role="button"tabindex="0">mute</button>
23. <buttonclass="jp-volume-max"role="button"tabindex="0">max volume</button>
24. <divclass="jp-volume-bar">
25. <divclass="jp-volume-bar-value"></div>
26. </div>
27. </div>
28. <divclass="jp-toggles">
29. <buttonclass="jp-full-screen"role="button"tabindex="0">full screen</button>
30. </div>
31. </div>
32. </div>
33. </div>
34. </div>
35. </div>

然後開始初始化jPlayer，就像這樣：

1. <scripttype="text/javascript">
2. var isPlaying =false;
3. $(document).ready(function(){
4. $("#jquery_jplayer_1").jPlayer({
5. ready:function(){
6. $(this).jPlayer("setMedia",{
7. m4v:"<%=request.getContextPath()%>/html/front/trailerPortlet/yuanshonShow.mp4",
8. poster:"<%=request.getContextPath()%>/html/front/trailerPortlet/jplayer/demo.png"
9. });
10. },
11. swfPath:"<%=request.getContextPath()%>/html/front/trailerPortlet/jplayer/js/jquery.jplayer.swf",
12. supplied:"m4v",
13. size:{
14. width:"368px",
15. height:"182px",
16. cssClass:"jp-video-360p"
17. },
18. useStateClassSkin:true,
19. autoBlur:false,
20. smoothPlayBar:true,
21. keyEnabled:true,
22. remainingDuration:true,
23. toggleDuration:true,
24. restored:{
25. restored:true
26. }
27. });
28. $("#jquery_jplayer_1").bind($.jPlayer.event.click,function(event){// Add a listener to report the time play began
29. if(isPlaying){
30. $("#jquery_jplayer_1").jPlayer("pause");
31. }else{
32. //$("#jquery_jplayer_1").jPlayer( "play");
33. }
34. });
35. $("#jquery_jplayer_1").bind($.jPlayer.event.pause,function(event){// Add a listener to report the time play began
36. isPlaying =false;
37. $(".jp-video-play").show();
38. });
39. $("#jquery_jplayer_1").bind($.jPlayer.event.ended,function(event){// Add a listener to report the time play began
40. isPlaying =false;
41. $(".jp-video-play").show();
42. });
43. $("#jquery_jplayer_1").bind($.jPlayer.event.play,function(event){// Add a listener to report the time play began
44. isPlaying =true;
45. $(".jp-video-play").hide();
46. });
47. });
48. </script>

然後就完了，具體可以參照jPlayer中文網

jPlayer框架在支援html5的瀏覽器上會使用html5標籤來播放視訊，在不不支援html5的瀏覽器上會使用swf來播放視訊，所以這裡有一個需要注意的地方就是swfPath這個引數必須要寫對，即jquery.jplayer.swf這個檔案的地址，不然IE8以下是不會播放的哦。

下面是我的播放器的效果~~

上面的例子大家注意到使用了jPlayer的一些事件相關的API，是因為我的專案需求。

jPlayer初始的時候視訊中間有一個按鈕，點選播放之後這個按鈕就被隱藏了，我需要一旦視訊暫停的時候這個按鈕又要出現，所以需要監聽jPlayer的暫停事件和播放事件，控制這個按鈕是否出現

還有一個需求就是點選螢幕需要能夠控制暫停和播放，所以我監聽了jPlayer的點選事件，然後判讀當前視屏是否在播放，播放的時候暫停視屏，暫停的時候播放視訊，這裡問題又來了，我翻遍了jPlayer中文網上的API沒找到一個方法來獲取當前視訊播放狀態，所以我定義了一個全域性變數isPlaying,在監聽到播放事件和暫停事件的同時來改變改變數的狀態，這樣我就能夠通過該變數來改變播放或者暫停了，這個土方法貌似還管用，有知道更容易實現的同學可以告訴我一聲哈。

順帶說一下，你完全可以通過覆蓋他原來的樣式控制你自己的播放器的樣式，當然他的API也提供自定義選擇器名稱，懶得話可以直接覆蓋他的樣式^_^