最近工作中用到视频播放，在网上搜索对比了好几款开源播放插件后，觉得 jPlayer 是比较不错的，故作此记录！
接下来先快速的展示一下 利用jPlayer播放.flv视频的效果：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <!--以下为两种不同的皮肤---> 7 <!--<link href="jPlayer-2.9.2/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />--> 8 <link href="jPlayer-2.9.2/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" /> 9 <script src="Scripts/jquery-1.10.2.min.js"></script> 10 11 <script src="jPlayer-2.9.2/dist/jplayer/jquery.jplayer.min.js"></script> 12 <script type="text/javascript" src="jPlayer-2.9.2/dist/add-on/jquery.jplayer.inspector.min.js"></script> 13 14 <script type="text/javascript"> 15 16 //<![CDATA[ 17 $(document).ready( 18 function () { 19 $("#jquery_jplayer_1").jPlayer({ 20 ready: function () { 21 $(this).jPlayer("setMedia", { 22 title: "jPlayer", 23 flv: "VideoSources/NO1410130002.flv", 24 }).jPlayer("play"); //自动播放 25 }, 26 swfPath: "jPlayer-2.9.2/dist/jplayer", 27 supplied: "flv", 28 solution: "flash", 29 size: { 30 "640px", 31 height: "360px", 32 cssClass: "jp-video-360p" 33 }, 34 useStateClassSkin: true, 35 autoBlur: false, 36 smoothPlayBar: true, 37 keyEnabled: true, 38 remainingDuration: true, 39 toggleDuration: true, 40 loop: true //循环播放 41 }) 42 }); 43 //]]> 44 </script> 45 46 </head> 47 <body> 48 <div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player"> 49 <div class="jp-type-single"> 50 <div id="jquery_jplayer_1" class="jp-jplayer"></div> 51 <div class="jp-gui"> 52 <div class="jp-video-play"> 53 <button class="jp-video-play-icon" role="button" tabindex="0">play</button> 54 </div> 55 <div class="jp-interface"> 56 <div class="jp-progress"> 57 <div class="jp-seek-bar"> 58 <div class="jp-play-bar"></div> 59 </div> 60 </div> 61 <div class="jp-current-time" role="timer" aria-label="time"> </div> 62 <div class="jp-duration" role="timer" aria-label="duration"> </div> 63 <div class="jp-controls-holder"> 64 <div class="jp-controls"> 65 <button class="jp-play" role="button" tabindex="0">play</button> 66 <button class="jp-stop" role="button" tabindex="0">stop</button> 67 </div> 68 <div class="jp-volume-controls"> 69 <button class="jp-mute" role="button" tabindex="0">mute</button> 70 <button class="jp-volume-max" role="button" tabindex="0">max volume</button> 71 <div class="jp-volume-bar"> 72 <div class="jp-volume-bar-value"></div> 73 </div> 74 </div> 75 <div class="jp-toggles"> 76 <button class="jp-repeat" role="button" tabindex="0">repeat</button> 77 <button class="jp-full-screen" role="button" tabindex="0">full screen</button> 78 </div> 79 </div> 80 <div class="jp-details"> 81 <div class="jp-title" aria-label="title"> </div> 82 </div> 83 </div> 84 </div> 85 <div class="jp-no-solution"> 86 <span>Update Required</span> 87 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>. 88 </div> 89 </div> 90 </div> 91 92 </body> 93 </html>
效果图：
写在最后：以上只是是记录了jplayer 的简单用法，如果想更多的深入，可以去官网查看相关文档：http://jplayer.org/