jPlayer插件的使用
文讲一下本人在使用jPlayer插件时的整个过程、出现的BUG已经解决办法。
最近在做bootstrap项目,项目中需要一个响应式、兼容IE7的视频播放插件,经过上网查找,找到了所谓可以兼容到IE6的响应式视频播放插件——jPlayer。注:本代码的功能是打开自动循环播放,如果不需要,可以修改个别属性。
一、下载插件包。
官网下载插件包:点击打开链接,这种网站当然有中文版:点击打开链接 (PS:感觉网站布局有点丑,像高仿网站
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/bye.gif)
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/shy.gif)
二、在html中使用。
下载的插件包中有很多文件,官网给的比较全,还有各种例子,在example文件夹中,你可以看相关代码的效果。
![](/assets/blank.gif)
在使用前的注意事项:
![](/assets/blank.gif)
这些在官网的“开发文档”栏目有的,建议用前一定要阅读一下它的文档。
建立html文件(头尾这边就省略了),引用jPlayer相关js、css文件(css文件有多种样式可供选择这边随便引用一种):
- <span style="white-space:pre"> </span><link href="./dist/skin/pink.flag/css/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
- <span style="white-space:pre"> </span><script type="text/javascript" src="./lib/jquery.min.js"></script>
- <span style="white-space:pre"> </span><script type="text/javascript" src="./dist/jplayer/jquery.jplayer.min.js"></script>
开始写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>
代码完成。
打开网页,查看效果:
![](/assets/blank.gif)
底部这些显示样式都是可以更改的,可以引用它自己其余的css样式,也可以自己在css文件中设置。
三、遇到的BUG以及处理:
1.本人引用是在自己的html文件中引用的,文件中还包括其他的代码,当按照上边代码写的时候。报错:
- $(...).jPlayer is not a function
即在jQuery中调用jPlayer函数时报错,造成这种BUG的原因有可能是:
- 1.没有引用成功jpalyer.js文件或者引用路径有问题;
- 2.没有引用jQuery文件或者引用路径有问题;
- 3.有可能你在html最后又引用了另一个版本的jquery.js文件,导致不能识别是用哪个jquery
2.当把视频文件换成自己本地的flv文件后,视频无法播放,出现播放区域无的现象,经上网查询得知:
- jPlayer在引用本地文件时,直接访问本地的html是无效的,要将html放到服务器上,以IP地址的形式访问才行。
3.至于兼容性问题,不需要手动自己处理,jPlayer官网上已经说明他的兼容问题,经过上边操作,是可以成功在IE7中展示的,如果出现无法展示情况,可能是:
- js代码中最后的设置属性后的逗号没有去除
即,根据IE的报错,找到报错那一行或者报错的前一行,最后一个逗号要去掉,这可能是因为IE对jQuery代码要求比较严格,逗号是不允许的。
另外,如果不是这个问题,IE也没有报错,就是展示不出来,那就只有可能是你配置的问题。
完。
jPlayer插件的使用相关推荐
- jplayer插件的api_如何使用jPlayer插件(jQuery)在您的网站上添加音频和视频
jplayer插件的api jPlayer video player. Today we continue jQuery lessons, and will talk about adding cus ...
- jPlayer插件使用踩过的坑
业务需要,对于好几年前的老项目进行二次开发.项目的主要技术使用jquery+require.js. 最近需要做一个可以在系统中播放录音的需求,使用了兼容ie8的jPlayer插件. 这个插件已经有很长 ...
- Jplayer插件使用浅析
接触jPlayer插件后的第一印象是,它拥有"最好"的兼容性,向下可以兼容到IE6,官网上有详细的兼容性说明. Windows: Chrome, Firefox, Internet ...
- WEB视频播放器插件,总结
以下是关于网页中嵌入视频播放插件的各种资料的总结 基于H5的Vediojs Jquery视频播放插件 jPlayer播放插件 JqeryVideo.js 和 Jplayer 下载 基于H5的Vedio ...
- 网页音视频播放器jPlayer使用介绍
最近项目中需要播放音频. 视频之前的已经做了, 要加上播放音频的功能, 还要兼容ie8, 还要禁止下载. 禁止下载这个就不管了, 因为不可能禁止. 要兼容ie8, 就不能用<audio>了 ...
- python web项目案例教程_Python Web开发案例教程(慕课版)——使用Flask、Tornado、Django...
第1章 Web开发基础1 1.1 Web概述 2 1.1.1 什么是Web 2 1.1.2 Web应用程序的工作原理 2 1.1.3 Web的发展历程 2 1.2 Web前端开发基础 4 1.2.1 ...
- EaglePHP开源框架全新改版(v1.8)
2019独角兽企业重金招聘Python工程师标准>>> 更新日志: 1.后台新闻发布增加根据指定URL采集网页内容的功能. 2.后台增加网页采集规则管理,可实现对任何网站内容的采集. ...
- 阅读分析程序源代码的一些方法(转载整理)
前言 最近项目组中有较多新成员需要阅读熟悉项目中已有的程序代码,好多成员一时间对项目代码摸不清头绪,这里在网络上收集了相关源代码阅读分析的一些方法,整理于此. 正文 摘自(繁体中文Traditiona ...
- 跨平台音视频jQuery插件:jPlayer
2019独角兽企业重金招聘Python工程师标准>>> 1简介 jPlayer是个用JavaScript写的完全免费和开源的媒体库(media library).作为jQuery插件 ...
最新文章
- mysql9索引实战_课程介绍目录索引
- python的官方网站地址是什么-python赋值和地址
- 实用ExtJS教程100例-006:ExtJS中Window的用法示例
- 【计算机基础】 Virtual memory 虚拟内存
- 阿里每天究竟要抵御多少攻击
- 配置keepalived+LVS_DR
- drupal建站系统_容器将如何塑造Drupal生态系统
- Android UI组件----ListView列表控件详解
- arm-linux-androideabi-gcc is unable to create an executable file.
- delphi2010 窗体使用技能总结
- C语言贪吃蛇大作业总结,C语言实现贪吃蛇游戏
- python编解码的字节与字符串相互转换
- 服务器cmd升级系统命令,02-软件升级操作指导(命令行版)
- 视频教程-C语言编程初级入门-C/C++
- 学信认证使用Jetbrains教育授权方式
- Python实现——依次计算一系列给定字符串的字母值,字母值为字符串中每个字母对应的编号值(A对应1,B对应2,以此类推,不区分大小写字母,非字母字符对应的值为0)的总和。
- 【产品】OEM、ODM、OBM是什么?
- 边边角 直角时 钝角时_几何中的角度名称:锐角,钝角,直角和直角,已定义...
- GBase 8s与Oracle对比分析
- 配置fabric(超级记账本)时docker-compose安装教程
热门文章
- C++Bogo Sort猴子排序的实现算法(附完整源码)
- STL里resize和reserve的区别?
- C++的内存管理是怎样的
- java快递下单模块,Java开发快递物流项目(7)
- 3.内存分配、逃逸分析与栈上分配、直接内存和运行时常量池、基本类型的包装类和常量池、TLAB、可达性分析算法(学习笔记)
- 30_visdom可视化、TensorboardX及其案例、安装visdom、使用visdom的案例
- B06_NumPy 切片和索引
- C++中的数组array和vector,lambda表达式,C字符串加操作,C++中新类型数组(数组缓存),多元数组,new缓冲
- Oracle_Net_Configuration_Assistant_配置步骤
- java 初始化二维数组_java二维数组的常见初始化