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

Pregunta

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"
    }]);

});
¿Fue útil?

Solución

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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top