Joomla RuleZ

FAQ

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

You must have the Adobe Flash Player installed to view this player.

Here is the jwplayer1 set with the plugin shortcode, note the 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=http://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>
 

You must have the Adobe Flash Player installed to view this player.

Here is the jwplayer2 set with the plugin shortcode, note the 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=http://www.joomlarulez.com/images/stories/video/playlist_hd2.xml&playerid=2{_/jwplayer_}
 

Select an item to play (list) :

 
<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>
 

You must have the Adobe Flash Player installed to view this player.

Here is the jwplayer3 set with the plugin shortcode, note the 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=http://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="http://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="http://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="http://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="http://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="http://www.joomlarulez.com/images/stories/video/bunny.jpg" alt="Big Buck Bunny" width="120" /></a></td>
  </tr>
</table>
You are here: Home Support FAQ Faq HTML playlist