生活随笔
收集整理的這篇文章主要介紹了
jPlayer插件的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文講一下本人在使用jPlayer插件時的整個過程、出現的BUG已經解決辦法。
? ? ? ?最近在做bootstrap項目，項目中需要一個響應式、兼容IE7的視頻播放插件，經過上網查找，找到了所謂可以兼容到IE6的響應式視頻播放插件——jPlayer。注：本代碼的功能是打開自動循環播放，如果不需要，可以修改個別屬性。
一、下載插件包。
官網下載插件包：點擊打開鏈接，這種網站當然有中文版：點擊打開鏈接?(PS：感覺網站布局有點丑，像高仿網站
。但仍擋不住我對它愛的深沉)，就現在來看，中文網的版本更新慢于英文網站。打開官網，首頁就有一個大大的Download按鈕，也可以點擊菜單欄里的Download選項進行下載。
二、在html中使用。
下載的插件包中有很多文件，官網給的比較全，還有各種例子，在example文件夾中，你可以看相關代碼的效果。
在使用前的注意事項：
這些在官網的“開發文檔”欄目有的，建議用前一定要閱讀一下它的文檔。
建立html文件(頭尾這邊就省略了)，引用jPlayer相關js、css文件(css文件有多種樣式可供選擇這邊隨便引用一種)：
[html]?view plain
?copy <span?style="white-space:pre">??????</span><link?href="./dist/skin/pink.flag/css/jplayer.pink.flag.css"?rel="stylesheet"?type="text/css"?/>??<span?style="white-space:pre">??????</span><script?type="text/javascript"?src="./lib/jquery.min.js"></script>??<span?style="white-space:pre">??????</span><script?type="text/javascript"?src="./dist/jplayer/jquery.jplayer.min.js"></script>?? 開始寫html，主要是視頻放置位置和一些控制按鍵(這些代碼可以上網搜一下，都有的)：
[html]?view plain
?copy <div?id="jp_container_1"?class="jp-video?jp-video-360p"?role="application"?aria-label="media?player">??????<div?class="jp-type-single">?????????????????<div?id="jquery_jplayer_1"?class="jp-jplayer"></div>????????????????????<div?class="jp-gui">?????????????????????????<div?class="jp-video-play">??????????????????<button?class="jp-video-play-icon"?role="button"?tabindex="0">play</button>??????????????</div>????????????????<div?class="jp-interface">?????????????????????????????????<div?class="jp-progress">??????????????????????<div?class="jp-seek-bar">??????????????????????????<div?class="jp-play-bar"></div>??????????????????????</div>??????????????????</div>??????????????????????????????????<div?class="jp-current-time"?role="timer"?aria-label="time">?</div>??????????????????????????????????<div?class="jp-duration"?role="timer"?aria-label="duration">?</div>??????????????????????????????????<div?class="jp-details">??????????????????????<div?class="jp-title"?aria-label="title">?</div>??????????????????</div>??????????????????????????????????<div?class="jp-controls-holder">?????????????????????????????????????????<div?class="jp-volume-controls">??????????????????????????<button?class="jp-mute"?role="button"?tabindex="0">mute</button>??????????????????????????<button?class="jp-volume-max"?role="button"?tabindex="0">max?volume</button>??????????????????????????<div?class="jp-volume-bar">??????????????????????????????<div?class="jp-volume-bar-value"></div>??????????????????????????</div>??????????????????????</div>??????????????????????????????????????????<div?class="jp-controls">??????????????????????????<button?class="jp-play"?role="button"?tabindex="0">play</button>??????????????????????????<button?class="jp-stop"?role="button"?tabindex="0">stop</button>??????????????????????</div>??????????????????????????????????????????<div?class="jp-toggles">??????????????????????????<button?class="jp-repeat"?role="button"?tabindex="0">repeat</button>??????????????????????????<button?class="jp-full-screen"?role="button"?tabindex="0">full?screen</button>??????????????????????</div>??????????????????</div>??????????????</div>??????????</div>??????????????????<div?class="jp-no-solution">??????????????<span>Update?Required</span>??????????????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>??????</div>??</div>?? 剩下的就是JS代碼了：
[javascript]?view plain
?copy <script?type="text/javascript">??$(document).ready(function(){????????$("#jquery_jplayer_1").jPlayer({??????????ready:?function?()?{??????????????$(this).jPlayer("setMedia",?{?????????????????title:?"Big?Buck?Bunny",??????????????????m4v:?"http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",//視頻文件?????????????????ogv:?"http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",//視頻文件?????????????????webmv:?"http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",//視頻文件?????????????????poster:?"http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"//視頻初始時圖片??????????????}).jPlayer("play")????????},?????????swfPath:?"../js/jPlayer/dist/jplayer/jquery.jplayer.swf",???????supplied:?"webmv,?ogv,?m4v",????????size:?{??????????????width:?"640px",??????????????height:?"360px",?????????????cssClass:?"jp-video-360p"??????????},??????????useStateClassSkin:?true,??????????autoBlur:?false,??????????smoothPlayBar:?true,??????????keyEnabled:?true,??????????remainingDuration:?true,??????????toggleDuration:?true????????????????}).jPlayer("play").jPlayer("repeat");})??</script>?? 代碼完成。
打開網頁，查看效果：
底部這些顯示樣式都是可以更改的，可以引用它自己其余的css樣式，也可以自己在css文件中設置。
三、遇到的BUG以及處理：
1.本人引用是在自己的html文件中引用的，文件中還包括其他的代碼，當按照上邊代碼寫的時候。報錯：
[plain]?view plain
?copy $(...).jPlayer?is?not?a?function?? 即在jQuery中調用jPlayer函數時報錯，造成這種BUG的原因有可能是：
[plain]?view plain
?copy 1.沒有引用成功jpalyer.js文件或者引用路徑有問題；??2.沒有引用jQuery文件或者引用路徑有問題；??3.有可能你在html最后又引用了另一個版本的jquery.js文件，導致不能識別是用哪個jquery?? 2.當把視頻文件換成自己本地的flv文件后，視頻無法播放，出現播放區域無的現象，經上網查詢得知：
[plain]?view plain
?copy jPlayer在引用本地文件時，直接訪問本地的html是無效的，要將html放到服務器上，以IP地址的形式訪問才行。?? 3.至于兼容性問題，不需要手動自己處理，jPlayer官網上已經說明他的兼容問題，經過上邊操作，是可以成功在IE7中展示的，如果出現無法展示情況，可能是：
[plain]?view plain
?copy js代碼中最后的設置屬性后的逗號沒有去除?? 即，根據IE的報錯，找到報錯那一行或者報錯的前一行，最后一個逗號要去掉，這可能是因為IE對jQuery代碼要求比較嚴格，逗號是不允許的。?
另外，如果不是這個問題，IE也沒有報錯，就是展示不出來，那就只有可能是你配置的問題。
完。
總結
以上是生活随笔為你收集整理的jPlayer插件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
