Configuring Multiple Sources

Often times, it is a good plan to configure multiple sources within JW Player, in case Flash is not supported in a particular scenario. This ensures that users can access media across the highest number of browsers and devices. An example would be using an RTMP or HLS VOD stream and an MP4 file fallback. This configuration will satisfy both desktops that utilize Flash, and mobile devices/browsers that only utilize HTML5 video.

Configuring Sources

Setting fallbacks is accomplished by creating a sources block within your playlist ​section. Here, we can list different sources for the same video file. For example:

var playerInstance = jwplayer("myElement");
playerInstance.setup({
playlist: [{
        sources: [{ 
            file: "rtmp://mySite.com/myFile"
        },{
            file: "//mySite.com/myFile.mp4"
        }]
}],
    primary: "flash"
});

In the above code, we're attempting to load an RTMP stream initially. In the event that Flash is not installed on the device/system, the player is smart enough to render in HTML5 mode and attempt to load the MP4. In fact, this same principle can be applied to other media formats as well.

var playerInstance = jwplayer("myElement");
playerInstance.setup({
playlist: [{
        sources: [{ 
            file: "//mySite.com/myFile.flv"
        },{ 
            file: "//mySite.com/myFile.mp4"
        },{
            file: "//mySite.com/myFile.webm"
        }]
}],
    primary: "flash"
});

Here, the player will attempt to load an FLV file, which requires Flash. If Flash is not detected, we'll head down the list and try our MP4 file in HTML5 mode. If our browser is still not capable of playing an MP4 natively, we'll lastly attempt to play a WebM version.

Configuring sources can also be done within a playlist, as mentioned in our configuration reference page. This will allow you to add fallbacks for each item in a playlist.

Sources and DRM

In order to configure multiple DRM types within a player embed, each DRM type must be specified within a drm object in a source array:

 jwplayer("myElement").setup({
playlist: [{
        sources: [{ 
            file: "//mySite.com/myFile.mpd",
              drm: {
                       widevine: {
                              url: "mywidevineserver.com/drm"
                              }
               }
        }]
}]
});
More information can be found in our DRM article.

Example

Here's an example of our player using an RTMP stream as a primary media file, with an MP4 file as a backup: ​

 

The player should render successfully between mobile devices and browsers with Flash. (Provided that it can play MP4 natively!)

Did you find this article helpful?

Please log in to rate this article.