mi player API auf SDK migrieren

Einführung

Dieser Leitfaden soll Entwicklern dabei helfen, ihre bestehenden Videoeinbettungsimplementierungen zu aktualisieren, um die erweiterten Funktionen und Sicherheitsmerkmale des neuen SDK zu nutzen.

In diesem Leitfaden finden Sie:

Überblick über die Einbettungsmethoden: Ein Vergleich zwischen den alten HTML5-Player-Einbettungsmethoden und dem neuen Ansatz mit dem Player-SDK.
Schritt-für-Schritt-Migrationsanweisungen: Detaillierte Beispiele, die zeigen, wie Sie Ihre aktuellen iFrame-Code- und HTML-Code-Einbettungen in das neue SDK-Format konvertieren können.
Code-Beispiele: Praktische Codeschnipsel zur Veranschaulichung des Migrationsprozesses, damit Sie Ihre aktuellen Implementierungen leichter anpassen können.

Einbettungs-Methoden

Der HTML5-Player unterstützt zwei Methoden zum Einbetten des Players auf Ihrer Seite:

iFrame Code: Der Player wird innerhalb eines <iframe>-Elements gerendert, wobei keine Interaktion möglich ist.
HTML Code: Ein <div>- und ein <script>-Element werden verwendet, um den Player direkt auf Ihrer Seite zu erstellen und die Interaktion über die Player-API zu ermöglichen.

Der neue Player unterstützt nur das Einbetten von iFrame-Code, aber das neue Player-SDK ermöglicht Entwicklern die Interaktion mit dem Player über den eingebetteten <iframe>.

iFrame-Code-Einbettungen migrieren

Wenn Sie iFrame-Code-Einbettungen verwenden und das neue SDK zur Interaktion mit dem Player nutzen möchten, erfahren Sie hier, wie Sie das SDK mit dem Player verbinden:

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

Die aktuell unterstützten Methoden (und andere technische Dokumentation) finden Sie unter @movingimage-evp/player-sdk

HTML Code Einbettungen migrieren

Wenn Sie HTML-Code-Einbettungen mit der HTML5-Player-API verwenden, müssen Sie Ihren Code anpassen, um den neuen Player und das SDK zu verwenden. Hier ein Beispiel dafür, wie Sie die HTML5-Player-API laden und die Wiedergabe anfordern würden (aus der Callbackfunktion beim Laden)

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

Mit dem neuen Player und SDK sieht der gleiche Code wie folgt aus

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

Dieser neue Ansatz gewährleistet eine schlankere, effizientere und sicherere Integration mit dem neuen Player.