Contents x
    Home
    • 05 Apr 2024
    • Print
    Contents

    Home

    • Updated on 05 Apr 2024
    • Print
    Article summary

    About

    The movingimage Player has a JavaScript API that lets you control the player, track usage, and collect analytics.

    With the JavaScript API, you can:

    • Add, remove, or connect to a player using the VideoPlayerCollection

    • Control basic player functions, such as play, pause, and stop

    • Register functions to player events to collect usage statistics or add interactive functionality

    Note: If lazy loading is enabled, the Player will not be accessible through the API until a user clicks play. This is because lazy loading prevents the Player from loading until needed.

    Getting Started with the JavaScript API

    Prerequisites

    • 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.

    • Embed codes: Find the video embed code in your VideoManager Pro account in the Publish view. It will look like this:

      <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>

    Alternatively, you can use the embed-codes endpoint of the of the movingimage REST API.

    Embed Codes

    Each embed code includes the JavaScript source, which is needed to make the embed code work. However, it only needs to be added to the page once, regardless of how many videos are embedded.

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

    • video-id: A unique string identifying the video that will be embedded.

    • player-id: A unique string identifying the Player that the embedded video will use.

    • config-type: Indicates the VideoManager type the embed code is for.

    • flash-path: The flash path of the Player.

    • api-url: The URL of the API.

    To use the JavaScript API:

    1. Add the embed code to your page.

    2. Use the video and player IDs to reference the Player in JavaScript.

    Tips:

    • Use the second option for adding the Player, which auto-loads the Player as soon as it is available.

    • Find the video and player IDs in the metadata accordion menu of the video or Player in VideoManager Pro.

    Video and Player IDs

    The video and player IDs are required embed code attributes. 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.

    Embed code

    Description

    video-id

    A unique string used to identify and differentiate each video.

    player-id

    A unique string used to identify and differentiate each Player.

    Tips:

    • We highly recommend using the second option for adding the Player, 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.

    • You can find the video and player IDs in the metadata accordion menu of the video or Player in VideoManager Pro.

    Was this article helpful?
    What's Next