jPlayer插件的使用

开始写html，主要是视频放置位置和一些控制按键（这些代码可以上网搜一下，都有的）：

 <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">
            <!-- 视频中间的play大按钮 -->
             <div class="jp-video-play">
                 <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
             </div>
 
             <div class="jp-interface">
                <!-- 视频中间的play大按钮 -->
                 <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代码了：

 <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",//当不支持html5的时候启用swf flash
        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>