Single page websites
Applicable to Angular, React, Vue etc.
#
Step 1: setup the global scriptSingle 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>
VdoPlayer
class in your component#
Step 2: use the 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: btoa( JSON.stringify({ videoId: "REPLACE WITH VIDEO ID", }) ), 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 playerThe 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:
- create a container for video
- load the init script
- Setting up global
vdo
object to hold loaded videos. - 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.