Developers

Setup

There are just two things you'll need to include on your page to get started. The Vimeo OTT Player Embed (with the API enabled) and a reference to Vimeo OTT Player API JS in your document.

<!-- Vimeo OTT Player Embed -->
<!-- To enable the API, add api=1 to the URL of the iframe -->
<iframe id="video" src="https://embed.vhx.tv/videos/15?api=1" width="850" height="480" frameborder="0"  allow="autoplay; encrypted-media; fullscreen; picture-in-picture" allowfullscreen></iframe>

<!-- Vimeo OTT Player JS -->
<script src="https://cdn.vhx.tv/assets/player.js"></script>

Next, you simply initiate an instance of the Player API by referencing the iframe element's ID. All events and methods can be called on the returned player object.

var player = new VHX.Player('video');

// methods
player.play();
player.pause();

// events
player.on('play', function(event, data) {
  // the video has started playing
});

player.on('ended', function(event, data) {
  // the video has reached the end of playback
});

And that's it! There is no need to listen to or wait for a player ready event, as this is all handled and queued internally by Vimeo OTT Player JS.

Methods

All methods can be called directly on the player object.

var player = new VHX.Player('video');

// where methodName is any of the methods listed in the table below
player.methodName();

Events

You can listen for events by using the on method of the player object.

var player = new VHX.Player('video');

// where event_name is any of the events listed in the table below
player.on('event_name', function(event, data) {
 // do something
});