Custom Adapters

Creating custom video player adapters

Player Layer uses adapters to connect itself to your video player. The default adapter relies on compatibility with W3C DOM standards as detailed in the Custom Adapter References. For example, video.js and Brightcove players adhere to these standards.

Where your player varies, it will require a custom adapter.

If you want we can create a custom adapter for your specific player so you don't have to. Please speak to your relationship manager to discuss creating a custom adapter.

An example of what a custom adapter should look like:

const AbstractAdapter = function (player, playerLayer) {

  // Constructor
  // 
  // Implement all necessary wiring here

  // notifies Player Layer that player is ready
  // by this time metadata should be preloaded including "name" and "duration"
  playerLayer.playerReady()

  // resume/start player layer playback
  playerLayer.play()

  // pause player layer playback
  playerLayer.pause()

  // notifies player layer that vide playback ended
  playerLayer.ended()

  // notifies player layer that advert playback started
  playerLayer.advStarted()

  // notifies player layer that advert playback ended
  playerLayer.advEnded()

  return {
    // resume/start video playback
    play()

    // pause video playback
    pause()
    
    // get current timecode
    getTimeCode()

    // getMediaInfo()
    // currently we require `name` and `duration` to be returned
    // {name: 'Video title', duration: 120}
    getMediaInfo()

    // destructor
    // it is highly recommended to implement destructor 
    // to tear down all hooks
    destroy() 

  };
}

An example of a custom adapter made for the YouTube video player:

<div id="player-container"></div>

// instantiate YouTube player
// parameters omitted as they can vary from implementation
const player = new YT.Player('player-container', {...});

const CustomYoutubeAdapter = (player, playerLayer) => {

  // wiring up vide player's events
  player.addEventListener('onStateChange', (state) => {
    switch(state) {
      case YT.PlayerState.PLAYING:
        return playerLayer.play();
      case YT.PlayerState.PAUSED:
        return playerLayer.pause();
    }
  });

  // and so on...

  return {
    play: () => player.playVideo(),

    // pause video playback
    pause: () => player.pauseVideo(),
    
    // get current timecode
    getTimeCode: () => player.getCurrentTime(),

    // getMediaInfo()
    // currently we require `name` and `duration` to be returned
    // { name: 'Video title', duration: 120 }
    getMediaInfo: () => ({
      name: 'Video title',
      duration: player.getDuration()
    }),

    // destructor
    destroy: () => {
      // unsubscribe form previously wired up events
      player.removeEventListener('onStateChange');
    }
  }
};

const pl = new PlayerLayer({
  clientKey: "my-client-key",
  playerAdapter: CustomYoutubeAdapter,
  playerContainer: document.getElementById("player-container"),
  playerInstance: player
});