Using URL Parameters and Embed API for Custom Players

The standard IBM Video Streaming embed offers an easy and fast way to put the IBM Video Streaming player on your own site with no coding needed, except for a simple copy and paste. For information on standard embedding, please see How to embed a stream or video on your site This article covers advanced embedding functions and customizing the player.

Using URL Parameters with the IBM Video Streaming player

You can override the default behavior of the embedded player by using URL parameters.

For example, embedding the player with autoplay=true will make the player start automatically when it is loaded on the page. Or embedding the player with volume=0 will mean the player will always start with the volume completely off.

Here is the regular embed code:

<iframe src="http://www.ustream.tv/embed/1524?html5ui=1" style="border: 0 none transparent;"  webkitallowfullscreen allowfullscreen frameborder="no" width="480" height="302"></iframe>

and here is the embed code with the autoplay parameter added

<iframe src="http://www.ustream.tv/embed/1524?html5ui=1&autoplay=true" style="border: 0 none transparent;"  webkitallowfullscreen allowfullscreen frameborder="no" width="480" height="302"></iframe>

You can use multiple URL parameters in a row, by adding a & character between each one, for example:

<iframe src="http://www.ustream.tv/embed/1524?html5ui=1&volume=0&autoplay=true" style="border: 0 none transparent;"  webkitallowfullscreen allowfullscreen frameborder="no" width="480" height="302"></iframe>

Users who wish to modify their existing html code to reflect our new player may do so with these parameters:

• Change the size of the player by subtracting 32px from its height, add and parameters and parameter from the embed source URL if exist.
• Revert back to the previous player: Remove the html5ui parameter

The following URL parameters are available for the IBM Video Streaming player:

Using Javascript Embed Player API to control the IBM Video Streaming player

The IBM Video Streaming Javascript Embed Player API allows you to control the action of the player embedded in your webpage and also listen for events happening in the player to control other elements of your webpage. This could be used for any of the following applications:

• Changing the player dynamically to switch between live streams or recorded video content
• Changing the state of the player based on other actions the user takes on your webpage (or inside a mobile experience) for example, you could automatically pause or mute a live stream when the user interacts with other media on your page.
• Listening to events inside the player such as when a recorded video reaches its conclusion so that you could change the page state dynamically based on the video content.
• Polling a current player status, such as the concurrent viewer count, to display this elsewhere on the page, or program actions to occur based on it.
• Developing your own custom interface and look for the player to replace the default player controls (chrome)

For documentation on the IBM Video Streaming Javascript Embed Player API, please visit https://github.com/ustream/embedapi

Building a custom player

• Embed the player with the URL parameter controls=false.

<iframe src="http://www.ustream.tv/embed/1524?v=3&amp;wmode=direct&amp;autoplay=true&controls=false" style="border: 0px none transparent;" width="480" height="302" frameborder="0"></iframe>

• Design your controls for the player.
• Use the IBM Video Streaming Javascript Embed Player API to link your controls to the correct actions to control the player.