jPlayerPlaylist相关方法参数

简介

jPlayer是个用JavaScript写的完全免费和开源的媒体库(media library)。作为jQuery插件的一员，使用jPlayer可以在你的网页上轻松加入跨平台的音乐和视频。通过jPlayer的API，你可以构想出具有创意的影音解决方案，当然，你也可以为jPlayer贡献出自己的一份力。

支持的平台与浏览器

Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9

OSX: Safari, Firefox, Chrome, Opera

iOS: Mobile Safari: iPad, iPhone, iPod Touch

Android: Android 2.3 Browser

Blackberry: We require a device for testing

媒体支持

HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav

Flash: mp3, mp4 (AAC/H.264)

jplayerplaylist使用方法

The constructor

The playlist in this demo is instanced with 1 item in it and uses the {supplied:"ogv,m4v,oga,mp3"}option to enable a media player that accepts audio and video.

1. var myPlaylist = new jPlayerPlaylist({
2. jPlayer: “#jquery_jplayer_N”,
3. cssSelectorAncestor: “#jp_container_N”
4. }, [
5. {
6. title:”Cro Magnon Man”,
7. artist:”The Stark Palace”,
8. mp3:”http://www.jplayer.org/audio/mp3/TSP-01-Cro\_magnon\_man.mp3“,
9. oga:”http://www.jplayer.org/audio/ogg/TSP-01-Cro\_magnon\_man.ogg“,
10. poster: “http://www.jplayer.org/audio/poster/The\_Stark\_Palace\_640x360.png“
11. }
12. ], {
13. playlistOptions: {
14. enableRemoveControls: true
15. },
16. swfPath: “/js”,
17. supplied: “ogv, m4v, oga, mp3”,
18. smoothPlayBar: true,
19. keyEnabled: true,
20. audioFullScreen: true // Allows the audio poster to go full screen via keyboard
21. });

The constructor might look scary to JavaScript newcomers, but it is really just 1 line of JavaScript, laid out in an easy to read manner. JSON (JavaScript Object Notation) is used in this demo to create the objects and arrays passed to the constructor. The parameters are an object, an array and an object:

1. // This is pseudo-code.
2. var myPlaylist = new jPlayerPlaylist({cssSelector}, [playlist], {options});

The parameters can be created outside the constructor to suit your goal. In particular, the options may be common to all your instances on a page. The playlist could be generated through an AJAX call to a JSON or XML url.

1. var cssSelector = { jPlayer: “#jquery_jplayer_N”, cssSelectorAncestor: “#jp_container_N” };
2. var playlist = []; // Empty playlist
3. var options = { swfPath: “/js”, supplied: “ogv, m4v, oga, mp3” };
4. var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

Defining the css selectors

The first parameter is an object used to define the css selectors that point at the jPlayer and container HTML elements. The jPlayer element is where the video output is displayed and the container, cssSelectorAncestor, is the outter divider of the player skin HTML. To use the default values, use an empty object, {}. The defaults are:

1. {
2. jPlayer: “#jquery_jplayer_1”,
3. cssSelectorAncestor: “#jp_container_1”
4. }

Defining the playlist content

The second parameter is an Array of Objects used to define the playlist. The object elements are used by the jPlayer setMedia command, so follow the rules for suppling the formats defined in thesupplied option. The title, artist and free properties are used by jPlayerPlaylist to display each item. To start with an empty playlist, use an empty array, []. A playlist with a single audio item looks like:

1. [
2. {
3. title:”The Title”,
4. artist:”The Artist”, // Optional
5. free: Boolean, // Optional - Generates links to the media
6. mp3:”MP3 URL”, // Dependant on supplied option
7. oga:”OGA URL”, // Dependant on supplied option
8. poster: “Poster URL” // Optional
9. }
10. ]

Defining the jPlayer and playlist options

The third parameter is an object to define the jPlayer options and jPlayerPlaylist options. This object is passed to jPlayer, and is used to setup the basic jPlayer options, such as solution, supplied and the all important swfPath. You can define all options, except for the cssSelectorAncestor and therepeat event handler, which are overridden by the jPlayerPlaylist code. Remember that event handlers are not really options. The playlist code binds event handlers to jPlayer events, such asready and ended, which might interact with your event handlers in unexpected ways. Example options are:

1. {
2. playlistOptions: {
3. autoPlay: true,
4. enableRemoveControls: true
5. },
6. swfPath: “/js”,
7. supplied: “mp3, oga”
8. }

Default playlist options:

1. playlistOptions: {
2. autoPlay: false,
3. loopOnPrevious: false,
4. shuffleOnLoop: true,
5. enableRemoveControls: false,
6. displayTime: ‘slow’,
7. addTime: ‘fast’,
8. removeTime: ‘fast’,
9. shuffleTime: ‘slow’
10. }

Control flag descriptions:

autoPlay : Boolean : Will auto-play when instanced on the page, and when a new playlist is given using setPlaylist(). Remember that mobile devices require a gesture before anything will play. Recommend leaving this as false initially… And change it later if you want when changing the playlist through a user gesture. eg., They clicked on a link to change the playlist and your click handler changes autoPlay to true before you setPlaylist(). loopOnPrevious : Boolean : If loop is active, the playlist will loop back to the end when executingprevious(). shuffleOnLoop : Boolean : If loop and shuffle are active, the playlist will shuffle when executingnext() on the last item. enableRemoveControls : Boolean : Displays the remove controls for each item.

Animation timing controls:

These options use jQuery animation timings, where the time is in milliseconds and also the strings ‘slow’ and ‘fast’ can be used. To make changes instant, set the time to zero, which removes the animation effect. displayTime : Number/String : The period of the slide-up and slide-down animations when a new playlist is displayed. addTime : Number/String : The period of the slide-down animation when a new item is added. removeTime : Number/String : The period of the slide-up animation when a item is removed. shuffleTime : Number/String : The period of the slide-up and slide-down animations when a playlist is shuffled.

jPlayerPlaylist methods:

setPlaylist(playlist:Array) : Void Change the playlist. (See playlistOptions.autoPlay to cause it to play automatically.)

1. myPlaylist.setPlaylist([
2. {
3. title:”Cro Magnon Man”,
4. artist:”The Stark Palace”,
5. mp3:”http://www.jplayer.org/audio/mp3/TSP-01-Cro\_magnon\_man.mp3“,
6. oga:”http://www.jplayer.org/audio/ogg/TSP-01-Cro\_magnon\_man.ogg“,
7. poster: “http://www.jplayer.org/audio/poster/The\_Stark\_Palace\_640x360.png“
8. },
9. {
10. title:”Hidden”,
11. artist:”Miaow”,
12. free: true,
13. mp3:”http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3“,
14. oga:”http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg“,
15. poster: “http://www.jplayer.org/audio/poster/Miaow\_640x360.png“
16. }
17. ]);

add(media:Object, [playNow:Boolean]) : Void Add a media item to the end of the playlist. Optional playNow param to start it playing after adding it.

1. myPlaylist.add({
2. title:”Your Face”,
3. artist:”The Stark Palace”,
4. mp3:”http://www.jplayer.org/audio/mp3/TSP-05-Your\_face.mp3“,
5. oga:”http://www.jplayer.org/audio/ogg/TSP-05-Your\_face.ogg“,
6. poster: “http://www.jplayer.org/audio/poster/The\_Stark\_Palace\_640x360.png“
7. });

remove([index:Number]) : Boolean Removes the item from the playlist. Removes all items if no param is given. A positive index removes items from the start of the playlist while a negative index removes items from the end.

1. // Examples of usage:

2. myPlaylist.remove(); // Removes all items

3. myPlaylist.remove(0); // Removes the 1st item

4. myPlaylist.remove(1); // Removes the 2nd item

5. myPlaylist.remove(-1); // Removes the last item

6. if( myPlaylist.remove(0) ) {

7. alert(“1st item removed successfully!”);

8. } else {

9. alert(“Failed to remove 1st item!”); // A remove operation is being animated.

10. }

select(index:Number) : Void Selects the item in the playlist. A positive index selects items from the start of the playlist while a negative index selects items from the end.

1. // Examples of usage:
2. myPlaylist.select(0); // Selects the 1st item
3. myPlaylist.select(1); // Selects the 2nd item
4. myPlaylist.select(-1); // Selects the last item

play([index:Number]) : Void Plays the item in the playlist. Plays the current item if no param is given. A positive index plays items from the start of the playlist while a negative index plays items from the end.

1. // Examples of usage:
2. myPlaylist.play(); // Plays the currently selected item
3. myPlaylist.play(0); // Plays the 1st item
4. myPlaylist.play(1); // Plays the 2nd item
5. myPlaylist.play(-1); // Plays the last item

shuffle([shuffled:Boolean], [playNow:Boolean]) : Void Shuffle the playlist. Toggles shuffled setting if no param is given. True always shuffles the playlist. False will un-shuffle if it was shuffled. The playNow param will cause the first item to play automatically. (playNow can only be used if the first param is given. Use shuffle(undefined,true) to toggle and play.)

1. // Examples of usage:
2. myPlaylist.shuffle(); // Toggles shuffle state
3. myPlaylist.shuffle(true); // Shuffle the playlist
4. myPlaylist.shuffle(false); // Un-shuffle the playlist
5. myPlaylist.shuffle(true, true); // Shuffle the playlist and plays

next() : Void Move to and play the next item in the playlist. The behaviour for the last item depends on the loop state, the shuffle state and the playlistOptions.shuffleOnLoop option.

1. myPlaylist.next();

previous() : Void Move to and play the previous item in the playlist. The behaviour for the first item depends on the loop state and the playlistOptions.loopOnPrevious option. (The playlist is never shuffled when looping back to the last item.)

1. myPlaylist.previous();

pause() : Void Pause the current item.

1. myPlaylist.pause();

option(option:String, [value:Mixed]) : Void Set or get the playlist option.

1. // Examples of usage:
2. var controls = myPlaylist.option(“enableRemoveControls”); // Get option
3. myPlaylist.option(“enableRemoveControls”, true); // Set option

The HTML Structure

The playlist looks for the class jp-playlist within the cssSelectorAncestor element. A

element is expected here, which is used to generate the item list.