1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8" />
5<!-- Website Design By: www.happyworm.com -->
6<title>Demo : The jPlayerPlaylist Object</title>
7<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
8<link href="../../dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
9<script type="text/javascript" src="../../lib/jquery.min.js"></script>
10<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>
11<script type="text/javascript" src="../../dist/add-on/jplayer.playlist.min.js"></script>
12<script type="text/javascript">
13//<![CDATA[
14$(document).ready(function(){
15
16	var myPlaylist = new jPlayerPlaylist({
17		jPlayer: "#jquery_jplayer_N",
18		cssSelectorAncestor: "#jp_container_N"
19	}, [
20		{
21			title:"Cro Magnon Man",
22			artist:"The Stark Palace",
23			mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
24			oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
25			poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
26		}
27	], {
28		playlistOptions: {
29			enableRemoveControls: true
30		},
31		swfPath: "../../dist/jplayer",
32		supplied: "webmv, ogv, m4v, oga, mp3",
33		useStateClassSkin: true,
34		autoBlur: false,
35		smoothPlayBar: true,
36		keyEnabled: true,
37		audioFullScreen: true
38	});
39
40	// Click handlers for jPlayerPlaylist method demo
41
42	// Audio mix playlist
43
44	$("#playlist-setPlaylist-audio-mix").click(function() {
45		myPlaylist.setPlaylist([
46			{
47				title:"Cro Magnon Man",
48				artist:"The Stark Palace",
49				mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
50				oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
51				poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
52			},
53			{
54				title:"Your Face",
55				artist:"The Stark Palace",
56				mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
57				oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
58				poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
59			},
60			{
61				title:"Hidden",
62				artist:"Miaow",
63				free: true,
64				mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
65				oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg",
66				poster: "http://www.jplayer.org/audio/poster/Miaow_640x360.png"
67			},
68			{
69				title:"Cyber Sonnet",
70				artist:"The Stark Palace",
71				mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
72				oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg",
73				poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
74			},
75			{
76				title:"Tempered Song",
77				artist:"Miaow",
78				mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
79				oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg",
80				poster: "http://www.jplayer.org/audio/poster/Miaow_640x360.png"
81			},
82			{
83				title:"Lentement",
84				artist:"Miaow",
85				mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
86				oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg",
87				poster: "http://www.jplayer.org/audio/poster/Miaow_640x360.png"
88			}
89		]);
90	});
91
92	// Video mix playlist
93
94	$("#playlist-setPlaylist-video-mix").click(function() {
95		myPlaylist.setPlaylist([
96			{
97				title:"Big Buck Bunny Trailer",
98				artist:"Blender Foundation",
99				m4v:"http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
100				ogv:"http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
101				webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
102				poster:"http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
103			},
104			{
105				title:"Finding Nemo Teaser",
106				artist:"Pixar",
107				m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",
108				ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",
109				webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",
110				poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
111			},
112			{
113				title:"Incredibles Teaser",
114				artist:"Pixar",
115				m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v",
116				ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",
117				webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm",
118				poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
119			}
120		]);
121	});
122
123	// Media mix playlist
124
125	$("#playlist-setPlaylist-media-mix").click(function() {
126		myPlaylist.setPlaylist([
127			{
128				title:"Cro Magnon Man",
129				artist:"The Stark Palace",
130				mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
131				oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
132				poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
133			},
134			{
135				title:"Your Face",
136				artist:"The Stark Palace",
137				mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
138				oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
139				poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
140			},
141			{
142				title:"Hidden",
143				artist:"Miaow",
144				free: true,
145				mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
146				oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg",
147				poster: "http://www.jplayer.org/audio/poster/Miaow_640x360.png"
148			},
149			{
150				title:"Big Buck Bunny Trailer",
151				artist:"Blender Foundation",
152				m4v:"http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
153				ogv:"http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
154				webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
155				poster:"http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
156			},
157			{
158				title:"Finding Nemo Teaser",
159				artist:"Pixar",
160				m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",
161				ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",
162				webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",
163				poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
164			},
165			{
166				title:"Cyber Sonnet",
167				artist:"The Stark Palace",
168				mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
169				oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg",
170				poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
171			},
172			{
173				title:"Incredibles Teaser",
174				artist:"Pixar",
175				m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v",
176				ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",
177				webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm",
178				poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
179			},
180			{
181				title:"Tempered Song",
182				artist:"Miaow",
183				mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
184				oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg",
185				poster: "http://www.jplayer.org/audio/poster/Miaow_640x360.png"
186			},
187			{
188				title:"Lentement",
189				artist:"Miaow",
190				mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
191				oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg",
192				poster: "http://www.jplayer.org/audio/poster/Miaow_640x360.png"
193			}
194		]);
195	});
196
197	// Miaow tracks
198
199	$("#playlist-add-bubble").click(function() {
200		myPlaylist.add({
201			title:"Bubble",
202			artist:"Miaow",
203			free:true,
204			mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
205			oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg",
206			poster: "http://www.jplayer.org/audio/poster/Miaow_640x360.png"
207		});
208	});
209
210	$("#playlist-add-hidden").click(function() {
211		myPlaylist.add({
212			title:"Hidden",
213			artist:"Miaow",
214			free: true,
215			mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
216			oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg",
217			poster: "http://www.jplayer.org/audio/poster/Miaow_640x360.png"
218		});
219	});
220
221	$("#playlist-add-tempered-song").click(function() {
222		myPlaylist.add({
223			title:"Tempered Song",
224			artist:"Miaow",
225			mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
226			oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg",
227			poster: "http://www.jplayer.org/audio/poster/Miaow_640x360.png"
228		});
229	});
230
231	$("#playlist-add-lentement").click(function() {
232		myPlaylist.add({
233			title:"Lentement",
234			artist:"Miaow",
235			mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
236			oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg",
237			poster: "http://www.jplayer.org/audio/poster/Miaow_640x360.png"
238		});
239	});
240
241	// The Stark Palace tracks
242
243	$("#playlist-add-cro-magnon-man").click(function() {
244		myPlaylist.add({
245			title:"Cro Magnon Man",
246			artist:"The Stark Palace",
247			mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
248			oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
249			poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
250		});
251	});
252
253	$("#playlist-add-your-face").click(function() {
254		myPlaylist.add({
255			title:"Your Face",
256			artist:"The Stark Palace",
257			mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
258			oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
259			poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
260		});
261	});
262
263	$("#playlist-add-cyber-sonnet").click(function() {
264		myPlaylist.add({
265			title:"Cyber Sonnet",
266			artist:"The Stark Palace",
267			mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
268			oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg",
269			poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
270		});
271	});
272
273	// Videos
274
275	$("#playlist-add-big-buck-bunny").click(function() {
276		myPlaylist.add({
277			title:"Big Buck Bunny Trailer",
278			artist:"Blender Foundation",
279			m4v:"http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
280			ogv:"http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
281			webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
282			poster:"http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
283		});
284	});
285
286	$("#playlist-add-finding-nemo").click(function() {
287		myPlaylist.add({
288			title:"Finding Nemo Teaser",
289			artist:"Pixar",
290			m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",
291			ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",
292			webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",
293			poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
294		});
295	});
296
297	$("#playlist-add-incredibles").click(function() {
298		myPlaylist.add({
299			title:"Incredibles Teaser",
300			artist:"Pixar",
301			m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v",
302			ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",
303			webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm",
304			poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
305		});
306	});
307
308	// The remove commands
309
310	$("#playlist-remove").click(function() {
311		myPlaylist.remove();
312	});
313
314	$("#playlist-remove--2").click(function() {
315		myPlaylist.remove(-2);
316	});
317	$("#playlist-remove--1").click(function() {
318		myPlaylist.remove(-1);
319	});
320	$("#playlist-remove-0").click(function() {
321		myPlaylist.remove(0);
322	});
323	$("#playlist-remove-1").click(function() {
324		myPlaylist.remove(1);
325	});
326	$("#playlist-remove-2").click(function() {
327		myPlaylist.remove(2);
328	});
329
330	// The shuffle commands
331
332	$("#playlist-shuffle").click(function() {
333		myPlaylist.shuffle();
334	});
335
336	$("#playlist-shuffle-false").click(function() {
337		myPlaylist.shuffle(false);
338	});
339	$("#playlist-shuffle-true").click(function() {
340		myPlaylist.shuffle(true);
341	});
342
343	// The select commands
344
345	$("#playlist-select--2").click(function() {
346		myPlaylist.select(-2);
347	});
348	$("#playlist-select--1").click(function() {
349		myPlaylist.select(-1);
350	});
351	$("#playlist-select-0").click(function() {
352		myPlaylist.select(0);
353	});
354	$("#playlist-select-1").click(function() {
355		myPlaylist.select(1);
356	});
357	$("#playlist-select-2").click(function() {
358		myPlaylist.select(2);
359	});
360
361	// The next/previous commands
362
363	$("#playlist-next").click(function() {
364		myPlaylist.next();
365	});
366	$("#playlist-previous").click(function() {
367		myPlaylist.previous();
368	});
369
370	// The play commands
371
372	$("#playlist-play").click(function() {
373		myPlaylist.play();
374	});
375
376	$("#playlist-play--2").click(function() {
377		myPlaylist.play(-2);
378	});
379	$("#playlist-play--1").click(function() {
380		myPlaylist.play(-1);
381	});
382	$("#playlist-play-0").click(function() {
383		myPlaylist.play(0);
384	});
385	$("#playlist-play-1").click(function() {
386		myPlaylist.play(1);
387	});
388	$("#playlist-play-2").click(function() {
389		myPlaylist.play(2);
390	});
391
392	// The pause command
393
394	$("#playlist-pause").click(function() {
395		myPlaylist.pause();
396	});
397
398	// Changing the playlist options
399
400	// Option: autoPlay
401
402	$("#playlist-option-autoPlay-true").click(function() {
403		myPlaylist.option("autoPlay", true);
404	});
405	$("#playlist-option-autoPlay-false").click(function() {
406		myPlaylist.option("autoPlay", false);
407	});
408
409	// Option: enableRemoveControls
410
411	$("#playlist-option-enableRemoveControls-true").click(function() {
412		myPlaylist.option("enableRemoveControls", true);
413	});
414	$("#playlist-option-enableRemoveControls-false").click(function() {
415		myPlaylist.option("enableRemoveControls", false);
416	});
417
418	// Option: displayTime
419
420	$("#playlist-option-displayTime-0").click(function() {
421		myPlaylist.option("displayTime", 0);
422	});
423	$("#playlist-option-displayTime-fast").click(function() {
424		myPlaylist.option("displayTime", "fast");
425	});
426	$("#playlist-option-displayTime-slow").click(function() {
427		myPlaylist.option("displayTime", "slow");
428	});
429	$("#playlist-option-displayTime-2000").click(function() {
430		myPlaylist.option("displayTime", 2000);
431	});
432
433	// Option: addTime
434
435	$("#playlist-option-addTime-0").click(function() {
436		myPlaylist.option("addTime", 0);
437	});
438	$("#playlist-option-addTime-fast").click(function() {
439		myPlaylist.option("addTime", "fast");
440	});
441	$("#playlist-option-addTime-slow").click(function() {
442		myPlaylist.option("addTime", "slow");
443	});
444	$("#playlist-option-addTime-2000").click(function() {
445		myPlaylist.option("addTime", 2000);
446	});
447
448	// Option: removeTime
449
450	$("#playlist-option-removeTime-0").click(function() {
451		myPlaylist.option("removeTime", 0);
452	});
453	$("#playlist-option-removeTime-fast").click(function() {
454		myPlaylist.option("removeTime", "fast");
455	});
456	$("#playlist-option-removeTime-slow").click(function() {
457		myPlaylist.option("removeTime", "slow");
458	});
459	$("#playlist-option-removeTime-2000").click(function() {
460		myPlaylist.option("removeTime", 2000);
461	});
462
463	// Option: shuffleTime
464
465	$("#playlist-option-shuffleTime-0").click(function() {
466		myPlaylist.option("shuffleTime", 0);
467	});
468	$("#playlist-option-shuffleTime-fast").click(function() {
469		myPlaylist.option("shuffleTime", "fast");
470	});
471	$("#playlist-option-shuffleTime-slow").click(function() {
472		myPlaylist.option("shuffleTime", "slow");
473	});
474	$("#playlist-option-shuffleTime-2000").click(function() {
475		myPlaylist.option("shuffleTime", 2000);
476	});
477
478	// Equivalent commands
479
480	$("#playlist-equivalent-1-a").click(function() {
481		myPlaylist.add({
482			title:"Your Face",
483			artist:"The Stark Palace",
484			mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
485			oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
486			poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
487		}, true);
488	});
489
490	$("#playlist-equivalent-1-b").click(function() {
491		myPlaylist.add({
492			title:"Your Face",
493			artist:"The Stark Palace",
494			mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
495			oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
496			poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
497		});
498		myPlaylist.play(-1);
499	});
500
501	// AVOID COMMANDS
502
503	$("#playlist-avoid-1").click(function() {
504		myPlaylist.remove(2); // Removes the 3rd item
505		myPlaylist.remove(3); // Ignored unless removeTime=0: Where it removes the 4th item, which was originally the 5th item.
506	});
507
508
509});
510//]]>
511</script>
512</head>
513<body>
514<div id="jp_container_N" class="jp-video jp-video-270p" role="application" aria-label="media player">
515	<div class="jp-type-playlist">
516		<div id="jquery_jplayer_N" class="jp-jplayer"></div>
517		<div class="jp-gui">
518			<div class="jp-video-play">
519				<button class="jp-video-play-icon" role="button" tabindex="0">play</button>
520			</div>
521			<div class="jp-interface">
522				<div class="jp-progress">
523					<div class="jp-seek-bar">
524						<div class="jp-play-bar"></div>
525					</div>
526				</div>
527				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
528				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
529				<div class="jp-details">
530					<div class="jp-title" aria-label="title">&nbsp;</div>
531				</div>
532				<div class="jp-controls-holder">
533					<div class="jp-volume-controls">
534						<button class="jp-mute" role="button" tabindex="0">mute</button>
535						<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
536						<div class="jp-volume-bar">
537							<div class="jp-volume-bar-value"></div>
538						</div>
539					</div>
540					<div class="jp-controls">
541						<button class="jp-previous" role="button" tabindex="0">previous</button>
542						<button class="jp-play" role="button" tabindex="0">play</button>
543						<button class="jp-stop" role="button" tabindex="0">stop</button>
544						<button class="jp-next" role="button" tabindex="0">next</button>
545					</div>
546					<div class="jp-toggles">
547						<button class="jp-repeat" role="button" tabindex="0">repeat</button>
548						<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
549						<button class="jp-full-screen" role="button" tabindex="0">full screen</button>
550					</div>
551				</div>
552			</div>
553		</div>
554		<div class="jp-playlist">
555			<ul>
556				<!-- The method Playlist.displayPlaylist() uses this unordered list -->
557				<li></li>
558			</ul>
559		</div>
560		<div class="jp-no-solution">
561			<span>Update Required</span>
562			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>.
563		</div>
564	</div>
565</div>
566			<p style="margin-top:1em;">
567				<code>setPlaylist( <a href="javascript:;" id="playlist-setPlaylist-audio-mix">[Audio Mix]</a> | <a href="javascript:;" id="playlist-setPlaylist-video-mix">[Video Mix]</a> | <a href="javascript:;" id="playlist-setPlaylist-media-mix">[Media Mix]</a> )</code><br />
568
569				Miaow audio: <code>add( <a href="javascript:;" id="playlist-add-bubble">{Bubble}</a> | <a href="javascript:;" id="playlist-add-hidden">{Hidden}</a> | <a href="javascript:;" id="playlist-add-tempered-song">{Tempered Song}</a> | <a href="javascript:;" id="playlist-add-lentement">{Lentement}</a> )</code><br />
570				The Stark Palace audio: <code>add( <a href="javascript:;" id="playlist-add-cro-magnon-man">{Cro Magnon Man}</a> | <a href="javascript:;" id="playlist-add-your-face">{Your Face}</a> | <a href="javascript:;" id="playlist-add-cyber-sonnet">{Cyber Sonnet}</a> )</code><br />
571				Various video: <code>add( <a href="javascript:;" id="playlist-add-big-buck-bunny">{Big Buck Bunny}</a> | <a href="javascript:;" id="playlist-add-incredibles">{Incredibles}</a> | <a href="javascript:;" id="playlist-add-finding-nemo">{Finding Nemo}</a> )</code><br />
572
573				<code><a href="javascript:;" id="playlist-remove">remove</a>(  <a href="javascript:;" id="playlist-remove--2">-2</a> | <a href="javascript:;" id="playlist-remove--1">-1</a> | <a href="javascript:;" id="playlist-remove-0">0</a> | <a href="javascript:;" id="playlist-remove-1">1</a> | <a href="javascript:;" id="playlist-remove-2">2</a> )</code>
574				| <code><a href="javascript:;" id="playlist-shuffle">shuffle</a>( <a href="javascript:;" id="playlist-shuffle-false">false</a> | <a href="javascript:;" id="playlist-shuffle-true">true</a> )</code><br />
575
576				<code>select( <a href="javascript:;" id="playlist-select--2">-2</a> | <a href="javascript:;" id="playlist-select--1">-1</a> | <a href="javascript:;" id="playlist-select-0">0</a> | <a href="javascript:;" id="playlist-select-1">1</a> | <a href="javascript:;" id="playlist-select-2">2</a> )</code>
577				| <code><a href="javascript:;" id="playlist-next">next</a>()</code> | <code><a href="javascript:;" id="playlist-previous">previous</a>()</code><br />
578
579				<code><a href="javascript:;" id="playlist-play">play</a>( <a href="javascript:;" id="playlist-play--2">-2</a> | <a href="javascript:;" id="playlist-play--1">-1</a> | <a href="javascript:;" id="playlist-play-0">0</a> | <a href="javascript:;" id="playlist-play-1">1</a> | <a href="javascript:;" id="playlist-play-2">2</a> )</code>
580				| <code><a href="javascript:;" id="playlist-pause">pause</a>()</code><br />
581
582				<code>option( "autoPlay", <a href="javascript:;" id="playlist-option-autoPlay-false">false</a> | <a href="javascript:;" id="playlist-option-autoPlay-true">true</a> )</code> Default: false<br />
583				<code>option( "enableRemoveControls", <a href="javascript:;" id="playlist-option-enableRemoveControls-false">false</a> | <a href="javascript:;" id="playlist-option-enableRemoveControls-true">true</a> )</code> Default: false<br />
584				<code>option( "displayTime", <a href="javascript:;" id="playlist-option-displayTime-0">0</a> | <a href="javascript:;" id="playlist-option-displayTime-fast">'fast'</a> | <a href="javascript:;" id="playlist-option-displayTime-slow">'slow'</a> | <a href="javascript:;" id="playlist-option-displayTime-2000">2000</a> )</code> Default: 'slow'<br />
585				<code>option( "addTime", <a href="javascript:;" id="playlist-option-addTime-0">0</a> | <a href="javascript:;" id="playlist-option-addTime-fast">'fast'</a> | <a href="javascript:;" id="playlist-option-addTime-slow">'slow'</a> | <a href="javascript:;" id="playlist-option-addTime-2000">2000</a> )</code> Default: 'fast'<br />
586				<code>option( "removeTime", <a href="javascript:;" id="playlist-option-removeTime-0">0</a> | <a href="javascript:;" id="playlist-option-removeTime-fast">'fast'</a> | <a href="javascript:;" id="playlist-option-removeTime-slow">'slow'</a> | <a href="javascript:;" id="playlist-option-removeTime-2000">2000</a> )</code> Default: 'fast'<br />
587				<code>option( "shuffleTime", <a href="javascript:;" id="playlist-option-shuffleTime-0">0</a> | <a href="javascript:;" id="playlist-option-shuffleTime-fast">'fast'</a> | <a href="javascript:;" id="playlist-option-shuffleTime-slow">'slow'</a> | <a href="javascript:;" id="playlist-option-shuffleTime-2000">2000</a> )</code> Default: 'slow'
588
589			</p>
590			<p>
591				Equivalent Effect: <code><a href="javascript:;" id="playlist-equivalent-1-a">add(Your Face, true)</a></code> == <code><a href="javascript:;" id="playlist-equivalent-1-b">add(Your Face) then play(-1)</a></code>
592			</p>
593			<p>
594				Avoid code like: <code><a href="javascript:;" id="playlist-avoid-1">remove(2) then remove(3)</a></code><br />
595				Because the second command will only work if the remove animation time, <code class="prettyprint">removeTime</code>, is zero.
596				Even then, it will look like it removes the 3rd and 5th items from the original playlist before both commands executed.
597				This is because the <code class="prettyprint">remove(2)</code> removes the 3rd item and then <code class="prettyprint">remove(3)</code> removes the 4th item, which was the 5th item before the 3rd item was removed.
598				To remove the 3rd and 4th items, you'd use <code class="prettyprint">remove(2)</code> and then <code class="prettyprint">remove(2)</code> again.
599				The <code class="prettyprint">remove()</code> method returns a <code class="prettyprint">true</code> when successful, a <code class="prettyprint">false</code> when ignored, which allows you to know whether it worked or not.
600			</p>
601</body>
602
603</html>
604