- Details
- Category: Faq
-
By Administrator - Parent Category: FAQs
- Hits: 38171
HTML playlist
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
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>
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) :
<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>
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) :
 |
 |
 |
 |
 |
<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>
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_}
Download
