jPlayer插件的使用

jPlayer插件的使用

2017年04月21日 11:03:19 JENIFURS 阅读数：3952 标签： jPlayer视频插件兼容bug 更多

个人分类： jQuery

 

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/fuyujiaof/article/details/70312619

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

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

一、下载插件包。

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

二、在html中使用。

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

在使用前的注意事项：

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

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

1.  
   <link href="./dist/skin/pink.flag/css/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
2.  
   <script type="text/javascript" src="./lib/jquery.min.js"></script>
3.  
   <script type="text/javascript" src="./dist/jplayer/jquery.jplayer.min.js"></script>

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

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 <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
55.  
    </div>
56.  
    </div>
57.  
    </div>

剩下的就是JS代码了：

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.  
    "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>
31.  
     

代码完成。

打开网页，查看效果：

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

三、遇到的BUG以及处理：

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

$(...).jPlayer is not a function

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

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

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

jPlayer在引用本地文件时，直接访问本地的html是无效的，要将html放到服务器上，以IP地址的形式访问才行。

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

js代码中最后的设置属性后的逗号没有去除

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

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

完。