Freigeben über

Vollständige Einrichtung von Azure Media Player

  • Artikel

Azure Media Player ist einfach einzurichten. Es dauert nur ein paar Augenblicke, um die grundlegende Wiedergabe von Medieninhalten direkt aus Ihrem Azure Media Services-Konto zu erhalten. Beispiele werden auch im Beispielverzeichnis der Version bereitgestellt.

Schritt 1: Einschließen der JavaScript- und CSS-Dateien im Kopf ihrer Seite

Mit Azure Media Player können Sie über die gehostete CDN-Version auf die Skripts zugreifen. Es wird häufig empfohlen, JavaScript vor dem Endtexttag <body> anstelle des <head>zu platzieren, aber Azure Media Player enthält einen "HTML5 Shiv", der sich in der Kopfzeile für ältere IE-Versionen befinden muss, um das Videotag als gültiges Element zu respektieren.

Anmerkung

Wenn Sie bereits einen HTML5-Shiv wie Modernizr verwenden, können Sie das JavaScript von Azure Media Player überall einschließen. Stellen Sie jedoch sicher, dass Ihre Version von Modernizr den Shiv für Video enthält.

CDN-Version

    <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    <script src= "//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>

Wichtig

Sie sollten NICHT die latest-Version in der Produktion verwenden, da dies bei Bedarf geändert werden kann. Ersetzen Sie latest durch eine Version von Azure Media Player. Ersetzen Sie z. B. latest durch 2.1.1. Azure Media Player-Versionen können von hierabgefragt werden.

Anmerkung

Da die 1.2.0-Version nicht mehr benötigt wird, um den Speicherort in die Fallbacktechnologie einzuschließen (der Speicherort wird automatisch vom relativen Pfad der datei azuremediaplayer.min.js übernommen). Sie können den Speicherort der Fallbacktechnologie ändern, indem Sie das folgende Skript im <head> nach den obigen Skripts hinzufügen.

Anmerkung

Aufgrund der Art von Flash- und Silverlight-Plug-Ins sollten die SWF- und XAP-Dateien ohne vertrauliche Informationen oder Daten in einer Domäne gehostet werden . Dies wird automatisch für Sie mit der von Azure CDN gehosteten Version übernommen.

    <script>
      amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
      amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
    </script>

Schritt 2: Hinzufügen eines HTML5-Videotags zu Ihrer Seite

Mit Azure Media Player können Sie ein HTML5-Videotag verwenden, um ein Video einzubetten. Azure Media Player liest dann das Tag und macht es in allen Browsern funktionsfähig, nicht nur solche, die HTML5-Video unterstützen. Über das grundlegende Markup hinaus benötigt Azure Media Player einige zusätzliche Teile.

  1. Das <data-setup>-Attribut des <video> weist Azure Media Player an, das Video automatisch einzurichten, wenn die Seite bereit ist, und alle (im JSON-Format) aus dem Attribut zu lesen.
  2. Das attribut id: Sollte für jedes Video auf derselben Seite verwendet und eindeutig sein.
  3. Das attribut class enthält zwei Klassen:
    • azuremediaplayer wendet Stile an, die für die Benutzeroberfläche von Azure Media Player erforderlich sind.
    • amp-default-skin wendet die Standardoberfläche auf die HTML5-Steuerelemente an.
  4. Die <source> enthält zwei erforderliche Attribute.
    • src Attribut kann ein *.ism/manifest enthalten, Datei von Azure Media Services hinzugefügt wird, Azure Media Player fügt automatisch die URLs für DASH, SMOOTH und HLS zum Player hinzu.
    • type Attribut ist der erforderliche MIME-Typ des Datenstroms. Der MIME-Typ, der ".ism/manifest" zugeordnet ist ist "application/vnd.ms-sstr+xml"
  5. Das optionale<data-setup>-Attribut für die <source> weist Azure Media Player an, ob es eindeutige Übermittlungsrichtlinien für den Datenstrom von Azure Media Services gibt, einschließlich, aber nicht beschränkt auf, Verschlüsselungstyp (AES oder PlayReady, Widevine oder FairPlay) und Token.

Einschließen/Ausschließen von Attributen, Einstellungen, Quellen und Titeln genau wie für HTML5-Videos.

    <video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"techOrder": ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"], "nativeControlsForTouch": false}'>
        <source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
        <p class="amp-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
        </p>
    </video>

Standardmäßig befindet sich die große Wiedergabeschaltfläche in der oberen linken Ecke, sodass die interessanten Teile des Posters nicht verdeckt werden. Wenn Sie die große Wiedergabeschaltfläche zentrieren möchten, können Sie Ihrem <video>-Element eine zusätzliche amp-big-play-centeredclass hinzufügen.

Alternatives Setup für dynamisch geladene HTML

Wenn Ihre Webseite oder Anwendung das Videotag dynamisch lädt (Ajax, appendChild usw.), damit es beim Laden der Seite möglicherweise nicht vorhanden ist, sollten Sie den Player manuell einrichten, anstatt sich auf das Datensetup-Attribut zu verlassen. Entfernen Sie dazu zuerst das Datensetup-Attribut aus dem Tag, sodass beim Initialisieren des Spielers keine Verwirrung besteht. Führen Sie als Nächstes das folgende JavaScript einige Zeit nach dem Laden des Azure Media Player-JavaScript aus, und nachdem das Videotag in das DOM geladen wurde.

    var myPlayer = amp('vid1', { /* Options */
            techOrder: ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"],
            "nativeControlsForTouch": false,
            autoplay: false,
            controls: true,
            width: "640",
            height: "400",
            poster: ""
        }, function() {
              console.log('Good to go!');
               // add an event listener
              this.addEventListener('ended', function() {
                console.log('Finished!');
            });
          }
    );
    myPlayer.src([{
        src: "http://samplescdn.origin.mediaservices.windows.net/e0e820ec-f6a2-4ea2-afe3-1eed4e06ab2c/AzureMediaServices_Overview.ism/manifest",
        type: "application/vnd.ms-sstr+xml"
    }]);

Das erste Argument in der funktion amp ist die ID Ihres Videotags. Ersetzen Sie sie durch Ihre eigenen.

Das zweite Argument ist ein Optionsobjekt. Es ermöglicht Ihnen, zusätzliche Optionen festzulegen, z. B. mit dem Data-Setup-Attribut.

Das dritte Argument ist ein "ready"-Rückruf. Nachdem Azure Media Player initialisiert wurde, wird diese Funktion aufgerufen. Im bereiten Rückruf bezieht sich das Objekt "this" auf die Spielerinstanz.

Statt eine Element-ID zu verwenden, können Sie auch einen Verweis auf das Element selbst übergeben.


    amp(document.getElementById('example_video_1'), {/*Options*/}, function() {
        //This is functionally the same as the previous example.
    });
    myPlayer.src([{ src: "//example/path/to/myVideo.ism/manifest", type: "application/vnd.ms-sstr+xml"]);