RSS Playlist Embed

JW Player supports playback of multiple media formats: video files, audio files, YouTube videos, RSS playlists and adaptive streams. This article explains how to embed a basic RSS feed. Here is an example, containing 5 videos:

 

 

 

Although many playlist formats are available (e.g. ASX, ATOM, M3U, XSPF), JW Player only supports RSS. JW Player can play basic RSS feeds (using the <enclosure> tag), as well as RSS feeds using the MediaRSS or JW Player extensions. Services that produce compatible RSS feeds include YouTube, iTunes and Blip.tv.

Step 1: Add the library to your <head>

In order to embed media with JW Player, you first have to add the player library to the head of your HTML page (or elsewhere above the actual embed). The player library can be found in your JW Player account and looks like this:

<script src="http://jwpsrv.com/library/YOUR_JW_PLAYER_ACCOUNT_TOKEN.js" ></script>

The JW Player library is Cloud-Hosted by us, making it fast & reliable, secure and always up-to-date with the latest mobile devices and web standards. If you want to host the player library yourself (e.g. if you have an intranet), you should download the Self-Hosted version of JW Player from the account. There's no functional difference between the two.

Don't forget to change the domain to https://ssl.jwpsrv.com if you require secure hosting of the player library.

Step 2: Create the playlist RSS Feed

With the player library set up, it's time to move on to the playlist. JW Player loads external playlists using the RSS feed format. It is a basic XML format supported by many web services. You can also host these files on your own server. Here is a short example (with just one video to keep things short):

<rss version="2.0" xmlns:jwplayer="http://rss.jwpcdn.com/">
<channel>

  <item>
    <title>Sintel Trailer</title>
    <description>Sintel is a fantasy CGI from the Blender Open Movie Project.</description>
    <jwplayer:image>/assets/sintel.jpg</jwplayer:image>
    <jwplayer:source file="/assets/sintel.mp4" />
  </item>

</channel>
</rss>

This RSS feed is using the JWPlayer extension to load media file and poster image. JW Player also supports feeds that use the Media extension, or vanilla feeds using enclosures. See the Media Formats Reference for more information.

Note that RSS feeds are subject to cross-domain security restrictions and therefore won't automatically load from another domain than the player. You need to setup CORS headers to fix this issue. See Crossdomain File Loading for more info.

Step 3: Add the embed code to your <body>

With the RSS feed ready to go, it's time to actually embed it. Therefore, insert this HTML in your page, at the exact location you want the player to appear:

<div id="myElement"></div>

<script>
    jwplayer("myElement").setup({
        playlist: "http://example.com/uploads/myPlaylist.rss",
        width: 640,
        height: 360
    });
</script>

In this code, the <div> element is used as a container to load JW Player into. It must have a unique id attribute. The setup() block defines which playlist to load, as well as the width and height of the player in pixels.

Two common mistakes prevent smooth playback of videos in Internet Explorer 9+. First, always start your HTML document with <!DOCTYPE html> to prevent triggering IE's quirks mode. Second, serve up your videos with the video/mp4 mimetype or IE will refuse to play them.

Next Steps

With this basic embed live, you can look into adding customizations like a visual playlist sidebar, different player skin or responsive design. See the Customization section for more information.

If things are not yet working out, see our troubleshooting guide for a list of common embedding issues.

Please sign in to leave your feedback for this article.

Still don't have JW Player? Get It Here