Share via

Schreiben von Plug-Ins für Azure Media Player

  • Artikel

Ein Plug-In besteht aus JavaScript-Code, der zur Erweiterung oder Verbesserung des Players geschrieben wurde. Sie können Plug-Ins schreiben, um Aussehen und Funktionalität von Azure Media Player zu ändern oder ihn sogar mit Schnittstellen zu anderen Diensten auszustatten. Dies können Sie in zwei einfachen Schritten erreichen:

Schritt 1

Schreiben Sie Ihr JavaScript in einer Funktion, wie hier:


    (function () {
        amp.plugin('yourPluginName', function (options) {
        var myPlayer = this;
           myPlayer.addEventListener(amp.eventName.ready, function () {
        console.log("player is ready!");
            });
        });
    }).call(this);

Sie können Ihren Code direkt auf Ihrer HTML-Seite innerhalb von <script>-Tags oder in einer externen JavaScript-Datei schreiben. Wenn Sie die letztere Möglichkeit wählen, achten Sie darauf, die JavaScript-Datei nach dem AMP-Script in den <head> Ihrer HTML-Seite aufzunehmen.

Beispiel:

    <!--*****START OF Azure Media Player Scripts*****-->
    <script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
    <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    <!--*****END OF Azure Media Player Scripts*****-->
    <!--Add Plugins-->
    <script src="yourPluginName.js"></script>

Schritt 2

Initialisieren Sie das Plug-In mit JavaScript auf eine von zwei Arten:

Methode 1:

    var myOptions = {
        autoplay: true,
        controls: true,
        width: "640",
        height: "400",
        poster: "",
        plugins: {
            yourPluginName: {
                [your plugin options]: [example options]
           }
        }
    };
    var myPlayer = amp([videotag id], myOptions);

Methode 2:

    var video = amp([videotag id]);
    video.yourPluginName({[your plugins option]: [example option]});

Plug-In-Optionen sind nicht obligatorisch, ihre Einbeziehung ermöglicht es den Entwicklern aber, Ihr Plug-In zum Konfigurieren seines Verhaltens zu verwenden, ohne den Quellcode zu ändern.

Inspirationen und weitere Beispiele zum Erstellen von Plug-Ins finden Sie in unserem Katalog.

Hinweis

Der Code von Plug-Ins nimmt innerhalb der Lebensdauer der Playerdarstellung des Viewers dynamisch Änderungen am DOM vor, greift jedoch nicht dauerhaft in den Quellcode des Players ein. Hier kommt Ihnen das Wissen um die Entwicklertools Ihres Browsers zugute. Wenn Sie beispielsweise die Darstellung eines Elements im Player ändern möchten, können Sie sein HTML-Element anhand des Klassennamens suchen und dort dann Attribute ändern oder hinzufügen. Hier ist eine hervorragende Ressource zum Ändern von HTML-Attributen.

Integrierte Plug-Ins

Aktuell enthält AMP zwei integrierte Plug-Ins: Time-Tip und Hotkeys. Diese Plug-Ins wurden ursprünglich als modulare Plug-Ins für den Player entwickelt, sind jetzt jedoch im Quellcode des Players enthalten.