Browser-aware player code, revisited

I posted a while back about selecting video players based on browsers… It was an ugly javascript hack, and since then LongTail has updated their excellent JWPlayer to support multiple methods. In order to create an embed that worked best for supporting both HTML5 and Flash players, I had to dig through the documentation a little bit, and combine a couple of different sections.

Here’s how to embed JWPlayer 5.7 to try flash first, with multiple bitrates, and then attempt HTML5 if Flash is not supported. This particular scenario is for iOS support.

<script type="text/javascript" src="jwplayer.js"></script>

<div id="container">Loading the player ...</div>

<script type="text/javascript">
        jwplayer("container").setup({
                height: 360,
                width: 480,
                image: "http://server.com/images/thumbnail.jpg",
                skin: "bekle.zip",
                modes: [
                        {
                        type: "flash",
                        src: "player.swf",
                        config: {
                                levels: [
                                        { bitrate: 250, file: "playlist-low", width: 320 },
                                        { bitrate: 500, file: "playlist-high", width: 480 }
                                        ],
                                streamer: "rtmp://streamer.com:1935/live",
                                provider: "rtmp"
                                }
                        },
                        {
                        type: "html5",
                        config: {
                                file: "http://streamer.com/live/ipad.smil/playlist.m3u8"
                                }
                        } ]
                }
        );
</script>

This still doesn’t support RTSP and other HTML5  fallbacks due to limitations in JWPlayer, so if you’re on a BlackBerry, you’ll still need to switch the player. The order that the “type” statements appear in the javascript determines the order in which they’ll be tried. Generally, you’ll want to try Flash first, otherwise browsers that support HTML5 but not Apple’s HTTP Live Streaming (which is pretty much all of them), will default to the HTML5 player, but be unable to get the stream. You can, however, provide multiple video sources with different codecs (for on-demand content) to support the different flavors of browsers, though.

2 Comments On “Browser-aware player code, revisited”

  1. Hi Ian,
    This is great, although I had a few questions.. we specialize in live streaming and does the JW Player + Wowza combination help us with adaptive dynamic streaming? If not.. how can we use multiple bitrates for flash, multiple bitrates for iOS, rtsp for BB/droid on the same player/page?
    We have some issues with our wowza on ec2 setup as well… how can u help us?

    rgds

    Reply

    • You can either configure it client-side with the JW Player levels directive, or you can do it server-side on Wowza (3.0.4 and later) with jwplayer.rss portion of the medialist HTTPProvider. 

      Reply

Leave a Reply

Your email address will not be published.