Snabbstart för Azure Media Player

  • Artikel

Azure Media Player är enkelt att konfigurera. Det tar bara några minuter att få grundläggande uppspelning av medieinnehåll från ditt Azure Media Services-konto. I det här avsnittet visas de grundläggande stegen utan mer detaljerad information. Avsnitten nedan innehåller information om hur du konfigurerar Azure Media Player. Lägg bara till följande inkluderingar i dokumentets <head>:

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

Viktigt

Du bör INTE använda latest versionen i produktion eftersom detta kan komma att ändras på begäran. Ersätt latest med en version av Azure Media Player, till exempel ersätt latest med 1.0.0. Du kan köra frågor mot Azure Media Player-versioner härifrån.

Använda videoelementet

Använd sedan elementet <video> som vanligt, men med ytterligare data-setup ett attribut som innehåller alla alternativ. Dessa alternativ kan innehålla valfritt Azure Media Services-alternativ i ett giltigt JSON-objekt.

    <video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"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>

Om du inte vill använda automatisk installation kan du utelämna data-setup attributet och initiera ett videoelement manuellt.

    var myPlayer = amp('vid1', { /* Options */
            "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://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
        type: "application/vnd.ms-sstr+xml"
    }]);