Switching Live Streams

January 10, 2012 Web 2.0 CSS, javascript

Continuing on the rack theme mentioned yesterday, I got to wondering about a stream monitor that could be switched to any of a number of live streams, without reloading the page. Fortunately, JW Player makes this easy. I threw together a player embedded inside some CSS and then added a button panel. Each button is a DIV with an onclick() action that calls jwplayer().load(). While it’s well known that you can use this to switch files simply by passing the filename to the file flashvar, we need to also pass the streamer value. Fortunately, the load() method has the ability to pass on not only files as a string value, but also objects, which are nothing more than an array of flashvars (it can also take playlist items, but that’s beyond the scope of this post). So, all you need to do in order to switch streams with JW Player is call the following JavaScript method:

jwplayer().load({file: 'streamname', streamer: 'rtmp://w.streampunk.tv/live'})

The result I got was this:Clicking on each of the buttons in the bar below the screen will switch the stream. A live example can be found here. If you want to see what else the JWPlayer API can do, head on over to the API docs. FlowPlayer appears to have something similar in the clip.update() method (flowplayer API documentation), but I haven’t tested it.

Page code:

```html

JW Player Switching

body { background-color: #fff; padding: 0 20px; color:#000; font: 13px/18px Arial, sans-serif; }
a { color: #360; }
h3 { padding-top: 20px; }
ol { margin:5px 0 15px 16px; padding:0; list-style-type:square; }

Player...

jwplayer("mediaplayer").setup({
flashplayer: "/jwplayer/player.swf",
height: "275",
width: "455",
file: "commons.stream",
streamer: "rtmp://w.streampunk.tv/live",
autostart: true,
controlbar: 'none',
mute: true
});

RezOnline

Commons

StreamClass

AirCam

```