下載官網：http://www.jplayer.org/
當前版本：2.3.0
功能：視訊播放（可全屏）、音樂播放
全部原教程，說明並不詳細，要結合檢視其網頁原始碼來學習：http://www.jplayer.org/latest/demos/
備註：資料夾裡blue.monday和pink.flag和circle.skin三個資料夾裡是三種播放器面板（及PSD檔案），任選一種。樣式檔案和圖片都可以改，只要容器類名稱不變就行。
      popcorn資料夾裡是給視訊加字幕的外掛，後面有介紹。add-on資料夾裡是列表播放用的外掛和檢測用的外掛。
   在IE8及以下版本，會因為最後一個引數結尾有逗號而不工作，要注意。
如果你的mp4、m4v、ogv等不能在網站上播放，請檢查你網站的MIME型別，比如：
.mp4 video/mp4
.m4v video/m4v
.3gp video/3gpp
.ogv application/ogg
.webm video/webm
.flv video/x-flv

====================== 音樂呼叫方法 =======================
======================

【A】最簡單的：(不用面板，單一首歌)

◆頭：
<script src="css_js/jquery.js"></script>
<script src="jPlayer/jquery.jplayer.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
         mp3: "media/mysound.mp3",  m4a: "media/mysound.mp4",  oga: "media/mysound.ogg"
      });
    },
   swfPath: "jPlayer",
   supplied: "mp3, m4a, oga"
  });
 });
</script>

◆◆注：如果要自動播放和自動迴圈，要加上.jPlayer("play")和.jPlayer("repeat")在這裡：
$(this).jPlayer("setMedia", {
         mp3: "media/mysound.mp3",  m4a: "media/mysound.mp4",  oga: "media/mysound.ogg"
}).jPlayer("play").jPlayer("repeat");

◆身體：
<div id="jquery_jplayer_1"></div><!--播放音訊的flash隱藏視窗-->
<div id="jp_container_1">
 <a href="#" class="jp-play">Play</a>
 <a href="#" class="jp-pause">Pause</a>
</div>

======================
【B】全功能介面：

◆頭同上，再加上：
<link rel="stylesheet" type="text/css" href="jPlayer/pink.flag/jplayer.pink.flag.css">

◆身體：
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
 <div class="jp-type-single">
  <div class="jp-gui jp-interface">
   <ul class="jp-controls">
    <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
    <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
    <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
   </ul>
   <div class="jp-progress">
    <div class="jp-seek-bar">
     <div class="jp-play-bar"></div>
    </div>
   </div>
   <div class="jp-volume-bar">
    <div class="jp-volume-bar-value"></div>
   </div>
   <div class="jp-current-time"></div>
   <div class="jp-duration"></div>
   <ul class="jp-toggles">
    <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
    <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
   </ul>
  </div>
  <div class="jp-title">
   <ul>
    <li>My jPlayer</li>
   </ul>
  </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>

======================
【C】多首歌列表播放：

◆頭，必須再匯入個jplayer.playlist.min.js檔案才能播放列表：
<script src="css_js/jquery.js"></script>
<script src="jPlayer/jquery.jplayer.min.js"></script>
<script src="jPlayer/add-on/jplayer.playlist.min.js"></script>
<link rel="stylesheet" type="text/css" href="jPlayer/pink.flag/jplayer.pink.flag.css">
<script type="text/javascript">
$(document).ready(function(){
 new jPlayerPlaylist({
  jPlayer: "#jquery_jplayer_1",
  cssSelectorAncestor: "#jp_container_1"
         }, [
  {title:"My Sound 1",mp3: "media/mysound1.mp3", oga:"media/mysound1.ogg"},
  {title:"My Sound 2",mp3: "media/mysound2.mp3", oga:"media/mysound2.ogg", free:true},//free:true會在列表中此條音樂名稱右邊出現格式選擇
  {title:"My Sound 3",mp3: "media/mysound3.mp3", oga:"media/mysound3.ogg"}
         ], {
  swfPath: "../js",
  supplied: "oga, mp3",
  wmode: "window",
  smoothPlayBar: true,
  keyEnabled: true
 });
});
</script>

◆◆如果要自動播放且自動迴圈要加上ready: function (){$(this).jPlayer("play").jPlayer("repeat");},在這裡：
……
          {title:"My Sound 2",mp3: "media/mysound2.mp3", oga:"media/mysound2.ogg"},
   {title:"My Sound 3",mp3: "media/mysound3.mp3", oga:"media/mysound3.ogg"}
   ], {
          ready: function (){$(this).jPlayer("play").jPlayer("repeat");},
   swfPath: "../js",
……

◆身體其他部分不變同上，在.jp-toggles里加上了隨機播放的開關，在.jp-interface後面加了個播放列表的空容器：
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
 <div class="jp-type-playlist">
  <div class="jp-gui jp-interface">
   <ul class="jp-controls">
    <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
    <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
    <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
    <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
    <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
   </ul>
   <div class="jp-progress">
    <div class="jp-seek-bar">
     <div class="jp-play-bar"></div>
    </div>
   </div>
   <div class="jp-volume-bar">
    <div class="jp-volume-bar-value"></div>
   </div>
   <div class="jp-current-time"></div>
   <div class="jp-duration"></div>
   <ul class="jp-toggles">
                                <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                  <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
    <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
    <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
   </ul>
  </div>
              <div class="jp-playlist"><ul><li></li></ul></div>
 </div>
</div>

======================
【D】更復雜的JS設定及說明：

◆頭：
<script type="text/javascript">
$(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {   //當flash一切載入就緒後，發生的事，如自動播放
      $(this).jPlayer("setMedia", {
         mp3: "media/mysound.mp3",  m4a: "media/mysound.mp4",  oga: "media/mysound.ogg"
      });
    },
   swfPath: "jPlayer",   //播放用flash所在的相對路徑
   solution: 'html, flash',
   supplied: "mp3, m4a, oga",
   preload: 'metadata',
   volume: 0.8,   //預設開啟時音量
   muted: false,
   backgroundColor: '#000000',
   cssSelectorAncestor: '#jp_container_1',
   wmode: "window",
   smoothPlayBar: true,
   keyEnabled: true, //鍵盤快捷鍵（上下左右空白）可用否
   cssSelector: {  //可以用自己容器的類名或ID來取代預設
      videoPlay: '.jp-video-play',
      play: '.jp-play',
      pause: '.jp-pause',
      stop: '.jp-stop',
      seekBar: '.jp-seek-bar',
      playBar: '.jp-play-bar',
      mute: '.jp-mute',
      unmute: '.jp-unmute',
      volumeBar: '.jp-volume-bar',
      volumeBarValue: '.jp-volume-bar-value',
      volumeMax: '.jp-volume-max',
      currentTime: '.jp-current-time',
      duration: '.jp-duration',
      fullScreen: '.jp-full-screen',
      restoreScreen: '.jp-restore-screen',
      repeat: '.jp-repeat',
      repeatOff: '.jp-repeat-off',
      gui: '.jp-gui',
      noSolution: '.jp-no-solution'
   },
   errorAlerts: false, //報錯開關
   warningAlerts: false //報錯開關
  });
});
</script>

======================
【E】線上流音樂播放：

◆頭：
<script src="css_js/jquery.js"></script>
<script src="jPlayer/jquery.jplayer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jPlayer/pink.flag/jplayer.pink.flag.css">
<script type="text/javascript">
$(document).ready(function(){
var stream = {
  title: "流音樂測試",
  mp3: "http://listen.radionomy.com/abc-jazz"
 },
 ready = false;

 $("#jquery_jplayer_1").jPlayer({
  ready: function (event) {
   ready = true;
   $(this).jPlayer("setMedia", stream);
  },
  pause: function() {
   $(this).jPlayer("clearMedia");
  },
  error: function(event) {
   if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
    // Setup the media stream again and play it.
    $(this).jPlayer("setMedia", stream).jPlayer("play");
   }
  },
  swfPath: "jPlayer",
  supplied: "mp3",
  preload: "none",
  wmode: "window"
 });
});
</script>

◆身體：
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio-stream">
  <div class="jp-type-single">
    <div class="jp-gui jp-interface">
       <ul class="jp-controls">
          <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
       <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
       <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
       <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
       <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
           </ul>
        <div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div>
    </div>
    <div class="jp-title"><ul><li>ABC Jazz</li></ul></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>

====================== 視訊呼叫方法 =======================
======================
【F】單個視訊播放：

◆頭：
<script src="css_js/jquery.js"></script>
<script src="jPlayer/jquery.jplayer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jPlayer/pink.flag/jplayer.pink.flag.css">
<script type="text/javascript">
$(document).ready(function(){
 $("#jquery_jplayer_1").jPlayer({
  ready: function () {
   $(this).jPlayer("setMedia", {
    m4v: "media/myVideo.m4v", ogv: "media/myVideo.ogv", webmv: "media/myVideo.webm", poster: "media/myVideo.png" //封面圖
   }); //如果要一開始就全屏，加.jPlayer("fullScreen")但只是全視窗而不是全屏
  },
  swfPath: "jPlayer",
  supplied: "webmv, ogv, m4v",
  size: {
       width: "640px", height: "360px", cssClass: "jp-video-360p"
  },
  smoothPlayBar: true
 });
});
</script>

◆身體：
<div id="jp_container_1" class="jp-video jp-video-360p"><!--jp-video-360p是在CSS裡預設好的寬640高360的樣式-->
   <div class="jp-type-single">
           <div id="jquery_jplayer_1" class="jp-jplayer"></div><!--播放畫面flash視窗-->
           <div class="jp-gui">
                 <div class="jp-video-play"><a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a></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"></div>
                  <div class="jp-duration"></div>
                  <div class="jp-title"><ul><li>My Video</li></ul></div>
                  <div class="jp-controls-holder">
                       <ul class="jp-controls">
                            <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                            <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                            <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                       </ul>
                       <div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div>
                       <ul class="jp-toggles">
                            <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
                            <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
                            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                       </ul>
                  </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>

======================
【H】視訊列表播放：

◆頭，別忘了匯入jplayer.playlist.min.js才能用：
<script src="css_js/jquery.js"></script>
<script src="jPlayer/jquery.jplayer.min.js"></script>
<script src="jPlayer/add-on/jplayer.playlist.min.js"></script>
<link rel="stylesheet" type="text/css" href="jPlayer/pink.flag/jplayer.pink.flag.css">
<script type="text/javascript">
$(document).ready(function(){
 new jPlayerPlaylist({
  jPlayer: "#jquery_jplayer_1",
  cssSelectorAncestor: "#jp_container_1"
     }, [
  {
   title:"My Video 1", artist:"me", free:true, //free:true會在列表中此條視訊名稱右邊出現格式選擇
   m4v: "media/myVideo1.m4v", ogv: "media/myVideo1.ogv", poster:"media/myVideo1.png"
  },
  {
   title:"My Video 2", artist:"me",
   m4v: "media/myVideo2.m4v", ogv: "media/myVideo2.ogv", poster:"media/myVideo2.png"
  },  {
   title:"My Video 3", artist:"me",
   m4v: "media/myVideo3.m4v", ogv: "media/myVideo3.ogv", poster:"media/myVideo3.png"
  }
     ], {
  swfPath: "jPlayer",
  supplied: "ogv, m4v",
  size: {width: "640px", height: "360px"},
  smoothPlayBar: true
 });
});
</script>

◆身體：
<div id="jp_container_1" class="jp-video jp-video-270p">
  <div class="jp-type-playlist">
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div class="jp-gui">
      <div class="jp-video-play"><a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a></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"></div>
        <div class="jp-duration"></div>
        <div class="jp-title"><ul><li></li></ul></div>
        <div class="jp-controls-holder">
          <ul class="jp-controls">
            <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
            <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
            <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
            <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
            <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
            <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
          </ul>
          <div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div>
          <ul class="jp-toggles">
            <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
            <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
            <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
            <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="jp-playlist"><ul><li></li></ul></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>

======================
【I】給視訊加文字的popcorn外掛：（支援中文，但貌似字型，顏色，位置等都不能改）

◆頭，加上popcorn資料夾裡的4個JS檔案！注意順序：
<script src="css_js/jquery.js"></script>
<script src="jPlayer/jquery.jplayer.min.js"></script>
<script src="jPlayer/popcorn/popcorn.js"></script>
<script src="jPlayer/popcorn/popcorn.player.js"></script>
<script src="jPlayer/popcorn/popcorn.jplayer.js"></script>
<script src="jPlayer/popcorn/popcorn.subtitle.js"></script>
<link rel="stylesheet" type="text/css" href="jPlayer/pink.flag/jplayer.pink.flag.css">
<script type="text/javascript">
$(document).ready(function(){
 var p = Popcorn.jplayer('#jquery_jplayer_1', {
  media: {
   m4v: "media/myVideo.m4v", ogv: "media/myVideo.ogv", poster:"media/myVideo.png"
  },
  options: {
   swfPath: "jPlayer",
   supplied: "ogv, m4v",
   size: {width: "640px",height: "360px"},
      smoothPlayBar: true}
 })
 .subtitle({
  start: 2, end: 6, text: "大家好，這是後加的視訊字幕。"
 })
 .subtitle({
  start: 6, end: 10, text: "用到了popcorn外掛。"
 })
 .subtitle({
  start: 10, end: 15, text: "Enabling jPlayer to function with the features of Popcorn"
 })
 .subtitle({
  start: 16, end: 32, text: "Have fun playing with it!"
 });
});
</script>

◆身體同F一樣。

 =====================================

 【J】其他，比如播放結束後的動作：

$("#jpId").jPlayer( {
  ready: function() { // $.jPlayer.event.ready 事件
    $(this).jPlayer("setMedia", { // 設定媒體
      m4v: "m4v/presentation.m4v"
    }).jPlayer("play"); // 自動播放媒體
  },
  ended: function() { // The $.jPlayer.event.ended 事件
    window.location = "/page/index.aspx";
  },
  supplied: "m4v"
);
  
$("#jumpToTime").click( function() {
  $("#jpId").jPlayer("play", 42); // 從媒體的42秒處開始播放.
});