Skip to main content

Single page websites

Newer version available

This page is about an older version of web player. We have a newer version of our web player. The new player is a simpler iframe and does not need anything different for SPA's. Check how to connect API to the new player version.

Applicable to Angular, React, Vue etc.

Step 1: setup the global script​

Single page websites have the advantage of loading most scripts and other assets only once. Navigating the pages do not reload any new assets.

Add the VdoCipher script in your index.html file.

<script src="https://player.vdocipher.com/playerAssets/1.6.10/vdo.js"></script>

Step 2: use the VdoPlayer class in your component​

The component could be an React componentDidMount() or a Angular 1 controller or Angular 2 ngAfterViewInit(). At this point, you will have access to the window.VdoPlayer class. A new instance of this class need to be created to hold the video player.

var video = new VdoPlayer({
  otp: 'REPLACE WITH OTP',
  playbackInfo: 'REPLACE WITH PLAYBACKINFO',
  theme: '9ae8bbe8dd964ddc9bdb932cca1cb59a',
  // the container can be any DOM element on website
  container: document.querySelector('#embedBox'),
});

// you can directly call any methods of VdoPlayer class from here. e.g:
// video.addEventListener(`load`, () => {
//   video.play(); // this will auto-start the video
//   console.log('loaded');
// });

Getting reference to the video player​

The global window.vdo object will no longer keep track of the created video player instances. The instance returned by the VdoPlayer constructor will have to maintained in your script in order to refer to the video player. If the container DOM element is cleared and the reference to player is lost, all associated data will be cleared by the garbage collector.

FAQ: What is wrong with previous full embed code?​

The full embed code is supposed to be contained in itself. It consists of four parts:

  1. create a container for video
  2. load the init script
  3. Setting up global vdo object to hold loaded videos.
  4. Initialize with video information.

It tries to do all this asynchronously such that loading other website assets should not be affected. There is a global callback which can be used to listen to script load events. You need a window.onVdoCipherApiReady method which will be called on init. In a single-page website, the individual component is loaded async. It is not recommended to create and listen for global callback methods or to create global object. Therefore, we recommend to use the above alternative method to add video player.