Player API
Get started
Use our Player API to control the player using JavaScript
1. Add it
Since your page and our embed code are on different domains, you need to add some additional JavaScript to use it:
<script src="https://player.vidbeo.com/sdk/api.js"></script>
2. Initialise it
Either pass the HTML element ID as the first parameter:
<div id="your_element_id"></div>
<script>
let player = new Vidbeo.Player("your_element_id", {
id: "your_video_id",
width: 1280,
height: 720
});
</script>
</body>
Or you could do the same with an event listener:
<div id="your_element_id"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
let player = new Vidbeo.Player("your_element_id", {
id: "your_video_id",
width: 1280,
height: 720
});
}
</script>
Or you might like to use the Player API to control an existing player. In which case you need to pass a reference to that HTML element as the first parameter. For example:
<iframe src="..." allowfullscreen></iframe>
<script>
let iframe = document.querySelector("iframe");
let player = new Vidbeo.Player(iframe);
</script>
There are a variety of options available. The examples above were deliberately kept simple.
3. Try it
Check the player is ready. That 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 should see the message appear in your browser’s console (usually shown by pressing the F12 key or by opening Developer Tools).