The standard IBM Cloud Video embed offers an easy and fast way to put the IBM Cloud Video 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 Cloud Video 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 Cloud Video player:
|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 Cloud Video 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,
|Available values: low, med, high. Playback starts with the highest, medium or lowest available quality/resolution|
- 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)
Builing a custom player
- Embed the player with the URL parameter controls=false.
<iframe src="http://www.ustream.tv/embed/1524?v=3&wmode=direct&autoplay=true&controls=false" style="border: 0px none transparent;" width="480" height="302" frameborder="0"></iframe>
- Design your controls for the player.