Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Before you start using the JavaScript API, there are a couple of things to make sure you are familiar with first:consult the following article for prerequisites. It also covers concepts that will help you understand its use.

Anchor
prereq
prereq

Panel
borderColor#f2f2f2
bgColor#f2f2f2

Prerequisites

In order for the JavaScript API to function, it is important to make sure ensure the following details are have been set up in advance:

VideoManager Pro:

  • Check your lazy loading setting (listed under the Player's "Additional Settings") - if lazy loading is enabled, the Player (including the API) will not load until a user clicks play

VideoManager 6:

  • The products "HD2" and "Player Version 5" must be enabled for your VideoManager
  • The following options for the Player used for publishing must be set in the Player Generator:
  • set the Player version to "Video Player Pro"
  • the option "HTML5-player first" must be activated in the settings view

Anchor
embed-codes
embed-codes

Panel
borderColor#f2f2f2
bgColor#f2f2f2

Embed Codes

Finding video embed codes in your VideoManager is an important first step in preparing to use the JavaScript API.

<div mi24-video-player video-id="1037756" player-id="49942" config-type="vm" flash-path="//e.video-cdn.net/v2/" api-url="//api.edge-cdn.net/rest/latest"></div> <script src="//e

.

video-cdn.net/v2/embed.js" type="text/javascript"></script>

VideoManager Pro

In the front end of VideoManager Pro, embed codes are found in a video's Publish view:

Use the "HTML-CODE" (the other embed types cannot be used with this API) - an example code is shown below:

Code Block
languagetext
<div mi24-video-player video-id="4Zo1QNH5FKxQDLsgKBpvD8" 
player-id="2X32X_p31xVFCpkY7KoDhj" config-type="vmpro" 
flash-path="//e.video-cdn.net/v2/" api-url="//d.video-cdn.net/play">
</div><script src="//e.video-cdn.net/v2/embed.js"></script>

You can also get a video's embed code using the "embed-codes" endpoint of the movingimage REST API.

VideoManager 6

In VideoManager 6, you will find the embed code via the function "Publish videos":

Image Removed

Use the "Javascript code" (the other embed types cannot be used with this API) - an example code is shown below:

Code Block
languagetext

Each embed code includes the JavaScript source; this is the "embed.js" file, which is needed to make the embed code work.

However, it only needs to be added to the page once, regardless of how many players will be added to the page.

The embed code also includes a div <div> that contains our "mi24-video-player" tag and the following attributes:

AttributeExample ValueDescription
video-id"4Zo1QNH5FKxQDLsgKBpvD8"a unique string identifying the video that will be embedded (the value listed here is just an example)
player-id"2X32X_p31xVFCpkY7KoDhj"a unique string identifying the Player that the embedded video will use (the value listed here is just an example)
config-type"vmpro"indicates the VideoManager type the embed code is for ("vmpro" or "vm")
flash-path"//e.video-cdn.net/v2/"the flash path of the Player (this is used to supply a backup Flash player in the event that the HTML5 player does not load)
api-url"//d.video-cdn.net/play"the URL of the API

To use the JavaScript API, you will need to make use of this embed code in one of two ways:

  1. you will either need to add an "id" attribute to the embed code so that you can reference it in JavaScript (as in the Adding or Removing a Player tutorial), or 
  2. you will use these attributes to create a JavaScript object that you can use to add a Player (as in the Onload Callback Function tutorial).
Tip

We highly recommend the second option, which auto-loads the Player as soon as it is available. The first option should only be used when you wish to add the Player manually.

Anchor
ids
ids

Panel
borderColor#f2f2f2
bgColor#f2f2f2

Video and Player IDs

The video and player IDs are required embed code attributes, so it's important to know what they are. All of the videos and Players from a VideoManager have their own unique IDs. The embed code for every video will include a "video-id" and a "player-id". In the tutorial examples that follow this chapter, you will need to insert your own video-id and player-id whenever they are used.

Video ID - A unique string used to identify and differentiate each video. The embed code for one video will always have a different video-id than the embed code for another video. This ID is also listed in the metadata accordion menu of the video in VideoManager Pro. You can also query a list of videos along with their IDs by using the "videos" endpoint in the movingimage REST API.

Player ID - A unique string used to identify and differentiate each Player. Different Players are created in the Player Generator area of VideoManager Pro. Several Player customizations can be made there, including color scheme, responsive settings, etc. The Player ID can be found in the metadata accordion menu of the Player. It will also appear in the embed code of a released video's publish accordion menu. There you can select a Player to get an embed code with the corresponding Player ID. Since many videos can be set up to use the same Player, the embed codes for two different videos can have the same player-id.