Details
Category: Faq
Administrator By Administrator
Administrator
30.Jul
Parent Category: FAQs
30 July 2009
Last Updated: 06 August 2023
Hits: 38165

HTML playlist

Here is different example to build an HTML playlist selection outside the player.

First Be sure you can entering raw HTML in editors (Inside the article or inside a custom html module), see this how-to : https://docs.joomla.org/Entering_raw_HTML_in_editors

All playlist selection models are place below the player, but it can be anywhere else in the page (above, beside..) also there is no css styling, but you can for sure styling it with your own css code.

To interact with the player we use the JW Player API

HTML Playlist with select list

Here is the jwplayer1 set with the plugin shortcode, note the ID of the player as to be set according to the html list controller, for the plugin it's set with the playerid parameter &playerid=ID, for a module it's the module ID, in your html code it will jwplayer + ID so jwplayerID

Note : Remove undescore on shortcode of jwplayer

{_jwplayer_}&playlistfile=https://www.joomlarulez.com/images/stories/video/playlist_hd2.xml&playerid=1{_/jwplayer_}

Select an item to play (select list) :

<select style="width:100%;" name="sel1" onchange="jwplayer('jwplayer1').stop();jwplayer('jwplayer1').playlistItem(this.value);">
<option selected="selected" value="0">Select an item</option>
<option value="0">Swinging in L.A.</option>
<option value="1">Alone in New York</option>
<option value="2">Sintel</option>
<option value="3">Shuttle Launch</option>
<option value="4">Big Buck Bunny</option>
</select>

HTML Playlist with list

Here is the jwplayer2 set with the plugin shortcode, note the ID of the player as to be set according to the html list controller, for the plugin it's set with the playerid parameter &playerid=ID, for a module it's the module ID, in your html code it will jwplayer + ID so jwplayerID

Note : Remove undescore on shortcode of jwplayer

{_jwplayer_}&playlistfile=https://www.joomlarulez.com/images/stories/video/playlist_hd2.xml&playerid=2{_/jwplayer_}

Select an item to play (list) :

  • Swinging in L.A.
  • Alone in New York
  • Sintel
  • Shuttle Launch
  • Big Buck Bunny

<ul>
<li><a href="#/"; onclick="jwplayer('jwplayer2').stop();jwplayer('jwplayer2').playlistItem('0');">Swinging in L.A.</a></li>
<li><a href="#/"; onclick="jwplayer('jwplayer2').stop();jwplayer('jwplayer2').playlistItem('1');">Alone in New York</a></li>
<li><a href="#/"; onclick="jwplayer('jwplayer2').stop();jwplayer('jwplayer2').playlistItem('2');">Sintel</a></li>
<li><a href="#/"; onclick="jwplayer('jwplayer2').stop();jwplayer('jwplayer2').playlistItem('3');">Shuttle Launch</a></li>
<li><a href="#/"; onclick="jwplayer('jwplayer2').stop();jwplayer('jwplayer2').playlistItem('4');">Big Buck Bunny</a></li>
</ul>


HTML Playlist with table

Here is the jwplayer3 set with the plugin shortcode, note the ID of the player as to be set according to the html list controller, for the plugin it's set with the playerid parameter &playerid=ID, for a module it's the module ID, in your html code it will jwplayer + ID so jwplayerID

Note : Remove undescore on shortcode of jwplayer

{_jwplayer_}&playlistfile=https://www.joomlarulez.com/images/stories/video/playlist_hd2.xml&playerid=3{_/jwplayer_}

Select an item to play (table) :

Swinging in L.A. Alone in New York. Sintel Shuttle Launch Big Buck Bunny

<table width="100%" border="1" align="center" cellpadding="2" cellspacing="2">
<tr>
<td><a href="#/"; onclick="jwplayer('jwplayer3').stop();jwplayer('jwplayer3').playlistItem('0');"><img src="https://www.joomlarulez.com/images/stories/video/swinging_in_la.jpg" alt="Swinging in L.A." width="120" /></a></td>
<td><a href="#/"; onclick="jwplayer('jwplayer3').stop();jwplayer('jwplayer3').playlistItem('1');"><img src="https://www.joomlarulez.com/images/stories/video/alone_in_ny.jpg" alt="Alone in New York." width="120" /></a></td>
<td><a href="#/"; onclick="jwplayer('jwplayer3').stop();jwplayer('jwplayer3').playlistItem('2');"><img src="https://www.joomlarulez.com/images/stories/video/sintel-gaping.png" alt="Sintel" width="120" /></a></td>
<td><a href="#/"; onclick="jwplayer('jwplayer3').stop();jwplayer('jwplayer3').playlistItem('3');"><img src="https://www.joomlarulez.com/images/stories/video/sts132_launch.jpg" alt="Shuttle Launch" width="120" /></a></td>
<td><a href="#/"; onclick="jwplayer('jwplayer3').stop();jwplayer('jwplayer3').playlistItem('4');"><img src="https://www.joomlarulez.com/images/stories/video/bunny.jpg" alt="Big Buck Bunny" width="120" /></a></td>
</tr>
</table>

Recommandations Playlist

Here is the jwplayer4 set with the plugin shortcode, note there is no ID set here as we use recommandations features

Note : Remove undescore on shortcode of jwplayer

{_jwplayer_}&playlistfile=/images/stories/video/playlist_hd2.xml&width=100%&plugins=related&related.file=https://www.joomlarulez.com/images/stories/playlist/EO5GELda&related.displayMode=shelfWidget{_/jwplayer_}