You can embed a player with a coub video into your web page as an inline frame and control it via the JavaScript API.
To insert a video into an iframe you need a link to the video with the embed
path in the URL (like this one: http://coub.com/embed/um0um0). You can get this code via oEmbed API.
You can write an iframe code yourself or just click on the "Embed" button on the Coub web page with the video. This will generate a complete HTML code of an iframe with the source link and predefined settings.
There are several settings that can be used with the iframe player. These settings should be added as query parameters to the src
attribute of the iframe.
All the settings accept only one boolean value (can be either true or false):
Here is an example of the code that embeds a player to a page and sets an id to it:
<iframe id="coubVideo" src="http://coub.com/embed/um0um0?muted=false&autostart=false&originalSize=false&hideTopBar=false&startWithHD=false" allowfullscreen="true" frameborder="0" width="450" height="360"></iframe>
You can manipulate an embedded player via postMessage
function. Below is the list of commands that the player supports:
The following code shows how to send a command to a player:
var myCoub = document.getElementById('coubVideo').contentWindow;
myCoub.postMessage('play', '*');
An embedded player can send status messages to the parent window. The parent listens for following dispatched messages:
The following code handles playStarted
message:
var messageHandler = function(e) {
if (e.data == 'playStarted'){
console.log('Video starts playing');
}
}
myCoub.addEventListener('message', messageHandler);