jPlayer插件的使用

Posted 左正

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jPlayer插件的使用相关的知识,希望对你有一定的参考价值。

文讲一下本人在使用jPlayer插件时的整个过程、出现的BUG已经解决办法。

       最近在做bootstrap项目,项目中需要一个响应式、兼容IE7的视频播放插件,经过上网查找,找到了所谓可以兼容到IE6的响应式视频播放插件——jPlayer。注:本代码的功能是打开自动循环播放,如果不需要,可以修改个别属性。

一、下载插件包。

官网下载插件包:点击打开链接,这种网站当然有中文版:点击打开链接 (PS:感觉网站布局有点丑,像高仿网站技术分享。但仍挡不住我对它爱的深沉技术分享),就现在来看,中文网的版本更新慢于英文网站。打开官网,首页就有一个大大的Download按钮,也可以点击菜单栏里的Download选项进行下载。

 

二、在html中使用。

下载的插件包中有很多文件,官网给的比较全,还有各种例子,在example文件夹中,你可以看相关代码的效果。

技术分享

在使用前的注意事项:

技术分享

这些在官网的“开发文档”栏目有的,建议用前一定要阅读一下它的文档。

 

建立html文件(头尾这边就省略了),引用jPlayer相关js、css文件(css文件有多种样式可供选择这边随便引用一种):

 

[html] view plain copy
 
  1. <span style="white-space:pre">      </span><link href="./dist/skin/pink.flag/css/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />  
  2. <span style="white-space:pre">      </span><script type="text/javascriptsrc="./lib/jquery.min.js"></script>  
  3. <span style="white-space:pre">      </span><script type="text/javascript" src="./dist/jplayer/jquery.jplayer.min.js"></script>  

 

开始写html,主要是视频放置位置和一些控制按键(这些代码可以上网搜一下,都有的):

[html] view plain copy
 
  1. <div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">  
  2.     <div class="jp-type-single">  
  3.        <!-- 视频放置位置 -->  
  4.         <div id="jquery_jplayer_1" class="jp-jplayer"></div>  
  5.   
  6.         <!-- 控制按键 -->  
  7.         <div class="jp-gui">  
  8.            <!-- 视频中间的play大按钮 -->  
  9.             <div class="jp-video-play">  
  10.                 <button class="jp-video-play-icon" role="button" tabindex="0">play</button>  
  11.             </div>  
  12.   
  13.             <div class="jp-interface">  
  14.                <!-- 视频中间的play大按钮 -->  
  15.                 <div class="jp-progress">  
  16.                     <div class="jp-seek-bar">  
  17.                         <div class="jp-play-bar"></div>  
  18.                     </div>  
  19.                 </div>  
  20.                 <!-- 播放时间 -->  
  21.                 <div class="jp-current-time" role="timer" aria-label="time"</div>  
  22.                 <!-- 剩余时间 -->  
  23.                 <div class="jp-duration" role="timer" aria-label="duration"</div>  
  24.                 <!-- 文字,显示播放的主题 -->  
  25.                 <div class="jp-details">  
  26.                     <div class="jp-title" aria-label="title"</div>  
  27.                 </div>  
  28.                 <!-- 控制按键 -->  
  29.                 <div class="jp-controls-holder">  
  30.                    <!-- 声音按键 -->  
  31.                     <div class="jp-volume-controls">  
  32.                         <button class="jp-mute" role="button" tabindex="0">mute</button>  
  33.                         <button class="jp-volume-max" role="button" tabindex="0">max volume</button>  
  34.                         <div class="jp-volume-bar">  
  35.                             <div class="jp-volume-bar-value"></div>  
  36.                         </div>  
  37.                     </div>  
  38.                     <!-- 播放控制 -->  
  39.                     <div class="jp-controls">  
  40.                         <button class="jp-play" role="button" tabindex="0">play</button>  
  41.                         <button class="jp-stop" role="button" tabindex="0">stop</button>  
  42.                     </div>  
  43.                     <!-- 全屏按钮 -->  
  44.                     <div class="jp-toggles">  
  45.                         <button class="jp-repeat" role="button" tabindex="0">repeat</button>  
  46.                         <button class="jp-full-screen" role="button" tabindex="0">full screen</button>  
  47.                     </div>  
  48.                 </div>  
  49.             </div>  
  50.         </div>  
  51.         <!-- 底部附加文字内容 -->  
  52.         <div class="jp-no-solution">  
  53.             <span>Update Required</span>  
  54.             To play the media you will need to either update your browser to a recent version or update your <href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.  
  55.         </div>  
  56.     </div>  
  57. </div>  

 

剩下的就是JS代码了:

 

[javascript] view plain copy
 
  1. <script type="text/javascript">  
  2. $(document).ready(function(){  
  3.   
  4.     $("#jquery_jplayer_1").jPlayer({  
  5.         ready: function () {  
  6.             $(this).jPlayer("setMedia", {  
  7.                title: "Big Buck Bunny",  
  8.                 m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",//视频文件  
  9.                ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",//视频文件  
  10.                webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",//视频文件  
  11.                poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"//视频初始时图片  
  12.             }).jPlayer("play")//自动播放  
  13.         },  
  14.        swfPath: "../js/jPlayer/dist/jplayer/jquery.jplayer.swf",//当不支持html5的时候启用swf flash  
  15.        supplied: "webmv, ogv, m4v", //包含的文件格式  
  16.        size: {  
  17.             width: "640px",  
  18.             height: "360px",  
  19.            cssClass: "jp-video-360p"  
  20.         },  
  21.         useStateClassSkin: true,  
  22.         autoBlur: false,  
  23.         smoothPlayBar: true,  
  24.         keyEnabled: true,  
  25.         remainingDuration: true,  
  26.         toggleDuration: true  
  27.           
  28.     }).jPlayer("play").jPlayer("repeat");//自动播放 自动循环  
  29. })  
  30. </script>  

代码完成。

 

打开网页,查看效果:

技术分享

底部这些显示样式都是可以更改的,可以引用它自己其余的css样式,也可以自己在css文件中设置。

 

三、遇到的BUG以及处理:

1.本人引用是在自己的html文件中引用的,文件中还包括其他的代码,当按照上边代码写的时候。报错:

 

[plain] view plain copy
 
  1. $(...).jPlayer is not a function  

即在jQuery中调用jPlayer函数时报错,造成这种BUG的原因有可能是:

 

 

[plain] view plain copy
 
  1. 1.没有引用成功jpalyer.js文件或者引用路径有问题;  
  2. 2.没有引用jQuery文件或者引用路径有问题;  
  3. 3.有可能你在html最后又引用了另一个版本的jquery.js文件,导致不能识别是用哪个jquery  

 

2.当把视频文件换成自己本地的flv文件后,视频无法播放,出现播放区域无的现象,经上网查询得知:

 

[plain] view plain copy
 
  1. jPlayer在引用本地文件时,直接访问本地的html是无效的,要将html放到服务器上,以IP地址的形式访问才行。  

 

3.至于兼容性问题,不需要手动自己处理,jPlayer官网上已经说明他的兼容问题,经过上边操作,是可以成功在IE7中展示的,如果出现无法展示情况,可能是:

 

[plain] view plain copy
 
  1. js代码中最后的设置属性后的逗号没有去除  

即,根据IE的报错,找到报错那一行或者报错的前一行,最后一个逗号要去掉,这可能是因为IE对jQuery代码要求比较严格,逗号是不允许的。 

 

另外,如果不是这个问题,IE也没有报错,就是展示不出来,那就只有可能是你配置的问题。

完。

以上是关于jPlayer插件的使用的主要内容,如果未能解决你的问题,请参考以下文章

在wordpress中使用jPlayer从不同的url播放不同的文件

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

有没有办法通过单击按钮来更改 Jquery 插件选项?

视频及MP3 播放浅析 Jplayer参数详细

同一页面上的Jplayer音频和视频不起作用

基于jPlayer的三分屏制作