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:

Parameter Description Default Value Notes
autoplay start video playback automatically as soon as the iframe loads false html5 autoplay not supported on iOS
html5ui enables the new player UI 1
controls display player chrome aka "bottom bar" or "control bar" true false hides every control UI, thus viewer control is only available via the IBM Video Streaming Embed API
volume initial starting volume for the player upon load 0 Available values: any percent between 0-100
showtitle By default the channel or video title is shown on the bottom left corner of the player. With this parameter you can hide it. true  
wmode Flash wmode parameter override. opaque available values: direct, opaque, transparent, window. Parameter does not apply for HTML5 player.
forced-quality Sets default stream playback quality. low,
med,
high
Available values: low, med, high. Playback starts with the highest, medium or lowest available quality/resolution

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.
Powered by Zendesk