JS Embedding
Embed your Experiences with JavaScript to have full control of the interaction between the video player and the surrounding page.

Video Embedding with JavaScript Support

Think of an interactive video capable of modifying the page where it is inserted. Let's give you a couple of examples: imagine that your interactive video was able to change the page opacity or even that the actions taken in the page could alter the video's behavior. Wouldn't it be awesome? Well, we're happy to tell you that all of this is possible.

Using JavaScript embedding allows your interactive video to communicate with its container page. With it you can establish a dialog between your videos and the website that will allow you to create more engaging interactive Experiences! Here we will show you how to use JavaScript Embedding to make the most of this API communication.

Loading the Script

To begin with, the code below simply loads the external JavaScript file that is required in order to use the video player with JavaScript support.

Creating a Player Instance

When the external JavaScript file has finished loading, it calls a function named onZentrickPlayerAPIReady. So we should make sure this function is declared before we start loading the script file:

Within this onZentrickPlayerAPIReady function, we are creating a new player instance. As you can see below, this function has a few options that you can configure:

Working Example

You can use the option parameter to force the player to run HTML5 only, so no Flash. This can be done by putting the html5 flag to 1.

Listening for Events

Once you have a reference to the player object you created, you can start listening to events or post messages. Currently there are three events you can subscribe to: log, error and message. The last one allows you to communicate between your apps inside your player and the page that embeds the player.

That's it! Embed your Experiences with JavaScript and take the interactivity of your videos to a whole new level. Start mastering your online interactive videos now.

Example

In this example a Zentrick app communicates with the web page from within a video. It sends messages to the page which can be read in the browser console.

Zentrick App

This code goes into the JavaScript tab of your Zentrick app.

Web Page

This code goes into your HTML page.

Oops! Your screen is too small for this website.