change the related videos dynamically whenever the next item of the playlist is loaded in jwplayer 6.8

StackOverflow https://stackoverflow.com/questions/22122809

  •  18-10-2022
  •  | 
  •  

Question

Is there a way to change the related videos dynamically whenever the next item of the playlist is loaded? A little bit like you can handle the playlists themselves.

I would like to do something like this:

player.onPlaylistItem(function(e) {

    player.load([{related: {
        file: "/assets/related.xml"
    }]);

});
Was it helpful?

Solution

This cane be done using media IDs.

http://www.longtailvideo.com/support/jw-player/28858/displaying-related-videos

Media ID Replacement

The Media ID Replacement feature allows JW Player to dynamically construct URLs to related videos RSS feeds. This is required in two situations:

    If you have a playlist with multiple videos and want to display related videos for each item.
    If you set the onclick option to play and want to display related videos of related videos.

Here is an example embed using a simple playlist with 2 items:

  jwplayer("container").setup({
    playlist: [{ 
       file: "/videos/12345.mp4",
       mediaid: "12345"
    },{
       file: "/videos/67890.mp4",
       mediaid: "67890"
    }],
    related: {
      file: "/related/MEDIAID.xml"
   }
 });

For the first item in the playlist, JW Player will request the RSS feed /related/12345.xml. For the second item, JW Player will request the feed /related/67890.xml.

If the items in these RSS feeds also contain a mediaid (using the guid element), JW Player is able to in turn construct a related videos URL and display related videos of these related videos:

<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <item>
      <title>Big Buck Bunny</title>
      <guid isPermalink="false">28839</guid>
      <media:thumbnail url="http://example.com/thumbs/28839.jpg"/>
      <media:content url="http://example.com/videos/28839.mp4" type="video/mp4" />
    </item>

    <item>
      <title>Elephant's Dream</title>
      <guid isPermalink="false">8791</guid>
      <media:thumbnail url="http://example.com/thumbs/8791.jpg"/>
      <media:content url="http://example.com/videos/8791.mp4" type="video/mp4" />
    </item>
  </channel>
</rss>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top