播放器JPlayer的使用及遇到的问题

原文地址:http://blog.csdn.net/z69183787/article/details/8178656?_t_t_t=0.5149982699228508

jPlayer是一个用于控制和播放mp3文件的jQuery插件。它在后台使用Flash来播放mp3文件,前台播放器外观完全可以使用XHML/CSS自定义。支持:

有一点比较好的是,在支持HTML5的浏览器上会使用html5的标签audio或者video,而不支持的浏览器上使用swf来播放

选择需要播放的Mp3文件。

播放、暂停、停止控制。
音量控制。 

取得播放进度等信息。

官方网站:http://www.jplayer.org/

支持格式:

  • HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
  • Flash: mp3, mp4 (AAC/H.264), flv

范例:

[html]  view plain  copy
  1. >  
  2. <html>  
  3. <head>  
  4. <meta charset=utf-8 />  
  5.   
  6.   
  7. <title>Demo : jPlayer as a video playertitle>  
  8. <link href="skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />  
  9. <script type="text/javascript" src="js/jquery-1.7.1.js">script>  
  10. <script type="text/javascript" src="js/jquery.jplayer.min.js">script>  
  11. <script type="text/javascript">  
  12. // 
  13. $(document).ready(function(){ 
  14.  
  15.     $("#jquery_jplayer_1").jPlayer({ 
  16.         ready: function () { 
  17.             $(this).jPlayer("setMedia", { 
  18.                 flv: "/workflowLocal/j/1.flv" 
  19.             }); 
  20.         }, 
  21.         swfPath: "js", 
  22.         supplied: "flv", 
  23.         size: { 
  24.             width: "640px", 
  25.             height: "360px", 
  26.             cssClass: "jp-video-360p" 
  27.         } 
  28.     }); 
  29.  
  30. }); 
  31. function a(){ 
  32.         $("#jquery_jplayer_1").jPlayer("setMedia", { 
  33.                 flv: "/workflowLocal/j/2.flv" 
  34.             }); 
  35.     } 
  36. //]]>  
  37. script>  
  38. head>  
  39. <body>  
  40.         <input type="button" onclick="a();">  
  41.         <div id="jp_container_1" class="jp-video jp-video-360p">  
  42.             <div class="jp-type-single">  
  43.                 <div id="jquery_jplayer_1" class="jp-jplayer">div>  
  44.                 <div class="jp-gui">  
  45.                     <div class="jp-video-play">  
  46.                         <a href="javascript:;" class="jp-video-play-icon" tabindex="1">playa>  
  47.                     div>  
  48.                     <div class="jp-interface">  
  49.                         <div class="jp-progress">  
  50.                             <div class="jp-seek-bar">  
  51.                                 <div class="jp-play-bar">div>  
  52.                             div>  
  53.                         div>  
  54.                         <div class="jp-current-time">div>  
  55.                         <div class="jp-duration">div>  
  56.                         <div class="jp-controls-holder">  
  57.                             <ul class="jp-controls">  
  58.                                 <li><a href="javascript:;" class="jp-play" tabindex="1">playa>li>  
  59.                                 <li><a href="javascript:;" class="jp-pause" tabindex="1">pausea>li>  
  60.                                 <li><a href="javascript:;" class="jp-stop" tabindex="1">stopa>li>  
  61.                                 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mutea>li>  
  62.                                 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmutea>li>  
  63.                                 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volumea>li>  
  64.                             ul>  
  65.                             <div class="jp-volume-bar">  
  66.                                 <div class="jp-volume-bar-value">div>  
  67.                             div>  
  68.                             <ul class="jp-toggles">  
  69.                                 <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screena>li>  
  70.                                 <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screena>li>  
  71.                                 <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeata>li>  
  72.                                 <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat offa>li>  
  73.                             ul>  
  74.                         div>  
  75.                         <div class="jp-title">  
  76.                             <ul>  
  77.                                 <li>shentong metroli>  
  78.                             ul>  
  79.                         div>  
  80.                     div>  
  81.                 div>  
  82.                 <div class="jp-no-solution">  
  83.                     <span>Update Requiredspan>  
  84.                     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 plugina>.  
  85.                 div>  
  86.             div>  
  87.         div>  
  88. body>  
  89.   
  90. html>  
大部分都是官网上的demo,需要引入jquery.jplayer.min.js 以及官网上的2个css包,还有Jplayer.swf

目录结构如下,js文件夹中为官网提供的js文件,skin为官网提供的css皮肤包


这里遇到二个奇怪的问题,在本地时测试demo,只能播放官网说的m4v格式,而用flv格式就不行,但放在服务器上就解决了。

另外就是

[html]  view plain  copy
  1. ready: function () {  
  2.             $(this).jPlayer("setMedia", {  
  3.                 flv: "/workflowLocal/j/1.flv"  
  4.             });  
  5.         },  
这里的setMedia设置文件路径时候,本地只能引用url路径 比如:http://xxxxxxxxxxxxxx,而不能使用绝对或者相对路径

而在服务器上时,则可以使用绝对路径,但一定要是以项目根目录开始的绝对路径才可以。

这二个问题不知道怎么解决。。。

因为项目中要用到切换视频的功能,所以尝试了一下 代码如下 ,点击按钮切换

[html]  view plain  copy
  1. function a(){  
  2.         $("#jquery_jplayer_1").jPlayer("setMedia", {  
  3.                 flv: "/workflowLocal/j/2.flv"  
  4.             });  
  5.     }  

服务器上播放效果如下:




你可能感兴趣的:(源码分析/架构深入/开源框架)