jplayer的基本使用

据我观察，jPlayer的原理主要是用到HTML5，在不支持HTML5的浏览器上使用SWF。做到全兼容，这一点很不错。

官方还说明，服务器对于MP3文件不要做GZIP压缩，只是徒增CPU而已。并且在Flash播放GZIP的MP3时会出错。

 jPlayer需要两个文件上传到你的服务器。

jquery.jplayer.min.js 

Jplayer.swf

最重要的当然还是jquery.min.js.

 

JPLAYER构造

 

 

 jPlayer构造在jQuery选择器上。采用 $(ID).jPlayer(Object: options) 的形式执行动作。

在某些场合，jPlayer也可以构造在body上，指你不用播放视频的时候。

注意：swfPath，它定义jPlayer SWF文件的路径。记得把SWF文件上传到你的服务器！

你也可以使用类似jPlayer({solution:"flash, html")的语句规定用什么方式播放媒体优先。

 

初始化后更改设置

初始化之后 使用类似 jPlayer(“ option“,{key:value})的形式改变设置。

实现一个自动播放音乐的网页

 

01
$(document).ready(function(){
02
    $("#jquery_jplayer_1").jPlayer({
03
        ready: function (event) {
04
            $(this).jPlayer("setMedia", {
05
                m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
06
                oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
07
            });
08
        },
09
        swfPath: "js",
10
        supplied: "m4a, oga",
11
    }).jPlayer("play");
12
});

 

解释一下上面的代码：

第一行“$(document).ready(function(){”大家都无比亲切吧，文档载入事件。

第二行“$("#jquery_jplayer_1").jPlayer({”选择的是一个DIV，用于承载HTML5元素或是Flash，大家在文档里写一个空的DIV即可。

第三行“ready: function (event) {”，ready是一个键，function是一个值，灰常熟悉的东西。

第四行“$(this).jPlayer("setMedia", {”this指的是“$("#jquery_jplayer_1")”，意为：“$("#jquery_jplayer_1").jPlayer("setMedia", {”

很熟悉。

setMedia是一个option，根据第二步说的。

第九行“swfPath: "js",”，这个定义了swf播放器所在的相对路径，如果你不打算兼容不支持HTML5的网页，可以不写:）

第十行“supplied: "m4a, oga",”所支持的格式。

第十一行“jPlayer("play");”意为：$("#jquery_jplayer_1").jPlayer("play");，播放媒体，实现自动播放。

JPLAYER方法

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

描述：这个方法被用来定义要播放的媒体， 媒体参数是一个对象，具有属性定义不同的编码格式。

所有的编码格式都应该在构造设置中指定“jPlayer({ supplied : "f1, f2, fN"})”。

jPlayer构造选项jPlayer({ preload )是用来指定何时开始下载媒体。

参数：媒体

对象，定义媒体的格式以及网址。

支持格式：

 

MP3

MP3音频格式

M4A

MP4音频格式

M4V

MP4视频格式

webma

的WebM音频格式

webmv

WebM视频格式

oga

OGG音频格式

OGV

OGG视频格式

FLA

FLV音频格式

FLV

FLV视频格式

WAV

wav音频格式

 示例代码：

01
$("#jpId").jPlayer( {
02
  ready: function() {
03
    $(this).jPlayer( "setMedia", {
04
      m4a: "m4a/elvis.m4a",
05
      oga: "oga/elvis.oga",
06
      webma: "webm/elvis.webm"
07
    });
08
  },
09
  supplied: "webma, m4a, oga"
10
);