jPlayer

jPlayer中文学习、交流平台

jPlayer 2.6.0开发者手册

如果你初次使用jPlayer,点击快速开始指导查看获得帮助。 点击查看Support页面是一些常见问题列表。 点击jPlayerPlaylist获得播放列表相关的插件帮助。

jPlayer 基础知识

基本的jPlayer 多媒体格式

基本的jPlayer多媒体格式是那些同时被Flash解决方案和不支持Flash的html5浏览器如iOS支持的格式。有一点非常重要,这些格式之一提供给jPlayer才能让主流的浏览器能播放你的多媒体资源。在给jPlayer提供了基本的多媒体格式之后,还可提供额外的相应格式来提升html5对跨浏览器解决方案的支持。 更多详情参见配置jPlayer({"supplied": "formats"})

音频

必须提供以下一种音频格式:

  • MP3
  • M4A

注意,并非同时提供两种格式就更好,因为事实证明html5浏览器要么两者都支持要么两者都不支持。

视频

必需提供以下视频格式:

  • M4V

设置jPlayer的尺寸大小

使用构造函数配置jPlayer({size:Object})设置jPlayer的高宽。

使用构造函数配置jPlayer({sizeFull:Object})设置全屏尺寸。

注意可通过构造函数配置jPlayer({backgroundColor:"#RRGGBB"})设置jPlayer背景颜色。

Flash 安全规则

使用下面的代码放宽了对jPlayer SWF 文件的限制,并且可以调用任何域名的swf文件了。

  1. flash.system.Security.allowDomain("*");
  2. flash.system.Security.allowInsecureDomain("*");

通常,要上传swf文件和js文件到你域名下的js目录中。更改swf路径使用构造函数配置jPlayer({"swfPath":path})

严格来讲,插件文件可能会远程链接到jplayer.org上,但请求你们不要链接到jplayer.com上,因为当前我们还没有充足资源做一个cdn。另外,远程服务器上的Flash播放软件要求所有的jPlayer("setMedia", media)设置的多媒体文件URL使用绝对路径。

尝试电脑本地运行jPlayer会产生Flash安全校验,你可能需要使用Flash Settings Manager开启本地文件的访问权限。 更多详情参见Flash Player Help

要在本地开发,你需要在自己的电脑上安装一个服务器,比如apache,使localhost生效。

多媒体编码

你提供的多媒体文件必需遵守html5浏览器支持的多媒体数字信号编解码器规则。essential jPlayer formats (音频MP3或M4A和视频M4V)也必须遵守 Adobe Flash插件支持的多媒体数字信号编解码器规则。

jPlayer需要区分音频和视频。这是因为jPlayer对两种不同的多媒体类型表现稍有不同,如视频必须显示出来。于是,那些容器格式的缩写中包含一个音频缩写和一个视频缩写来使它们对应的资源唯一。例如,M4A 和M4V都是mp4 文件,jPlayer知道分别以音频和视频的方式播放它们。

MP3

由于一些浏览器使用jPlayer的Flash元素,MP3文件必须根据浏览器的Adobe Flash插件限制进行编码:

  • 恒定比特率编码。
  • 采样率要是11,025Hz 的倍数,如22,050Hz, 44,100Hz是有效的采样率。
M4A / M4V

MP4文件是一个同时支持音频和视频的容器。M4A是音频MP4, M4V是视频mp4. 推荐的标准浏览器和手机浏览器编码选项有:

  • H.264基线规范3.0级视频,30帧每秒时不小于640*480 ,注意基线规范不支持B帧。
  • AAC-LC音频,大于48kHz。

元数据应在编码数据的开头处,因为Flash解决方案要开始播放必须有元数据。上面的编码规范视编码器而异,但通常优先考虑web或者流。如果疑问,MetaData Mover的第三个链接或许能解答你对metadata的疑问。

OGA / OGV

ogg 文件是一个同时支持音频和视频的容器。 oga 是ogg音频格式,ogv是ogg视频格式。Vorbis Theora编解码器对ogg完全支持。

WEBMA / WEBMV

webm 文件是一个同时支持音频和视频的容器。webma 是webm 音频格式,webmv是webm视频格式。Vorbis VP8编解码器对webm完全支持。

WAV

很多html5浏览器支持wav格式,即使是作为一种附加格式,我们也建议避免使用它。建议的编码选项是:

  • 8位和16位线性PCM
  • 只支持1PCM编码
FLA / FLV

Flash flv 文件是一个同时支持音频和视频的容器。fla是音频flv格式,flv是视频flv格式。 Flash 播放软件支持fla/flv格式。

RTMPA / RTMPV

RTMP协议使用Flash多媒体服务器(FMS)将多媒体转化成jPlayer Flash解决方案的多媒体流。RTMPA格式是音频RTMP流,RTMPV格式是视频RTMP流,html解决方案不支持RTMP。

M3U8A / M3U8V

M3U8 播放列表格式是苹果HLS文件(流媒体文件)。m3u8a 是音频格式,m3u8v是视频格式。这种格式在苹果设备和浏览器上运行良好,但是在别的地方支持受限。

M3UA / M3UV

m3u播放列表格式是 MPEG url 文件,m3ua是音频格式,m3uv是视频格式。

FLAC

flac 音频格式。

编码器:
索引:

服务器响应

MIME 类型

你的域名所在服务器必须给所有的多媒体url提供正确的mime类型(content类型)。

提供不正确的mime类型会使多媒体资源在某些html5浏览器上无法播放。这是引起firefox和opera问题的常见原因。其他浏览器没这么严格,但是当你的多媒体文件在哪一浏览器上无法正常播放的时候,应该检查一下mime类型。

多媒体MIME类型
  • MP3: audio/mpeg
  • MP4: audio/mp4 video/mp4
  • OGG: audio/ogg video/ogg
  • WebM: audio/webm video/webm
  • WAV: audio/wav

如果音频和视频你都是用同样的文件扩展名,例如audio.mp4 和video.mp4, 那么两者都简单地使用视频版mime类型如video/mp4就可以。

在apache服务器上,你可以基于以下文件扩展名使用.htaccess 文件来设置mime类型:

  1. # AddType TYPE/SUBTYPE EXTENSION
  2.  
  3. AddType audio/mpeg mp3
  4. AddType audio/mp4 m4a
  5. AddType audio/ogg ogg
  6. AddType audio/ogg oga
  7. AddType audio/webm webma
  8. AddType audio/wav wav
  9.  
  10. AddType video/mp4 mp4
  11. AddType video/mp4 m4v
  12. AddType video/ogg ogv
  13. AddType video/webm webm
  14. AddType video/webm webmv
不要使用gzip 压缩多媒体文件

禁用所有多媒体文件的gzip 编码。多媒体文件已经是压缩过的,gzip 只是浪费服务器cpu。

Adobe Flash插件会检查你的媒体文件是否经过gzip压缩。

也不要使用gzip压缩你的jPlayer.swf文件,js 可以随意压缩。

字节范围请求

你的服务器必须允许Range请求。 检查是否允许非常简单,只要查看你的服务器响应头部是否包含Accept-Ranges。 大多数html5 浏览器允许在下载过程中跟踪到文件新位置,所以服务器必须允许新的RangeRange请求。

接收字节流Range请求失败会引起一些html5浏览器问题。通常,多媒体文件的持续时间无法从文件中读到,因为一些格式要求读取文件的开始和结尾来知道它的持续时间。 如果服务器上的Range请求没有开启,chrome浏览器会出现最多问题,但是所有的浏览器都有些问题,除非你等待所有媒体加载完之后才跳到文件结尾。

已知这个问题会使默认配置下的jetty 6服务器受到影响。

jPlayer委员会写了一个能支持Range请求多媒体文件的php函数。关于这个话题参见jPlayer Support Group Post

保护你的多媒体文件

当你要限制多媒体文件的访问权限的时候要小心了。多媒体文件url必须被internet上的用户访问,它的响应格式也必须符合预期。

使用服务器响应来禁用多媒体文件的本地缓存可能会引起某些html5浏览器的问题。这会导致无法获知多媒体播放的持续时间,这样会在jPlayer的持续时间上显示NaN。

如果你要在后台做些操作让它更安全,那么保证你如上所述接收字节 Range请求。

如何用CSS或者jQuery禁用jPlayer

由于jPlayer在某些浏览器中使用Flash, 所以表示jPlayer的div 元素不能被隐藏。手机浏览器也不能像html5 多媒体元素一样被隐藏。

如果你想让jPlayer不可见,可以把jPlayer div元素的尺寸设置为0。你要慎重使用jQuery 动画比如fadeIn() 或者fadeOut(),不要在jPlayer 的div 或者它的任意父级元素上使用。

假设你在jPlayer被隐藏的时候没有对它执行任何操作。jPlayer 会在被隐藏后再显示出来的时候尝试恢复和重新配置Flash 解决方案。

例如,不要做以下操作:

  1. <head>
  2. <style>
  3. #jquery_jplayer {
  4. display:none; /* Disables jPlayer when using Flash */
  5. }
  6. </style>
  7. <script type="text/javascript">
  8. $("#jquery_jplayer").hide(); /* Disables jPlayer when using Flash */
  9. </script>
  10. </head>
  11.  
  12. <body>
  13. <div id="jquery_jplayer"></div>
  14. </body>

安全约束

为了消除跨站攻击,要在配置{noConflict}和jPlayer ID名上面做一些限制约束。这些限制是源于页面中Flash 播放软件和javascript之间的通信需要使用jQuery变量名和jPlayer元素ID。直接访问jPlayer.swf文件暴露了潜在的弱点,这已经通过增加规则来排除这种危险。

白名单字符有: A-Z a-z 0-9 _ - . 或者换句话说,字母数字字符,下划线,连字符/减号 和半角句号。

jPlayer 数据

jPlayer 数据通常通过event object访问,因为内部数据在产生events之前被更新了。这是一个timeupdate 事件处理器通过构造函数配置创建的例子:

  1. $('#jp').jPlayer({
  2. timeupdate: function(event) { // 4Hz
  3. // Restrict playback to first 60 seconds.
  4. if (event.jPlayer.status.currentTime > 60) {
  5. $(this).jPlayer('stop');
  6. }
  7. }
  8. // Then other options, such as: ready, swfPath, supplied and so on.
  9. });

jPlayer对象本身可能都要通过$('#jp').data('jPlayer')读取。然而,因为这样可对它所有的数据进行读写,也可访问它所有的方法甚至是内部方法,所以只推荐高级开发者使用。读数据没问题,但是设置数据可能会引起意想不到的问题。

之前的timeupdate 事件代码可以用以下使用interval的代码进行粗糙的模拟:

  1. var jp = $('#jp'), jpData = jp.data('jPlayer');
  2. setInterval(function() {
  3. // Restrict playback to first 60 seconds.
  4. if (jpData.status.currentTime > 60) {
  5. jp.jPlayer('stop');
  6. }
  7. },100); // 10Hz

See also: jPlayer("option")

jPlayer和Zepto

jPlayer 已经进行了优化,所以你现在可以使用Zepto代替jQuery.

和数据模块一起编译要求Zepto 1.0+ 。

如果你想把jPlayer作为Zepto的AMD 模块,那么你需要在代码中编辑几行代码。默认情况下,AMD模块设置jQuery依赖而不是Zepto.下面是jPlayer代码的头部,你可以清楚地看到有两行代码需要转换。

  1. (function (root, factory) {
  2. if (typeof define === 'function' && define.amd) {
  3. // AMD. Register as an anonymous module.
  4. define(['jquery'], factory); // jQuery Switch
  5. // define(['zepto'], factory); // Zepto Switch
  6. } else {
  7. // Browser globals
  8. if(root.jQuery) { // Use jQuery if available
  9. factory(root.jQuery);
  10. } else { // Otherwise, use Zepto
  11. factory(root.Zepto);
  12. }
  13. }
  14. }(this, function ($, undefined) {

为了避免猜测,代码在这里:

  1. define(['jquery'], factory); // jQuery Switch
  2. // define(['zepto'], factory); // Zepto Switch

变成:

  1. // define(['jquery'], factory); // jQuery Switch
  2. define(['zepto'], factory); // Zepto Switch

如果你没有使用AMD模块,那么只要在你的页面包含Zepto 而不是jQuery,jPlayer就可以使用Zepto了。

官方的jPlayer 2.4.0版本开始支持Zepto。

jPlayer 文件

jPlayer需要在服务器上上传两个文件:
jquery.jplayer.min.js
Jplayer.swf

更新jPlayer的时候,保证插件zip 文件中的两个文件都同时更新,因为两个文件连带着变化。

插件文件

jquery.jplayer.min.js

52.8KB (Gzip: 12.7KB)

插件的JS文件使用closure-compiler.appspot.com的简单优化算法进行编译的。

jquery.jplayer.min.js 文件要加在html文件<head> 的jQuery js 文件之后。 下面展示如何使用相对服务器根目录的绝对路径包含js文件。

  1. <head>
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
  3. </script>
  4. <script type="text/javascript" src="/jPlayer/js/jquery.jplayer.min.js">
  5. </script>
  6. </head>
Jplayer.swf

13.8KB

jPlayer插件的Flash 10 文件,使用开源编译器Flex编译。 最新可用版本在这里:Adobe Flex SDK.

不支持HTML5 <video><audio>的浏览器中使用了这个文件。

jPlayer.swf文件必须上传到你的服务器上。默认的位置是在一个相对当前页面名为"js"的文件夹中。 要修改这个flash文件的位置要使用构造函数配置swfPath。 下面是如何设置相对服务器根目录的swfPath路径。更多信息参见jPlayer({swfPath})

  1. $("#jpId").jPlayer( {
  2. swfPath: "/scripts/jPlayer"
  3. });

源码文件

jquery.jplayer.js

jPlayer 的js源码文件。这个文件可以和jquery.jplayer.min.js切换。方法是完全一致的,只是该文件更大一点。

这个js 源代码使用JSHint校验,源码中可以找到配置。

只要懂javascript 和jQuery脚本语言的话,这个文件内容是可识别的。

Jplayer.fla

由于现在编译ActionScript用Flex编译器,这个文件已经不需要了。它被保留在源码中,因为你可以选择使用它来编译ActionScript.

jPlayer 的adobe flash cs4专业版编辑器文件。这个文件可以使用adobe flash cs4 专业版编译成jplayer插件中使用的jplayer.swf文件。jplayer不需要jplayer.fla文件,它除了编译别无它用。

这是个空文件,只是把它的类设置给jplayer.as

Jplayer.as

jPlayer 的as3 源文件。jPlayer除了编译外,不再需要Jplayer.as这个文件。

只要懂flash as3脚本语言的话,这些文件内容是可识别的。

happyworm.jPlayer AS3 包

包含Jplayer.as中用到的类的jPlayer as3 源文件。 jPlayer除了编译外,不需要这些文件。

只要懂flash as3脚本语言的话,这些文件内容是可识别的。

jPlayer 构造函数

$(id).jPlayer( Object: options ) : jQuery

描述

jPlayer构造函数用jQuery选择器(一般是一个ID css选择器)和提供的选项来表示。jPlayer使用的<div> 元素要置空而不能被做它用。

在某些情况下,jPlayer div元素可以放在<body>的顶部避免 页面中的其他元素影响jPlayer的操作。这种情况适用于一个不使用jPlayer的海报特性的音频播放器

最重要的选项是ready 事件处理器,它是一个定义当jPlayer准备可用时执行哪些操作的函数。如果使用了Flash fallback,尝试在ready之前执行操作会导致jPlayer报错,操作无效。

次重要的是swfPath 元素,它定义了jPlayer的swf文件路径。记得要把swf文件上传到你的服务器上。

实例化之后改变jPlayer的选项

可通过 jPlayer("option", key, value) 的方法在jPlayer实例化之后改变选项,这些可改变的选项用符号表明.

通过jPlayer 选项创建的事件处理器

事件处理器可以通过jPlayer构造函数选项而不是真正的选项创建。它们是绑定到jPlayer元素上的事件处理器,包含.jPlayer的jquery命名空间,作为一种绑定到事件到处理器上的简单方式被包含到选项中。这里列出的选项中的事件处理器用 符号表示。

参数
选项

定义jPlayer默认配置的任何变化的对象

ready

Function : (Default: undefined) : 定义绑定到$.jPlayer.event.ready 事件的事件处理器函数。要引用当前对象实例,使用$(this). 通常,建议对象实例至少要使用一个函数$(this).jPlayer("setMedia",media)来保证url 有效可用。

事件处理器ready创建的目的是消除JS代码和Flash代码间的竞态条件。因此保证当js代码执行的时候Flash函数定义已经存在。
这个处理器绑定到.jPlayer 命名空间。

swfPath

String : (Default: "js") : 定义jPlayer 的Jplayer.swf文件的路径。它允许开发者把swf文件放在任何位置,使用相对定位或是绝对路径合作或是相对服务器路径引用。

swfPath选项可以是指向.swf结尾的swf文件路径,也可以是url。例如, For example, jPlayer({swfPath:"/scripts/banana.swf"}) 是你把Jplayer.swf重命名为"banana.swf"之后的路径。不要把.swf 扩展名或者是假设的路径给重命名了。

你可以使用jPlayer({solution:"flash, html")在支持flash的html5浏览器上测试你的swfPath是否正确。

当你执行比如jPlayer("setMedia", media)这样的命令时,不正确的swfPath 会使$.jPlayer.event.error$.jPlayer.error.FLASH 错误。

单独的尾斜杠,比如"myPath/" 和"myPath"是一样的意思。
提供的URL必须使用标准的URL编码规则。

solution

String : (Default: "html, flash") : 定义html和flash解决方案的优先级。默认优先使用html,flash备用。交换顺序"flash, html" 优先使用Flash,备用html。

根据supplied 格式,jPlayer可能会两种解决方案同时使用。例如,使用jPlayer{supplied:"mp3,oga,m4v"} 作为媒体播放器,Firefox等浏览器需要Flash解决方案来播放视频媒体格式,而音频媒体可以使用html解决方案播放。

当然你可以限定值使用一种解决方案,虽然我们不建议你这么做。

jPlayer解决方案的选择取决于你的浏览器和supplied 选项中定义的格式。

supplied

String : (Default: "mp3") : 定义提供给jPlayer的格式。顺序表示优先级,左边的格式优先级最高,右边的优先级较低。

更多格式信息见Media Encoding。 更多关于为什么有些格式是强制的的信息见Essential Formats

必需的音频格式: mp3 or m4a.
必需的视频格式: m4v.

其他对应格式: webma, webmv, oga, ogv, wav, fla, flv, rtmpa, rtmpv.

所有在supplied选项中的格式必需在jPlayer("setMedia",media) 命令中给出。

这个规则也有例外,如一个同时播放视频和音频的多媒体播放器。视频和音频的格式都在supplied 选项中定义。那么在使用jPlayer("setMedia",media)命令的时候,可以使用视频格式也可以使用音频格式。(你必须给出supplied 选项中的所有音频格式和视频格式。)

solution 优先级高于supplied 格式的优先级。jPlayer找到给定解决方案中的第一个可正常工作的格式之后开始工作。所以在,chrome中{solution:"html,flash"} and {supplied:"mp3,oga"} 本机html会播放mp3文件,尽管mp3 和oga它都能播放。

jPlayer格式的选择取决于你的浏览器和solution选项。
必需的格式是那些Flash支持,那些不支持Flash的浏览器比如iPad/iPhone支持对的格式。
其他相应的格式用于增强多核浏览器对html5 多媒体支持。

size

object : 设置restored screen 模式下的尺寸。默认尺寸取决于提供的是音频还是视频格式。当两者都提供时默认使用视频的默认尺寸。

对象属性:

width
String : (Default: [Video:"480px"] [Audio:"0px"]) : css规则的宽度。
height
String : (Default: [Video:"270px"] [Audio:"0px"]) : css规则的高度。
cssClass
String : (Default: [Video:"jp-video-270p"] [Audio:""]) : 在这种模式下添加到cssSelectorAncestor上的类名。
sizeFull

object : 设置全屏模式下的尺寸。默认尺寸取决于提供的是音频还是视频格式。当两者都提供时默认使用视频的默认尺寸。

对象属性:

width
String : (Default: [Video:"100%"] [Audio:"0px"]) : css规则的宽度。
height
String : (Default: [Video:"100%"] [Audio:"0px"]) : css规则的高度。
cssClass
String : (Default: [Video:"jp-video-full"] [Audio:""]) : 在这种模式下添加到cssSelectorAncestor上的类名。
smoothPlayBar

Boolean : (Default: false) : 平滑过渡播放条 Smooths the play bar transitions.

播放条的变化是在250ms内动画效果平滑过渡,而不是一步完成的。播放条移动到了新的位置, 这也影响了它的点击。

时长短的多媒体效果最明显,因为他们的变化步骤最大化了。

250ms的动画周期大约等于html和flash解决方案两者的timeupdate事件周期。

fullScreen

Boolean : (Default: false) : 设置全屏模式的初始状态。Sets the inital state of the full screen mode.

这个选项经常通过界面上的全屏和恢复屏幕按钮变化。如果浏览器支持的话,视频会以真正的全屏展示,否则的话就会以铺满窗口展示。

这个选项影响jPlayer({cssSelectorAncestor}) 元素,因此jPlayer显示跟随GUI显示。

改变fullScreen 选项会相应地改变fullWindow 选项来使之相匹配。 当webkit视频在IOS中使用的时候, fullWindow 选项不会发生改变,这是一个例外。

全屏模式使用W3C全屏API,意味着html 和flash解决方案都使用这种机制。它允许在全屏模式下,在CSS中定义flash 的GUI。记住,Flash 没有内建的GUI控制,这就是为什么它在Adobe Flash 插件中没法全屏显示。

fullWindow

Boolean : (Default: false) : 设置全窗口模式的初始状态。

这个选项是全屏模式无效时候自动设置成的备选项。一般你不会使用这个选项取代 fullScreen 来控制视频如何展示。

这个选项被遗留在此是因为你可以在不想启用全屏代码的时候,使用全窗口系统做它用。

这个选项影响了jPlayer({cssSelectorAncestor}) 元素,因此jPlayer显示跟随GUI显示。

改变fullWindow 选项不会影响fullScreen 选项,但是可能会影响全屏GUI显示,由于css 类可能会改变。比如,如果你在全屏模式下取消设置fullWindow选项。

audioFullScreen

Boolean : (Default: false) : 使音频媒体能通过键盘控制进入全屏模式。

这个选项允许通过键盘控制进入带有海报图像的音频全屏模式,对多媒体播放非常有用。比如,播放列表中既有视频又有音频的一个播放器。

获得更多关于键盘控制的信息参见 jPlayer({keyEnabled}) 选项。

autohide

object : 在屏幕播放状态为GUI 设置auto-hide选项。

对象属性:

restored
Boolean : (Default: false) : 在屏幕恢复模式播放状态时,自动隐藏GUI。
full
Boolean : (Default: true) : 在全屏模式播放状态时自动隐藏GUI。
fadeIn
Number : (Default: 200) : fadeIn 动画的毫秒周期。
fadeOut
Number : (Default: 600) : fadeOut 动画的毫秒周期。
hold
Number : (Default: 1000) : 自动隐藏开始前的暂停毫秒数。
preload

String : (Default: "metadata") : 有效值是 "none", "metadata" 和 "auto", 和html5 草案标准一致。使用"auto"来预加载文件。

预加载是用户代理的暗示,不是一个操作。一些浏览器对这个选项无效。

volume

Number : (Default: 0.8) : 定义从0到1的初始音量值。

muted

Boolean : (Default: false) : 定义静音的初始状态。

globalVolume

Boolean : (Default: false) : 使volume选项被其他开启了globalVolume 选项的jPlayer实例共享。

verticalVolume

Boolean : (Default: false) : 默认情况下,点击音量条是从做开始计算的,这个选项设置为true,那音量就从底部开始计算。

如果这个选项被使用,那么需要在音量条上使用如下的css 样式使之纵向展示:

  1. <style>
  2. .jp-volume-bar {
  3. position:relative;
  4. }
  5. .jp-volume-bar-value {
  6. position:absolute;
  7. bottom: 0;
  8. }
  9. </style>
remainingDuration

Boolean : (Default: false) : 为true时,剩余时间展示在GUI元素duration中。

toggleDuration

Boolean : (Default: false) : 为true时,点击GUI元素duration触发jPlayer({remainingDuration}) 选项。

playbackRate

Number : (Default: 1) : 定义回放速度。建议jPlayer({defaultPlaybackRate})保持初始化期间的值。

playbackRate 只在html 解决方案中有效。status 标志表明浏览器是否开启这个特性。 status.playbackRateEnabled. 它原先是用来显示和隐藏回放速度GUI控制器的,并且在flash解决方案中始终处于隐藏状态。 Android 4.3 Chrome 特性测试中显示开启了playbackRate,但是没有效果。

当GUI predefined cssSelectors 和方法添加到代码中去,它们既不会增加到html 也不会增加到css 中去。这是因为作者感觉playbackRate的操作在跨浏览器中不稳定。你作为开发者,如果觉得合适鼓励增加这个控制。你可以在音量的html/css进行模拟。

playbackRate 的操作因浏览器而异,包括以下不同:

  • jPlayer("setMedia")playbackRate 重置为defaultPlaybackRate (Chrome/Firefox)
  • 多媒体结尾把playbackRate重置为defaultPlaybackRate (IE9/IE10)
  • playbackRate 重置为defaultPlaybackRateratechange 不触发。 (Chrome/IE9/IE10)
  • 只有在暂停时,playbackRate的变化才会生效。(iOS 7.0.3)
  • playbackRate 无效。 (Android 4.3 Chrome)

这个列表只是作者们的观察,可能会因浏览器开发者们更加重视这个多媒体特性而发生变化

defaultPlaybackRate

Number : (Default: 1) : 定义默认的回放速度。建议jPlayer({playbackRate}) 维持初始化时的值。

minPlaybackRate

Number : (Default: 0.5) : 定义最小回放速度。原先是用于GUI。硬编码最小值为0.1。

maxPlaybackRate

Number : (Default: 4) : 定义最大的回放速度。原先是用于GUI。硬编码最大值为16。

verticalPlaybackRate

Boolean : (Default: false) : 默认情况下,点击音量按钮是从左开始计算。将这个选项设置为true,使之按照从底部开始计算。示例css 参见:jPlayer({verticalVolume})

backgroundColor

String : (Default: "#000000") : 设置jPlayer div元素和flash 的背景颜色。这个字符串是一个RGB值。

cssSelectorAncestor

String : (Default: "#jp_container_1") : 定义所有cssSelector的祖先的一个cssSelector。通常是一个html 中包裹在外层的div的id。

参见: jPlayer({fullScreen})jPlayer({fullWindow})

cssSelector

Object : (Default: {cssSelectors}) : 这个对象定义所有用于关联jPlayer控制器和页面中的html反馈的选择器。默认jPlayer使用predefined set of cssSelectors.

noConflict

String : (Default: "jQuery") : 允许设置jQuery为全局变量名。

使用jQuery.noConflict(true)命令之后,这个选项可以变成你需要的。jQuery变量名对Flash 和jPlayer js 的通信很重要。

由于安全要求,新jQuery变量的变量名必须有jQuery 在内 例如:

  1. var lib = {
  2. jQuery: jQuery.noConflict(true)
  3. }
  4. $('#jp').jPlayer({noConflict: 'lib.jQuery'});

参见: Security Restrictions.

wmode

String : (Default: "opaque") : 允许设置Flash 的wmode。

有效的wmode值有: window, transparent, opaque, direct, gpu

注意Firefox 3.6 音频播放器使用Flash解决方案要求设置选项{wmode:"window"}否则的话,浏览器不嗯能够正确在页面中放置Flash。这个问题对Firefox 4.0+ 没有影响,对Firefox 3.6中的视频播放也没有影响。

例如,如果你使用选项设置{supplied:"mp3"},那么你必须设置{wmode:"window"} 选项来保证Firefox 3.6 正确实例化Flash解决方案。

例如,如果你使用选项设置{solution:"flash,html"},那么你必须设置{wmode:"window"} 选项来保证Firefox 3.6 正确实例化Flash解决方案。

例如,如果你使用选项设置{supplied:"mp3,oga"}, 那么wmode 选项无所谓,由于Firefox 3.6中播放oga格式使用html解决方案。

只提供音频格式会将默认wmode变成"window"这个问题在后面也会引述。

loop

Boolean : (Default: false) : 设置循环的初始状态。Sets the initial loop state.

loop 选项同默认的repeat 事件处理器协同工作。点击GUI的重复/关闭重复按钮,触发loop 选项,然后产生一个重复事件。

repeat

Function : (Default: event handler) : 重复事件的处理器函数。

默认的重复事件处理器和loop 选项协同工作。 点击GUI 上的重复/关闭重复按钮,触发loop选项,然后产生一个重复事件。

不像其他事件,repeat事件有一个不一样的默认处理器。这个默认处理器是如下这样的:

  1. repeat: function(event) {
  2. if(event.jPlayer.options.loop) {
  3. $(this).unbind(".jPlayerRepeat").bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
  4. $(this).jPlayer("play");
  5. });
  6. } else {
  7. $(this).unbind(".jPlayerRepeat");
  8. }
  9. }

要在实例化jPlayer之后改变repeat事件处理器,解绑处理器之后再将新的处理器绑定到事件上去。注意,jPlayer 命名空间用于解绑只是jPlayer增加的repeat处理器。

  1. $("#my-jplayer").unbind($.jPlayer.event.repeat + ".jPlayer");
  2. $("#my-jplayer").bind($.jPlayer.event.repeat + ".jPlayer", function() {
  3. // Your new repeat handler code
  4. });

记住你可能也需要清理老的处理器行为。仍然可能会有repeat处理器产生的已经结束的事件处理器存在。

  1. $("#my-jplayer").unbind(".jPlayerRepeat");

作者想不出一个在实例化jPlayer之后要改变repeat处理器的例子,但为了以防万一而以文档形式记录下来。

emulateHtml

Boolean : (Default: false) : 启用html 桥接器。Enables the HTML bridge.

这个选项启动了模拟jPlayer元素上的多媒体属性和事件的桥接器。所有的属性只可读。大部分有用的多媒体都可以被模拟。

使用Popcorn.js的例子。注意这些是音频播放器代码。

  1. ready: function(event) {
  2. if(event.jPlayer.html.used && event.jPlayer.html.audio.available) {
  3. // Use the actual HTML media element
  4. p = Popcorn('#' + $(this).data("jPlayer").internal.audio.id);
  5. } else {
  6. // Enable and use the HTML bridge with the Flash fallback
  7. $(this).jPlayer("option","emulateHtml",true);
  8. p = Popcorn('#' + $(this).attr("id"));
  9. }
  10. }
nativeVideoControls

Object : 定义用户代理黑名单,它包含正则表达式,如果匹配则使用本地控制器。

如果nativeVideoControls匹配,当提供了音频媒体并且设置了jPlayer({noFullWindow}) 时,本地视频控制器不可用。

默认对象时空的:

  1. nativeVideoControls: {
  2. // Works well on standard browsers.
  3. // Phone and tablet browsers can have problems with the controls disappearing.
  4. }
noFullWindow

Object : 定义用户代理黑名单,它包含正则表达式,如果匹配会使全屏和屏幕恢复按钮被隐藏。

默认对象是:

  1. noFullWindow: {
  2. msie: /msie [0-6]\./,
  3. ipad: /ipad.*?os [0-4]\./,
  4. iphone: /iphone/,
  5. ipod: /ipod/,
  6. android_pad: /android [0-3]\.(?!.*?mobile)/,
  7. android_phone: /android.*?mobile/,
  8. blackberry: /blackberry/,
  9. windows_ce: /windows ce/,
  10. iemobile: /iemobile/,
  11. webos: /webos/
  12. }
noVolume

Object :定义用户代理黑名单,它包含正则表达式,如果匹配会使音量控制器被隐藏。

默认对象是:

  1. noVolume: {
  2. ipad: /ipad/,
  3. iphone: /iphone/,
  4. ipod: /ipod/,
  5. android_pad: /android(?!.*?mobile)/,
  6. android_phone: /android.*?mobile/,
  7. blackberry: /blackberry/,
  8. windows_ce: /windows ce/,
  9. iemobile: /iemobile/,
  10. webos: /webos/,
  11. playbook: /playbook/
  12. }
timeFormat

Object : 定义当前时间和持续时间的展示格式。

默认对象是实例化时期的$.jPlayer.timeFormat对象。

keyEnabled

Boolean : (Default: false) : 启用这个实例的键盘控制器特性。

最后播放的实例有焦点。在jPlayer实例化期间,第一个开启了键盘控制器特性的实例获得了焦点。只有开启了这个特性的实例能获得焦点。

键盘命令直接使jPlayer 实例获得焦点。

参见:
jPlayer({keyBindings})
jPlayer({audioFullScreen})
jPlayer("focus")
$.jPlayer.keys(enabled)

keyBindings

Object :定义 event.which 的键值和他们的行为。

keyBindings 对象由下面结构的对象组成:

  1. helloWorld: { // A unique name or override the default with the name.
  2. key: 72, // The event.which key code for h
  3. fn: function(f) {
  4. // f is the instance in focus, which is this instance.
  5. // f.status is the status object.
  6. // f.play() to execute methods, such as play().
  7. alert("Hello World");
  8. }
  9. }

焦点中的实例参数The instance in focus parameter f 指当前实例,因为这个函数仅当这个实例获得焦点时被调用。基本上,这是传递指针到实例的 this的机制。this 是js对象指针,不是jquery代码$(this) 中的dom指针。

jPlayerPlaylist 附件给列表增加2个控制器LEFT 和RIGHT 分别移动到上一个和下一个轨道。jPlayerPlaylist 源码可以帮助你理解这个系统是怎么工作的。

默认对象是:

  1. keyBindings: {
  2. play: {
  3. key: 32, // space
  4. fn: function(f) {
  5. if(f.status.paused) {
  6. f.play();
  7. } else {
  8. f.pause();
  9. }
  10. }
  11. },
  12. fullScreen: {
  13. key: 13, // enter
  14. fn: function(f) {
  15. if(f.status.video || f.options.audioFullScreen) {
  16. f._setOption("fullScreen", !f.options.fullScreen);
  17. }
  18. }
  19. },
  20. muted: {
  21. key: 8, // backspace
  22. fn: function(f) {
  23. f._muted(!f.options.muted);
  24. }
  25. },
  26. volumeUp: {
  27. key: 38, // UP
  28. fn: function(f) {
  29. f.volume(f.options.volume + 0.1);
  30. }
  31. },
  32. volumeDown: {
  33. key: 40, // DOWN
  34. fn: function(f) {
  35. f.volume(f.options.volume - 0.1);
  36. }
  37. }
  38. }
idPrefix

String : (Default: "jp") : 定义jPlayer内部产生的html代码的ID前缀。

如果你有命名冲突时很有用,但是它不大可能需要开发者去修改这些设置。

consoleAlerts

Boolean : (Default: true) : 强制jPlayer({errorAlerts})jPlayer({warningAlerts})产生的alerts 被替代写在console中。这个选项启用而不支持console时,不会触发alert。

Alert信息被发送到console.log()中,而不是alert()中。

errorAlerts

Boolean : (Default: false) : 启用通过alert报错。

参见: jPlayer({consoleAlerts})

启用这个选项来帮助你定位jPlayer应用的错误。

warningAlerts

Boolean : (Default: false) : 启用通过alert报提示信息。

提示信息对开发者非常有用,能通知你找不到的css 选择器和其他提示类型。通常提示信息可以忽略,比如音频播放器中找不到视频播放选择器。

See also: jPlayer({consoleAlerts})

启用这个选项能帮助你定位jPlayer 应用中的问题。

eventType

Function : (Default: undefined) : 就像jPlayer ready事件,你可以给任意jPlayer Events Types绑定一个处理器。这些事件包括HTML5 media events

你可以绑定处理器到像timeupdate这样的事件来当触发时执行操作。参见Using jPlayer Events 获取更多信息和例子。

注意eventType 它本身不是一个构造函数选项,比如ready 构造函数选项是一个eventType。
提示:flash 备选项不模拟任何事件。
提示: html5 多媒体事件因浏览器不同而不同。

给jPlayer一个id 例子的html:

  1. <head>
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
  3. </script>
  4. <script type="text/javascript" src="js/jquery.jplayer.min.js">
  5. </script>
  6. <script>
  7. $(document).ready(function() { /* Your Code */ });
  8. </script>
  9. </head>
  10. <body>
  11. <div id="jpId"></div>
  12. </body>

Code Example #1:

  1. $(document).ready(function() {
  2. $("#jpId").jPlayer( {
  3. ready: function () {
  4. $(this).jPlayer("setMedia", {
  5. mp3: "/mp3/elvis.mp3" // Defines the mp3 url
  6. });
  7. }
  8. });
  9. });

Code Example #2:

  1. $(document).ready(function() {
  2. $("#jpId").jPlayer( {
  3. ready: function () {
  4. $(this).jPlayer("setMedia", {
  5. m4a: "/mp3/elvis.m4a", // Defines the m4a (AAC) url
  6. oga: "/ogg/elvis.ogg" // Defines the counterpart oga url
  7. });
  8. },
  9. supplied: "m4a, oga",
  10. swfPath: "/jPlayer/js"
  11. });
  12. });

Code Example #3:

  1. $(function() { // executed when $(document).ready()
  2. $("#jpId").jPlayer( {
  3. ready: function () {
  4. $(this).jPlayer("setMedia", {
  5. m4v: "http://www.myDomain.com/myVideo.m4v" // Defines the m4v url
  6. }).jPlayer("play"); // Attempts to Auto-Play the media
  7. },
  8. supplied: "m4v",
  9. swfPath: "jPlayer/js"
  10. });
  11. });

Code Example #4:

  1. $(function() { // executed when $(document).ready()
  2. $("#jpId").jPlayer( {
  3. ready: function () {
  4. $(this).jPlayer("setMedia", {
  5. m4v: "/media/myVideo.m4v", // Defines the m4v url
  6. ogv: "/media/myVideo.ogv" // Defines the counterpart ogv url
  7. }).jPlayer("play"); // Attempts to Auto-Play the media
  8. },
  9. solution: "flash, html", // Flash with an HTML5 fallback.
  10. supplied: "m4v, ogv",
  11. swfPath: "/scripts"
  12. });
  13. });

Code Example #5: Bad Code!

  1. $(document).ready(function() {
  2. $("#jpId").jPlayer( {
  3. ready: function () {
  4. $(this).jPlayer("setMedia", {
  5. mp3: "/mp3/elvis.mp3"
  6. });
  7. }
  8. });
  9. $("#jpId").jPlayer("play"); // BAD: The plugin is not ready yet
  10. });

jPlayer 方法

jPlayer 通过$(id).jPlayer()插件方法发送方法名被控制。

是选项的别名的方法

那些使用jPlayer("option", key, value)方法来改变选项的快捷方式/别名的方法用符号标识。

$(id).jPlayer( "setMedia", Object: media ) : jQuery

描述

这个方法用来定义播放的多媒体。参数media 是一个对象,它包含不同的编码格式属性和海报属性。

jPlayer("setMedia", media) 方法必须在jPlayer执行其他方法比如jPlayer("play")之前定义media。

即使你提供的是相对url,所有的多媒体url被转换成绝对url。转换之后的url存储在event.jPlayer.status.media对象中。 转换成绝对url 之后修复了Flash mp4 播放器 和 m4a/m4v/flv 格式是相对swf文件而不是相对页面的一个问题。

所有在jPlayer({supplied: "f1, f2, fN"})构造函数选项中定义的格式必须提供那个格式编码的多媒体文件的有效url。一个jPlayer中既有视频又有音频媒体的情况例外。必须要定义所有的supplied 音频格式或者所有的supplied 视频格式。

可以使用构造函数选项jPlayer({solution: "s1, s2") 来定义jPlayer使用html 和flash解决方案的优先级。

jPlayer 要区分两种不同的媒体类型。在一个setMedia命令中同时使用视频和音频使得决定到底播放哪个变得困难了。最后的决定取决于solutionsupplied 以及使用的浏览器。比如第一个能在solution中正常播放的supplied那个视频或者音频就是最终的要播放的。

jPlayer开始下载多媒体的时间点随着media.load()方法和media.src 属性的的w3c html5多媒体说明文档的变化使其变得复杂。为了使老的html5 浏览器能够正常使用jPlayer,仍然保留了 media.load(),其实它应该被移除,应为不再需要它了。

jPlayer构造函数选项jPlayer({preload})用于控制jPlayer何时开始下载新的多媒体资源。一些浏览器在preload选项被设置为"metadata"的时候会开始下载整个多媒体资源。另外一些会要求使用"auto"。保证不自动下载的唯一方式是把preload选项设置为"none"。记住,根据你使用的浏览器,多媒体资源可能不会被下载。手机浏览器比如IOS 4.2上的手机 safari在任何多媒体下载或者播放前都需要一个手势。用户必须在第一次加载或者播放操作的时候点击一个按钮进行初始化。

任何正在播放的多媒体在执行命令的时候都会中止。下载会不会被取消取决于你的浏览器是不是遵循最近的w3c html多媒体规范。事实上,setMedia除了在ready事件中第一次使用外,setMedia命令之后紧接着是一个停止老的下载的播放命令。 多媒体播放器例外,不同类型(音频或者视频)的老的多媒体资源会继续下载例外。用来取消下载时清楚src,iPhone内建的视频播放器会hang住。

url必须按照标准url编码规则提供。

参数
media

Object : 定义多媒体格式url 和海报

mp3
String : 定义mp3格式的音频url
m4a
String : 定义mp4格式的音频url(MP4: AAC)
m4v
String : 定义mp4格式的视频url(MP4: H.264/AAC)
webma
String : 定义webm格式的音频url(WebM: Vorbis)
webmv
String : 定义webm格式的视频url (WebM: VP8/Vorbis)
oga
String : 定义ogg格式的音频url (OGG: Vorbis)
ogv
String : 定义ogg格式的视频url (OGG: Theora/Vorbis)
fla
String : 定义flv格式的音频url (FLV: Flash)
flv
String : 定义flv格式的视频url (FLV: Flash)
wav
String : 定义wav格式的音频url
poster
String : 定义海报url。
海报的纵横比应该和jPlayer的尺寸一样,否则在海报会变形。
title
String : [可选] 定义多媒体的title。如果没有定义时遵循向下兼容什么也不做。比如,如果你在html增加了title,那么在media对象中不定义title则html 的title 会保持不变。
如果你的title不变,那么是你忘了在media对象中增加title。
duration
String : [可选] 明确地定义显示的duration
Number : [可选] 定义媒体资源的duration
track
Array : 每一个array元素是一个定义<track>元素的对象。
没有暴露合适的GUI控制器这个属性只被部分实现。
浏览器或者flash解决方案都没有这个属性的补充,所以不支持webVTT。

虽然它使用受限,当使用jPlayer({nativeVideoControls})选项并且你的目标浏览器对webVTT的支持有详细的说明时,它或许很适合。
更多关于它们的信息参见W3C Media Element Living StandardWebVTT Living Standard
kind
字符串 : 定义track的类型。
src
字符串 : 定义track的URL。
srclang
字符串 : 定义track的语言。
label
字符串 : 定义track的标签。
def
布尔值 : 如果这是默认的track则为True。

注意只有列出来的属性被jPlayer使用,因此你可以在同一个对象中存储所有的其他信息,如果这样你的项目会工作的更好的话。例如,一个音频track的标题和专辑名字。然而我们打算将来扩展多媒体对象的属性,将来某天会有的属性可能包括:stream,chapters, subtitles。

示例代码:

  1. $("#jpId").jPlayer( {
  2. ready: function() {
  3. $(this).jPlayer( "setMedia", {
  4. m4a: "m4a/elvis.m4a",
  5. oga: "oga/elvis.oga",
  6. webma: "webm/elvis.webm"
  7. });
  8. },
  9. supplied: "webma, m4a, oga"
  10. );

$(id).jPlayer( "clearMedia" ) : jQuery

描述

这个方法用来清除多媒体停止重放。如果这个时候一个多媒体文件正在下载,那么下载会被取消。

这个命令执行之后,像jPlayer("play")这样的重放命令会被忽略并引起错误事件直到使用jPlayer("setMedia",media)方法指定新的多媒体文件。

适合使用这个方法的环境非常少。通常当你在修改多媒体,这个方法会自动被执行。

如果ios iphone 或者ipod touch上内建的视频播放器打开的时候执行clearMedia这个命令会使内建的视频播放器奔溃。

参数

这个方法没有参数。

示例代码:

  1. $("#jpId").jPlayer( "clearMedia" );

$(id).jPlayer( "load" ) : jQuery

描述

这个方法用来在发出play 命令之前预加载多媒体资源。如果在使用load之后马上使用jPlayer("play", [time])那么一点意义也没有,马上play 。 同样的jPlayer("pause", [time])设置一个大于0 的time时跟上面情况一样。

这个方法允许你在通过setMedia改变文件之后选择你要预加载的文件。如果你想默认加载所有的文件,使用jPlayer构造函数选项{preload:"auto"}

这个命令对有些浏览器有影响,有些浏览器会忽略,或者在第一次播放的时候需要一个手势动作来触发。

参数

这个方法没有参数。

示例代码:

  1. $("#jpId").jPlayer("load");

$(id).jPlayer( "play", [Number: time] ) : jQuery

描述

这个方法用于播放使用jPlayer("setMedia", media)指定的多媒体文件。

如果必要,这个文件要下载。

没有time 参数,新的媒体将从头开始播放。打开多媒体文件会从之前使用jPlayer("pause", [time])停止的地方开始播放。

可选参数time 会将播放头位置移动到给定的秒数的时间处。 jPlayer("play", 0)对于强制从头开始播放很有用,但是对于新的多媒体文件是多余的, 因为新的多媒体总是从头开始播放。它可用来在改变多媒体资源之后立即跳到指定的时间处播放。jPlayer会试图找到这个时间然后开始播放。

如果在setMedia 命令之后立即执行这个方法,并设置time参数,当浏览器使用html5 解决方案时,这个命令会失败,然后会有一个每100ms执行一次的外部timeout 来重拾这个命令直到它成功。

参数
time

[可选] 数字 : 定义秒数表示的新播放头位置。

如果在下载过程中使用,一旦下载到这个位置,就会开始播放。

要使多媒体文件循环播放,增加jPlayer("play")到ended事件。jPlayer在ended事件中会重置多媒体到开头处,因此不需要将time设置为0。

示例代码:

  1. $("#jpId").jPlayer( {
  2. ready: function() { // The $.jPlayer.event.ready event
  3. $(this).jPlayer("setMedia", { // Set the media
  4. m4v: "m4v/presentation.m4v"
  5. }).jPlayer("play"); // Attempt to auto play the media
  6. },
  7. ended: function() { // The $.jPlayer.event.ended event
  8. $(this).jPlayer("play"); // Repeat the media
  9. },
  10. supplied: "m4v"
  11. );
  12.  
  13. $("#jumpToTime").click( function() {
  14. $("#jpId").jPlayer("play", 42); // Begins playing 42 seconds into the media.
  15. });

$(id).jPlayer( "pause", [Number: time] ) : jQuery

描述

这个方法用于暂停多媒体。

jPlayer("pause", time)可以用来在改变多媒体之后将播放头跳转到一个指定的时间处。这个多媒体会开始下载,然后可能的话提示多媒体已经准备好。

不设置time 参数,还没有被加载或者播放的新多媒体会忽略这个命令。在提供多余的命令的时候,它避免了下载新的多媒体文件。正在播放的多媒体文件会被暂停,不在播放的就没有效果。

可选参数time会将播放头移动到给定的秒数时间处,如果必要的话,文件会开始下载。 jPlayer("pause", 0)jPlayer("stop")效果一样。新多媒体文件会忽略jPlayer("pause", 0)命令直到这个文件开始加载。当提供了其他命令的时候,它避免了下载新的多媒体文件。

如果在setMedia命令之后立即执行它,并设置参数time当浏览器使用html5 解决方案时,这个命令会失败,然后会有一个每100ms执行一次的外部timeout 来重拾这个命令直到它成功。

参数
time

[可选] 数字 : 定义秒数表示的新播放头位置

如果在下载的时候使用,播放头会在能够搜索到那个时间点的时候立刻提示。

ended事件中使用jPlayer("pause", 0)是多余的,不应该被使用的。

示例代码:

  1. $("#jpId").jPlayer("pause", 10); // Pauses and moves the play-head 10 seconds into the song.

$(id).jPlayer( "pauseOthers", [Number: time] ) : jQuery

描述

这个方法中止除了调用这个方法之外的其他所有实例。当一个实例开始播放的时候让页面中的其他播放器停止播放的时候非常有用。

更多详情参见jPlayer("pause") ,因为这是一个实例让其他实例暂停的方法。

play事件处理器可以在构造函数选项中定义。

参数
time

[可选] 数字 : 定义秒数表示的新播放头位置

示例代码:

  1. // Bind an event handler to the instance's play event.
  2. $("#jpId").bind($.jPlayer.event.play, function() {
  3. $(this).jPlayer("pauseOthers"); // pause all players except this one.
  4. });
  5.  
  6. // Same again, but through the options (only the play option is shown)
  7. $("#jpId").jPlayer({
  8. play: function() {
  9. $(this).jPlayer("pauseOthers"); // pause all players except this one.
  10. }
  11. });
  12.  
  13. // Equivalent to "stop others", passing time as zero.
  14. $("#jpId").jPlayer({
  15. play: function() {
  16. $(this).jPlayer("pauseOthers", 0); // stop all players except this one.
  17. }
  18. });

$(id).jPlayer( "tellOthers", String: command, [Function: conditions], [Mixed: args] ) : jQuery

描述

这个方法向除了调用tellOthers的实例之外的所有实例发送命令。jPlayer("pauseOthers"){globalVolume}系统内部使用了这个方法。

开发者或许能以某些新奇的方式使用这个方法。

参数
command

字符串:定义要发送的命令,如"pause"

conditions

[可选] 函数:定义一个返回true false的函数。在其他实例的上下文中执行。调用者的上下文以参数传递。

  1. function( invoker ) {
  2. // The "this" context is the other instance.
  3. return this.options.muted && invoker.options.muted;
  4. }
args

[可选] 混合类型:传递命令需要的参数。如 0, 1, "two", 3

示例代码:

  1. // Equivalent to pauseOthers
  2. $("#jpId").jPlayer("tellOthers", "pause", function() {
  3. // The "this" context is the other instance's jPlayer object.
  4. return this.status.srcSet;
  5. });

$(id).jPlayer( "stop" ) : jQuery

描述

这个方法用来停止多媒体的播放,然后把播放头恢复到多媒体的开始。

这个命令和jPlayer("pause", 0)作用一样。如果你想要的话可以在界面上放一个stop按钮执行这个方法。

如果在setMedia之后立即执行这个命令将被忽略。

参数

这个方法没有参数。

ended事件中使用jPlayer("stop")是多余的,不应该使用。
这样可以避免win/os chrome浏览器中的致命bug,因为如果你在使用jPlayer("stop") 之后再在ended事件中使用jPlayer("setMedia") 浏览器会奔溃。

示例代码:

  1. $("#jpId").jPlayer("stop");

$(id).jPlayer( "playHead", Number: percentOfSeekable ) : jQuery

描述

这个方法把播放头移动到一个新的位置。最初的用途是处理拖动条上的点击事件,然后把播放头移动到一个新位置。

注意,这只是移动播放头。多媒体是否从那点开始播放取决于当前的状态。比如,如果它正在播放,那么就从新的播放头处继续播放。如果它暂停,那么多媒体就在新播放头处继续保持暂停。

如果在setMedia命令之后立即执行它,效果和jPlayer("pause", 0)一样,会被忽略。

参数
percentOfSeekable

数字(0到100) 定义相对当前可搜索百分比的播放百分比。

仅当多媒体完全可搜索到时,这个百分比才是多媒体总长度的百分比。
大多数html5浏览器允许搜索,所以当多媒体开始下载的时候可搜索值跳到100%。

示例代码:

  1. $("#jpId").jPlayer("playHead", 0); // Move play-head to start.
  2. $("#jpId").jPlayer("playHead", 10); // Move play-head to 10% of the seekable length.

$(id).jPlayer( "option", [String: key, [Mixed: value]] ) : Mixed

描述

这个方法用来获取jPlayer内部的配置信息。

选项是在构造函数中被定义。它返回选项的拷贝,可以获得所有的options值。尽管你在初始化jPlayer之后可能暂时只设置了有限的几个选项。这些选项用†符号标识。参见jPlayer Options

参数
key

定义选项属性名的字符串,支持点操作符。不包括构造器中定义的事件处理器,因此他们可以用.jplayer命名空间移除。

返回值可以是一个布尔值,数字,字符串或者是对象,取决请求的数据。
不包括构造器中定义的事件处理器,因此他们可以用.jplayer命名空间移除。

value

选项新值。

Events
$.jPlayer.event.warning
事件代码
$.jPlayer.warning.OPTION_KEY

示例代码:

  1. var solution = $("#jpId").jPlayer("option", "solution"); // Get the solution string, "html, flash" by default.
  2. var cssSelector = $("#jpId").jPlayer("option", "cssSelector"); // Get the cssSelector object.
  3.  
  4. var playSelector = $("#jpId").jPlayer("option", "cssSelector.play"); // Get the cssSelector for the play method.
  5. var playSelector = $("#jpId").jPlayer("option", "cssSelector").play; // Get the cssSelector for the play method.
  6.  
  7. $("#jpId").jPlayer("option", "cssSelector.play", ".my-new-class"); // Set the cssSelector for the play method.
  8. $("#jpId").jPlayer("option", "cssSelector", {play:".my-new-class"}); // Set the cssSelector for the play method. (Can set multiple selectors in the object.)
  9.  
  10. $("#jpId").jPlayer("option", "cssSelectorAncestor", "#my-new-interface"); // Set the cssSelectorAncestor and refresh all associations.

$(id).jPlayer( "focus" ) : jQuery

描述

这个方法用于使用键盘控制器增加焦点。

更多关于键盘控制器的信息参见选项 jPlayer({keyEnabled})

参数

这个方法没有参数。

示例代码:

  1. $("#jpId").jPlayer("focus");

$(id).jPlayer( "destroy" ) : jQuery

描述

这个方法移除jPlayer。所有jPlayer创建的绑定到界面上的事件被移除。销毁实例之后,元素可以实例化新的jPlayer。

所有命名空间为.jPlayer 的事件处理器被这个方法移除。

参数

这个方法没有参数。

示例代码:

  1. $("#jpId").jPlayer("destroy");

$(id).jPlayer( "volume", Number: ratio ) : jQuery

描述

这个方法用于控制被播放的多媒体的音量。注意,初始音量通过构造器选项jPlayer({volume}:ratio)设置。可以使用jPlayer({option}, "volume", ratio)选项方法改变音量大小。

静音的时候可以改变这个值,但是仍然是静音状态。把音量值设置为0 等同于设置mute。这两个系统是独立的。

参数
ratio

数字 (0 to 1) 定义最大音量的比率。

静音: 0
一半: 0.5
最大: 1

示例代码:

  1. $("#jpId").jPlayer("volume", 0.75);

$(id).jPlayer( "mute", [Boolean:mute] ) : jQuery

描述

这方法给多媒体设置静音。注意,初始静音状态是通过构造器选项jPlayer({muted}:Boolean)设置。可以通过jPlayer({option}, "muted", Boolean)修改静音状态。

参数
mute

布尔值 : (默认: true) : 静音状态。

示例代码:

  1. $("#jpId").jPlayer("mute");

$(id).jPlayer( "unmute", [Boolean:unmute] ) : jQuery

描述

这个方法用来取消多媒体的静音。注意,初始静音状态是通过构造器选项jPlayer({muted:false})可以通过设置jPlayer({option}, "muted", Boolean)来修改静音状态。

参数
unmute

布尔值 : (默认: true) : 静音相反的状态。

示例代码:

  1. $("#jpId").jPlayer("unmute");

jPlayer Options

jPlayer允许在实例化之后改变某些选项。这些选项用 † 符号标识。其他的选项必须通过构造函数选项在创建的时候定义。

由于cssSelector和cssSelectorAncestor选项的性质特殊,这里会详细介绍它们。

$(id).jPlayer( "option", "cssSelector", String: method, String: selector ) : jQuery

描述

在jPlayer在页面上被实例化之后,这个选项允许开发者修改cssSelector的关联关系。

cssSelector方法和jPlayer构造函数选项cssSelectorAncestor 一起创建网页上的jPlayer方法和css 实体间的关联关系。例如,它能使页面上的播放按钮图形和执行播放命令的方法关联起来。

默认jPlayer使用predefined set of cssSelectors, 这组选择器都是类选择器。 cssSelectorAncestor字符串和字符串之间以空格隔开。默认的cssSelectorAncestor是一个类选择器。使用一个id 和一个公共的类结构,jPlayer的多个实例很容易加到页面中去。jPlayer和唯一的一个界面关联所以用id, 其他的结构是公用的,所以用class。

method可能只有一个selector选择器通过jPlayer和它关联。如果提供一个新的关联关系那么已经存在的那个关联关系就会被移除。空字符串能清除已经存在的关联关系。

jPlayer 使用".jPlayer" 事件命名空间来绑定和解绑方法到css 实体。

参数
method

包含和selectorselector关联的方法名的字符串。
有效的方法名列表参见predefined cssSelectors

selector

包含和method方法名关联的css选择器的字符串。
通常是一个类选择器比如".jp-play"。

Events
$.jPlayer.event.warning
事件代码
$.jPlayer.warning.CSS_SELECTOR_COUNT
$.jPlayer.warning.CSS_SELECTOR_METHOD
$.jPlayer.warning.CSS_SELECTOR_STRING

示例代码:

  1. $(document).ready(function() {
  2. $("#jpId").jPlayer( {
  3. ready: function () {
  4. $(this).jPlayer("setMedia", {mp3: "mp3/elvis.mp3"});
  5. },
  6. cssSelectorAncestor: "", // Remove the ancestor css selector clause
  7. cssSelector: {
  8. play:"#myOldPlayButton" // Set a custom css selector for the play button
  9. // The other defaults remain unchanged
  10. }
  11. })
  12.  
  13. // ... Some time later, otherwise you'd just set it in the constructor ...
  14.  
  15. $("#jpId").jPlayer( "option", "cssSelector", "play", "#myNewPlayButton" );
  16. });

$(id).jPlayer( "option", "cssSelectorAncestor", String: selector ) : jQuery

描述

这个选项允许程序员在jPlayer已经在页面上被实例化之后改变其关联关系。

设置这个选项会导致所有的cssSelector和新祖先的关联关系被刷新。允许你在多个界面中轻易切换。我不确定你为什么要这么做,但是如果你需要的话它就在这里。

参数
selector

包含css选择器和cssSelectorAncestor的关联关系的字符串。
通常是一个id选择器,比如, "#jp_container_1"

事件
$.jPlayer.event.warning
事件代码
$.jPlayer.warning.CSS_SELECTOR_COUNT

示例代码:

  1. $(document).ready(function() {
  2. $("#jpId").jPlayer( {
  3. ready: function () {
  4. $(this).jPlayer("setMedia", {mp3: "mp3/elvis.mp3"});
  5. },
  6. cssSelectorAncestor: "#interface-on-the-left" // Define the ancestor css selector
  7. })
  8.  
  9. // ... Some time later, otherwise you'd just set it in the constructor ...
  10.  
  11. $("#jpId").jPlayer( "option", "cssSelectorAncestor", "#interface-on-the-right" );
  12. });

jPlayer Events

jPlayer 和你的代码通过事件进行通信。

所有的jPlayer事件可以使用同名的构造函数选项定义一个事件处理器:
jPlayer({eventName:function(e){...}})
构造函数选项创建的事件处理器的命名空间是".jPlayer"

jPlayer 事件类型

  1. $.jPlayer.event.ready * † 当jPlayer准备好了接收命令时触发。
  2. $.jPlayer.event.setmedia * † 当给jPlayer提供setMedia命令时触发。
  3. $.jPlayer.event.flashreset * † 当flash解决方案产生新的ready事件时触发。
  4. $.jPlayer.event.resize * † 当屏幕状态发生变化和size/fullsize选项改变时触发。
  5. $.jPlayer.event.repeat * † 当循环状态改变和ready事件之前触发。
  6. $.jPlayer.event.click * † 当用户点击海报或者视频时触发。nb: GUI 皮肤可能会干扰它。
  7. $.jPlayer.event.error * ‡
  8. $.jPlayer.event.warning * †
  9. $.jPlayer.event.loadstart *
  10. $.jPlayer.event.progress * 当多媒体被下载时触发。
  11. $.jPlayer.event.suspend
  12. $.jPlayer.event.abort
  13. $.jPlayer.event.emptied
  14. $.jPlayer.event.stalled
  15. $.jPlayer.event.play * 当多媒体被播放时触发。
  16. $.jPlayer.event.pause * 当多媒体被暂停时触发。
  17. $.jPlayer.event.loadedmetadata *
  18. $.jPlayer.event.loadeddata
  19. $.jPlayer.event.waiting •
  20. $.jPlayer.event.playing •
  21. $.jPlayer.event.canplay •
  22. $.jPlayer.event.canplaythrough •
  23. $.jPlayer.event.seeking *
  24. $.jPlayer.event.seeked *
  25. $.jPlayer.event.timeupdate * 当当前事件被改变时触发。(重放的时候两个事件相隔250ms)
  26. $.jPlayer.event.ended * 当多媒体播放结束时触发。
  27. $.jPlayer.event.ratechange
  28. $.jPlayer.event.durationchange •
  29. $.jPlayer.event.volumechange * 当音量或者静音的时候触发。
* 表示flash 和html5浏览器都支持的jPlayer事件
• 表示flash mp3 和html5浏览器都支持的jPlayer事件
† 表示非html5 规范的事件
‡ 表示不同于html规范的事件。至少一种错误。

我们计划扩展flash 中的html5 多媒体事件模拟。

jPlayer事件对象

eventHandler(event)
event
对象: 标准的jQuery $.Event() 属性。
event.jPlayer
Object : The jPlayer information object.
event.jPlayer.error
Object
event.jPlayer.error.type
String : The error event code
event.jPlayer.error.context
String : The cause of the error
event.jPlayer.error.message
String : Message describing the error
event.jPlayer.error.hint
String : A suggestion on how to fix the error
event.jPlayer.flash
Object : Info about the Flash solution
event.jPlayer.html
Object : Info about the HTML solution
event.jPlayer.options
Object : The jPlayer options. The volume and muted values are maintained here along with all the other options.
event.jPlayer.status
Object
event.jPlayer.status.src
String : The URL being used by jPlayer.
event.jPlayer.status.media
Object : Pointer to the media object used in setMedia.
event.jPlayer.status.seekPercent
Number : Percent seekable
event.jPlayer.status.currentPercentRelative
Number : Current time as a percent of seekPercent
event.jPlayer.status.currentPercentAbsolute
Number : Current time as a percent of duration
event.jPlayer.status.currentTime
Number : The current time in seconds
event.jPlayer.status.duration
Number : The duration of the media
event.jPlayer.status.srcSet
Boolean
event.jPlayer.status.paused
Boolean
event.jPlayer.status.waitForPlay
Boolean
event.jPlayer.status.waitForLoad
Boolean
event.jPlayer.status.video
Boolean
event.jPlayer.status.width
String : The current CSS style width of jPlayer.
event.jPlayer.status.height
String : The current CSS style height of jPlayer.
event.jPlayer.status.videoWidth
Number : The intrinsic width of the video in pixels. (Zero before known or if audio.)
event.jPlayer.status.videoHeight
Number : The intrinsic height of the video in pixels. (Zero before known or if audio.)
event.jPlayer.version
Object
event.jPlayer.version.script
String : jPlayer's JavaScript version
event.jPlayer.version.flash
String : jPlayer's Flash version, or "unknown" if Flash is not being used
event.jPlayer.version.needFlash
String : The Flash version compatiable with the JavaScript
event.jPlayer.warning
Object
event.jPlayer.warning.type
String : The warning event code
event.jPlayer.warning.context
String : The cause of the warning
event.jPlayer.warning.message
String : Message describing the warning
event.jPlayer.warning.hint
String : A suggestion on how to fix the warning

jPlayer错误事件代码

event.jPlayer.error.type
$.jPlayer.error.FLASH
A problem with the Flash insertion on the page.
$.jPlayer.error.FLASH_DISABLED
A ready event was registered from the Flash, but commands are no longer working. The Flash has been disabled by the browser because it, or a parent, has been hidden using display:none
$.jPlayer.error.NO_SOLUTION
No media playback solution is available.
$.jPlayer.error.NO_SUPPORT
Not possible to play any media format provided in setMedia.
$.jPlayer.error.URL
Error with media URL. †
$.jPlayer.error.URL_NOT_SET
Media playback command not possible as no media is set.
$.jPlayer.error.VERSION
Mismatch in versions of JavaScript and Flash of jPlayer.

† Equivilent to the HTML5 Media error event. (Not exactly true... The HTML error event can occur due to decoding errors too.)

jPlayer constructor option jPlayer({errorAlerts:true}) will create alerts when an error event occurs.

jPlayer Warning Event Codes

event.jPlayer.warning.type
$.jPlayer.warning.CSS_SELECTOR_COUNT
The number of jPlayer('cssSelector') or jPlayer('cssSelectorAncestor') found did not equal one.
$.jPlayer.warning.CSS_SELECTOR_METHOD
The jPlayer('cssSelector') method is not valid.
$.jPlayer.warning.CSS_SELECTOR_STRING
The jPlayer('cssSelector') was not a valid string.
$.jPlayer.warning.OPTION_KEY
The option requested in jPlayer('option') is undefined.

jPlayer constructor option jPlayer({warningAlerts:true}) will create alerts when a warning event occurs.

Using jPlayer Events

Just like any other event in jQuery, jPlayer events are bound to handler functions using jQuery.bind(). To remove an event use jQuery.unbind().

Use the $.jPlayer.event object to access event type strings. All events have a jPlayer Event Object with easy access to information at the time the event occured.

All jPlayer events can have a handler defined using the constructor option of the same name.
jPlayer({eventType:handler})

Note that, the event type used in the constructor is the property name of the event, not the event string code. For example, the event type $.jPlayer.event.ready has the constructor option jPlayer({ready:handler}):

Event handlers created by constructor options have the ".jPlayer" namespace.

示例代码:

  1. $("#repeat-on").click( function() {
  2. $("#jpId").bind($.jPlayer.event.ended + ".jp-repeat", function(event) { // Using ".jp-repeat" namespace so we can easily remove this event
  3. $(this).jPlayer("play"); // Add a repeat behaviour so media replays when it ends. (Loops)
  4. });
  5. return false;
  6. });
  7.  
  8. $("#repeat-off").click( function() {
  9. $("#jpId").unbind($.jPlayer.event.ended + ".jp-repeat"); // Remove the ended events with the ".jp-repeat" namespace
  10. return false;
  11. });
  12.  
  13. $("#jpId").bind($.jPlayer.event.play, function(event) { // Add a listener to report the time play began
  14. $("#playBeganAtTime").text("Play began at time = " + event.jPlayer.status.currentTime);
  15. });
  16.  
  17. $("#jpId").unbind($.jPlayer.event.play); // Remove all play event listeners
  18.  
  19.  
  20. $("#jpId").bind($.jPlayer.event.error + ".myProject", function(event) { // Using ".myProject" namespace
  21. alert("Error Event: type = " + event.jPlayer.error.type); // The actual error code string. Eg., "e_url" for $.jPlayer.error.URL error.
  22. switch(event.jPlayer.error.type) {
  23. case $.jPlayer.error.URL:
  24. reportBrokenMedia(event.jPlayer.error); // A function you might create to report the broken link to a server log.
  25. getNextMedia(); // A function you might create to move on to the next media item when an error occurs.
  26. break;
  27. case $.jPlayer.error.NO_SOLUTION:
  28. // Do something
  29. break;
  30. }
  31. });
  32.  
  33. $("#jpId").unbind(".myProject"); { // Remove ".myProject" namespace event listeners using standard jQuery method
  34.  

jPlayer 函数

$.jPlayer.pause() : Void

描述

暂停当前页面的所有jPlayer实例。如果使用frame那么这个命令只对其所在的frame有影响。

参数

这个方法没有参数。

示例代码:

  1. $.jPlayer.pause(); // Pause all instances of jPlayer on the page

$.jPlayer.convertTime( Number: seconds ) : String

描述

这个方法用于把事件从秒数转化一个时分秒表示的字符串格式。转化的格式用 $.jPlayer.timeFormat对象定义。

这个方法用来把jPlayer写的文本转化成css 选择器上显示的当前时间和持续时间,jPlayer实例使用它自己的 jPlayer({timeFormat:Object})选项。

参数
seconds
数字:要转换的秒数。
返回值

字符串:被格式化的时间。

示例代码:

  1. $("#myTime").text($.jPlayer.convertTime(60)); // One minute

$.jPlayer.keys( Boolean: enable ) : Void

描述

默认这个函数在enable的时候执行。它生成文档的键盘事件处理器,用于监测键盘按键绑定并聚焦到jPlayer实例上。

通常,你不需要使用这个函数。它之所有被文档记录是因为如果你想为多个实例全局切换键盘控制器的开关的时候可能有用。

关于键盘控制器的更多信息参见选项 jPlayer({keyEnabled})

开启后keydown.jPlayer事件绑定到 document.documentElement元素。

参数
enable
布尔值:绑定或者解绑全局的键盘事件处理器。

示例代码:

  1. $.jPlayer.keys(false); // Turn off all key controls
  2. $.jPlayer.keys(true); // Turn on key controls for instances with keyEnabled set.

jPlayer Objects

$.jPlayer.timeFormat : Object

描述

这个对象用于格式化被函数
$.jPlayer.convertTime( seconds )返回的事件。

这个格式化是累积的。比如,默认设置显示分钟和秒钟,那么如果超过一个小时的时间会被加到分钟上。在这种情况下,1小时45分钟10秒就会被显示为105:10。为了让其显示为1:45:10就需要设置
$.jPlayer.timeFormatshowHour = true;

这个对象定义选项jPlayer({timeFormat:Object})的默认值。

属性
showHour
Boolean : (Default: false) : 显示小时。
showMin
Boolean : (Default: true) : 显示分钟。
showSec
Boolean : (Default: true) : 显示秒钟。
padHour
Boolean : (Default: false) : 如果小时数小于10补零。
padMin
Boolean : (Default: true) : 如果分钟数小于10补零。
padSec
Boolean : (Default: true) : 如果秒数小于10补零。
sepHour
String : (Default: ":") : 小时和分钟之间的字符串。
sepMin
String : (Default: ":") : 分钟和秒数之间的字符串。
sepSec
String : (Default: "") : 秒数之后的字符串。

示例代码:

  1. $.jPlayer.timeFormat.showHour = true;
  2. $.jPlayer.timeFormat.sepHour = " hours ";
  3. $.jPlayer.timeFormat.sepMin = " minutes ";
  4. $.jPlayer.timeFormat.sepSec = " seconds";

$.jPlayer.platform : Object

描述

这个对象是使用用户代理嗅探器的结果,并且提供手机平板平台的信息。
下面这些属性被设置为true,需要检测的时候:

属性
mobile
Boolean : 当被检测的设备是智能手机时为True 。
tablet
Boolean : 当被检测的设备是平板电脑时为True 。
ipad
iphone
ipod
android
blackberry
playbook
webos
windows_ce

示例代码:

  1. if($.jPlayer.platform.tablet) {
  2. // Do something for all tablet devices
  3. if($.jPlayer.platform.ipad) {
  4. // Do something on ipad devices
  5. }
  6. if($.jPlayer.platform.android) {
  7. // Do something on android tablet devices
  8. }
  9. }

jPlayer的预定义css选择器

jPlayer 预定义了一组内建的css 选择器。下面是默认的jPlayer方法和css 选择器间的关联关系。

定义自定义的css 选择器使用
jPlayer({cssSelectorAncestor: "#my-unique-id", cssSelector: {...}})

在实例化之后修改CSS选择器使用jPlayer("option", key, value):
jPlayer("option", "cssSelector", method, selector)
jPlayer("option", "cssSelectorAncestor", selector)

默认的cssSelectorAncestor

  1. cssSelectorAncestor: "#jp_container_1"

默认的 cssSelector

方法: "selector"

  1. cssSelector: {
  2. videoPlay: ".jp-video-play",
  3. play: ".jp-play",
  4. pause: ".jp-pause",
  5. stop: ".jp-stop",
  6. seekBar: ".jp-seek-bar",
  7. playBar: ".jp-play-bar",
  8. mute: ".jp-mute",
  9. unmute: ".jp-unmute",
  10. volumeBar: ".jp-volume-bar",
  11. volumeBarValue: ".jp-volume-bar-value",
  12. volumeMax: ".jp-volume-max",
  13. playbackRateBar: ".jp-playback-rate-bar",
  14. playbackRateBarValue: ".jp-playback-rate-bar-value",
  15. currentTime: ".jp-current-time",
  16. duration: ".jp-duration",
  17. title: ".jp-title",
  18. fullScreen: ".jp-full-screen",
  19. restoreScreen: ".jp-restore-screen",
  20. repeat: ".jp-repeat",
  21. repeatOff: ".jp-repeat-off",
  22. gui: ".jp-gui",
  23. noSolution: ".jp-no-solution"
  24. }

真实的css 选择器字符串编码

selector = cssSelectorAncestor + " " + cssSelector[method];

例如,play方法的默认真实的selector是"#jp_container_1 .jp-play"
英语的意思是使用有id为jp_container_1的的父类的jp-play类选择器实体。

记住,id是唯一的,类是公用的。一个id 在html 中仅能使用一次。

注销一个css选择器

使用空字符串注销一个css选择器。

  1. cssSelector: {
  2. title: ""
  3. }

jPlayer图形化皮肤

皮肤不同html 和css/插图也不一样。css/插图被设计成和所有的皮肤html结构一起工作。你应该从download页面下载demo zip文件并从中获取html结构,同时还提供了每款皮肤的psd文件。

Accessibility

虽然皮肤遵循HTML 4.01 Spec,但是不幸的是一些浏览器不遵循这个规范。例如,safari浏览器的Tab面板不包含<a>元素。 如果你想更正它,可以用<a> 元素代替 <input> 或者 <button>。 使用这些表单元素的时候需要为每一个元素制定一个空的透明gif 文件,这要在动态web app 中使用会很麻烦,比如wordpress。<input><button>元素在不同浏览器中表现不同,特别是在ie浏览器中,点击的时候插图从下面跑到右边。基于这些原因,我们的标准皮肤使用 <a> 元素。

要支持快捷键可能需要给<a>元素增加accesskey属性。快捷键的使用取决于你的目标用户。大多数用户不知道如何启用快捷键,快捷键在不同浏览器中是不一样的。快捷键本身需要通过某些方式传达给用户。因为快捷键可能干扰一些浏览器的操作,所以我们没有在默认皮肤中使用这个属性。经过调查,多数屏幕读者用户偏好清晰的标签链接,即使标准浏览器中文本是看不见的,如,播放按钮在链接中有单词“play”,

jPlayer 兼容性

jQuery

兼容性检测结果:

  • jQuery 2.0.x
  • jQuery 1.10.x
  • jQuery 1.9.x
  • jQuery 1.8.x
  • jQuery 1.7.x ‡
  • jQuery 1.6.x † ‡
  • jQuery 1.5.x † ‡
  • jQuery 1.4.x † ‡
  • jQuery 1.3.x † ‡

† jPlayerPlaylist插件需要jQuery 1.7+
‡ 过时。

Zepto

兼容性检测结果:

  • 数据模块编译的Zepto 1.0

浏览器

兼容性检测结果:

  • Chrome 27 (Win, OSX) †
  • Firefox 21 (Win, OSX) †
  • Firefox 3.6 (Win)
  • Safari 6.0.4 (OSX) †
  • Opera 12.15 (Win, OSX) †
  • Internet Explorer 10 (Win)
  • Internet Explorer 9 (Win)
  • Internet Explorer 8 (Win)
  • Internet Explorer 7 (Win)
  • Internet Explorer 6 (Win)

† 以上测试是使用jPlayer版本发布时候最新的浏览器版本获得的结果。

Apple不支持Windows版本的Safari 5.1.7

手机浏览器

兼容性测试结果:

  • 手机 Safari (iOS 6.1: iPad / iPhone / iPod Touch) †
    • 所有iOS浏览器使用这个引擎。
    • iPhone / iPod Touch: 视频在QuickTime插件上播放。
    • 优于iOS 6,当使用多个jPlayer实例的时候,播放和加载条不能正常工作。这个浏览器一次只能允许一个多媒体元素所以不可能同时播放2个实例。
  • 手机 Chrome (Android 4.2.2: Nexus 7) †
    • 多媒体文件要播放面板必须获得焦点。
  • Playbook 浏览器 †

† 以上测试是使用jPlayer版本发布时候最新的浏览器版本获得的结果。

jPlayer已知问题

Android HTML5 问题

Android 2.3上HTML5 多媒体 Spec 的不完全实现会引起jPlayer行为异常。

Android 2.3的问题

  • 确实ended事件。
  • play之后使用setMedia失败。
  • 播放结束时出错。音频播放到结尾的时候奔溃。

看一下这些问题的解决方法jPlayer Demo

Android Browser Crash with jQuery 1.8.1

GUI的自动隐藏动画使浏览器奔溃。

Android 2.3.4 和 jQuery 1.8.1 和jQuery 1.8.2 上的问题在jQuery 1.8.3修复了

jQuery bug Ticket #12497

Flash 和 m4a/m4v/flv 元数据

当元数据缺失或者文件末尾出错时,jPlayer的Flash 解决方案播放 MP4和FLV类型格式有问题。

jPlayer Flash解决方案的问题:

  • 症状:Flash 必须在播放前下载整个文件。
    原因:元数据在文件末尾。
    解决方法:把元数据放在文件头重新编码文件或者流。
  • 症状:Flash无法暂停FLV
    原因:元数据缺失。
    解决方法:使用FLVtool2 或者 YAMDI 修复FLV
    GitHub问题: #89 Can not pause FLV files which have no metadata

不兼容的浏览器

jPlayer在下面浏览器上无法工作:

  • Wii Opera
  • Playstation 3 浏览器

事件驱动的手机浏览器

下面的手机浏览器需要用户手动触发命令让多媒体重复播放。

  • 手机版Safari
    • 如果这个多媒体元素是第一次被播放需要手动触发播放命令。用户必须点击播放按钮。这会触发ready事件处理器中jPlayer("play")的操作执行。浏览器会忽略这个命令。jPlayer会一直处于等待状态直到用户按下播放按钮。
      一旦接收到了这个用户动作,JS代码才会被允许执行你想要的任何关于多媒体元素操作。注意jPlayer多媒体播放器使用一个音频和一个视频元素。两个元素对应自己的用户动作。
      也会触发:jPlayer("load")jPlayer("pause", time)

索引: HTML5浏览器对音频和视频的支持

这是HTML5浏览器支持的格式的详情。所有浏览器版本都是它们最新的官方发布版本。

格式名和jPlayer使用的suppliedsetMedia 的格式属性相关。例如,WEBMA是WebM音频格式,OGV是OGG视频格式,M4A是MP4音频格式。关于格式的更多详情参见Media Encoding.

HTML5 音频格式

音频WebM文件使用和OGG文件一样的Vorbis编码。

HTML5浏览器和它们支持的音频文件格式:

  • Firefox (OSX, Win): WEBMA, OGA
  • Safari (OSX, Win): MP3, M4A
  • Mobile Safari iOS4 (iPad, iPhone, iPod): MP3, M4A
  • Opera (OSX, Win): WEBMA, OGA
  • Chrome (OSX, Win): WEBMA, OGA, MP3, M4A
  • IE9 (Win): MP3, M4A

HTML5 视频

WebM (VP8)编码视频优于OGG (Theora)编码视频。

HTML5浏览器和它们支持的视频文件格式:

  • Firefox (OSX, Win): WEBMV, OGV
  • Safari (OSX, Win): M4V
  • Mobile Safari iOS4 (iPad, iPhone, iPod): M4V
  • Opera (OSX, Win): WEBMA, OGV
  • Chrome (OSX, Win): WEBMV, OGV, M4V. (马上会放弃对M4V的支持)
  • IE9 (Win): M4V

HTML5 音频流

HTML5浏览器和它们支持的音频流。(注意jPlayer在非html5浏览器的Flash软件播放使用MP3流。)

音频流播放成功:

  • Firefox (OSX, Win): OGA
  • Safari (OSX): MP3
  • Mobile Safari (iOS4 iPad/iPhone/iPod): MP3
  • Opera (OSX, Win): OGA
  • Chrome (OSX, Win): MP3, OGA
  • IE9 (Win): MP3


音频流播放失败:

  • Safari (Win): MP3

外部资源

一些关于html5 对视频和音频支持的资源: