[jPlayer]一分钟部署jPlayer

------------------------------------------------------------------------------------------------------

「jPlayer作为音频播放器」

  你可以简单的定制样子并使它适合你页面的颜色和样式。

  Demo中如果可以使用HTML,将使用HTML解决方案,否则Flash备选方案将被使用。

  注意:{wmode:"window"}选项是为了确保在Firefox3.6中使用Flash方案时能播放。然而,OGA格式将被用在HTML解决方案中。

 

  参考资料:

  所有的Demo均在:http://jplayer.org/latest/demos/
  jPlayer提供的支持和FAQ:http://jplayer.org/support/
  开发者指南:http://jplayer.org/latest/developer-guide/
  快速开始:http://jplayer.org/latest/quick-start-guide/

 

<!-- 头部 @黑眼诗人 <www.farwish.com> -->
<head>
  <link style="text/css" rel="stylesheet" href=""> <!-- 引入你自定义的CSS皮肤 -->   <script src="statics/home/js/jquery.min.js"></script> <!-- jPlayer基于jQuery,所以必须先插件之前引入 -->   <script src="statics/home/js/player/jquery.jplayer.min.js"></script> <!-- 引入jPlayer插件 -->   <script>     $(document).ready(function(){        //jQuery方法:文档载入后执行   $("#jquery_jplayer_1").jPlayer({    //id为jquery_jplayer_1的div调用.jPlayer("options",{key:value})进行设置     ready: function () {         //ready为键,对应function为值       $(this).jPlayer("setMedia", {  //$(this)即为$("#jquery_jplayer_1"),setMedia即为选项,键为mp3(格式),值为地址         m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
            mp3:
"./test.mp3"       });     },     swfPath: "statics/home/js",     //jPlayer.swf所在目录的路径     supplied: "mp3, m4a, oga"      //支持的音频格式    }).jPlayer("play");           //.jPlayer("play")实现自动播放,可不加 });   </script> </head>

 

<!-- 播放器主体(样式可在头部CSS中自定义) -->
<body>  <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> </body>

 

更详细的播放器参数可参考文档:http://jplayer.org/latest/developer-guide/

在页面中引入上述代码,head中的路径正确就能播放了,有兴趣的童鞋可以尝试,也欢迎与我交流。

你可能感兴趣的:(play)