Contents x
    Migrating from HTML5 Player API to the new SDK
    • 08 Oct 2024
    • Print
    Contents

    Migrating from HTML5 Player API to the new SDK

    • Updated on 08 Oct 2024
    • Print
    Article summary

    Introduction

    This guide is designed to help developers update their existing video embedding implementations to leverage the enhanced capabilities and security features of the new SDK.

    In this guide, you will find:

    • Overview of Embedding Methods: A comparison between the old HTML5 player embedding methods and the new approach with the Player SDK.

    • Step-by-Step Migration Instructions: Detailed examples showing how to convert your current iFrame Code and HTML Code embeddings to the new SDK format.

    • Code Examples: Practical code snippets to illustrate the migration process, making it easier to adapt your current implementations.

    Embedding methods

    The HTML5 player supported two methods of embedding the player on your page:

    • iFrame Code: The player is rendered inside an <iframe> element, with no interaction allowed.

    • HTML Code: A <div> and <script> element are used to create the player directly on your page, allowing interaction through the Player API.

    The new player only supports iFrame Code embedding, but the new Player SDK allows developers to interact with the player through the embedded <iframe>.

    Migrating i-frame Code Embeddings

    If you are using iFrame Code embeddings and want to use the new SDK to interact with the player, here's how to connect the SDK to the player:

    <!doctype html>
<html>
  <head></head>
  <body>
    <iframe
      id="player-iframe"
      src="//e.video-cdn.net/video?video-id=<VideoID>&player-id=<PlayerID>&channel-id=<ChannelID>"
      width="640"
      height="360"
      allowfullscreen
      frameborder="0">
    </iframe>
    <script type="module">
      import { Player } from 'https://e.video-cdn.net/mi-player-sdk/mi-player-sdk.js';
      // Connect the SDK to the player iframe (using the iframe id)
      const player = new Player('player-iframe');
      // Now you can interact with the player.
      // For example, request the player to play:
      player.play().then(() => 'Play successful');
    </script>
  </body>
</html>

    To see the current supported methods (and other Technical Documentation), you can refer to @movingimage-evp/player-sdk

    Migrating HTML code embeddings

    If you are using HTML Code embeddings with the HTML5 Player API, you'll need to adjust your code to use the new Player and SDK. Here’s an example of how you would load the HTML5 Player API and request it to play (taken from On-load call back function)

    Old HTML Player API

    <!doctype html>
<html>
  <head></head>
  <body>
    <div id="player_container"></div>
    <script type="text/javascript">
      // Create a new player instance (vmpro)
      function createPlayer() {
        var initPlayer = {
          success: function (playerApi) {
            playerApi.play();
          },
          parameters: {
            configType: 'vmpro',
            playerId: '<PlayerID>',
            videoId: '<VideoID>',
            apiUrl: '//d.video-cdn.net/play',
            flashPath: '//e.video-cdn.net/v2/',
            token: "***"
          }
        };
        VideoPlayer.Collection.addPlayerById('player_container', initPlayer);
      }
      // Add the player
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = '//e.video-cdn.net/v2/embed.js';
      head.appendChild(script);
      script.onload = (function () {
        createPlayer();
      });
    </script>
  </body>
</html>

    Using the new player and SDK, the same code looks like this 

    <!doctype html>
<html>
  <head></head>
  <body>
    <div id="player-container"></div>
    <script type="module">
      import { Player } from 'https://e.video-cdn.net/mi-player-sdk/mi-player-sdk.js';
      // Create the player iframe and connect to it
      const player = new Player('player-container', {
        videoId: '<VideoID>',
        playerId: '<PlayerID>',
        channelId: '<ChannelID>'
      });
      // Play the video
      player.play();
    </script>
  </body>
</html>

    This new approach ensures a more streamlined, efficient, and secure integration with the new player.

    Was this article helpful?
    What's Next