Get started with the Player API

Get started with the Player API

If you would like to control a player embedded on your site using JavaScript you can use our Player API. Since your page and our embed code are on different domains, you need some additional JavaScript to use it.

  1. Include our Player API on your page:
<script type="text/javascript" src="https://player.vidbeo.com/sdk/api.js"></script>
  1. Next you need to initialise it. That can either be done at the end of your page before the closing </body> tag, like this:
<script>
// (initialise the API here)
</script>
</body>

... or wrapped in an event listener and put anywhere on your page, like this:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
// (initialise the API here)
}
</script>
  1. How the API is initialised depends on whether you have already embedded a video on your page or whether you want to add one to it.

a) If you already have one of our iframes on your page, you need to pass a reference to that iframe Element to the Player(). You could do that like this:

var iframe = document.querySelector('iframe');
var player = new Vidbeo.Player(iframe);

b) If you don't already have an iframe on your page, our player API can build one for you. At a minimum you need to tell it where to put that video on the page and which video to embed. Let's assume you have this empty div element on your page:

<div id="example"></div>

Pass its id as the first parameter to Player().

And we need to say which video to embed in it. So in the second parameter provide the video's id (many other options are available):

var player = new Vidbeo.Player('example', {
id: 'longvideoid',
width: 640,
height: 360
});

Either way you should now have a player variable ready to control.

  1. (optional) You can check the player is ready. It returns a Promise. For example:
player.ready().then(function(data) {
console.log('Player is ready');
}).catch(function(error) {
console.error('Player is not ready', error);
});

You can find out all the available methods and events you can listen out for on the actions page.