Inhalt x
    mi player API auf SDK migrieren
    • 12 May 2025
    • Drucken
    Inhalt

    mi player API auf SDK migrieren

    • Aktualisiert am 12 May 2025
    • Drucken
    Artikel-Zusammenfassung


    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:

    JavaScript

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

    JavaScript

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

    JavaScript

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

    War dieser Artikel hilfreich?
    What's Next