Partager via

Configuration complète du Lecteur multimédia Azure

  • Article

Le lecteur multimédia Azure est facile à configurer. Il suffit de quelques instants pour obtenir la lecture de base du contenu multimédia directement à partir de votre compte Azure Media Services. exemples sont également fournis dans le répertoire des exemples de la version.

Étape 1 : Inclure les fichiers JavaScript et CSS dans la tête de votre page

Avec le lecteur multimédia Azure, vous pouvez accéder aux scripts à partir de la version hébergée par CDN. Il est souvent recommandé de placer JavaScript avant la balise de corps de fin <body> au lieu de l'<head>, mais le lecteur multimédia Azure inclut un « HTML5 Shiv », qui doit être à la tête des anciennes versions d’Internet Explorer pour respecter la balise vidéo en tant qu’élément valide.

Note

Si vous utilisez déjà un shiv HTML5 comme Modernr vous pouvez inclure le code JavaScript du lecteur multimédia Azure n’importe où. Toutefois, assurez-vous que votre version de Modernr inclut le shiv pour la vidéo.

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>

Important

Vous devez PAS utiliser la version latest en production, car cela est susceptible de changer à la demande. Remplacez latest par une version du lecteur multimédia Azure. Par exemple, remplacez latest par 2.1.1. Les versions du Lecteur multimédia Azure peuvent être interrogées à partir de ici.

Note

Étant donné que la version 1.2.0, il n’est plus nécessaire d’inclure l’emplacement aux technologies de secours (il récupère automatiquement l’emplacement à partir du chemin relatif du fichier azuremediaplayer.min.js). Vous pouvez modifier l’emplacement des technologies de secours en ajoutant le script suivant dans le <head> après les scripts ci-dessus.

Note

En raison de la nature des plug-ins Flash et Silverlight, les fichiers swf et xap doivent être hébergés sur un domaine sans aucune information ou donnée sensible. Cela est automatiquement pris en charge pour vous avec la version hébergée par Azure CDN.

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

Étape 2 : Ajouter une balise vidéo HTML5 à votre page

Avec le lecteur multimédia Azure, vous pouvez utiliser une balise vidéo HTML5 pour incorporer une vidéo. Le lecteur multimédia Azure lit ensuite la balise et la rende active dans tous les navigateurs, et pas seulement dans les navigateurs qui prennent en charge la vidéo HTML5. Au-delà du balisage de base, le lecteur multimédia Azure a besoin de quelques éléments supplémentaires.

  1. L’attribut <data-setup> sur l'<video> indique au lecteur multimédia Azure de configurer automatiquement la vidéo lorsque la page est prête et de lire n’importe quel (au format JSON) à partir de l’attribut.
  2. Attribut id : doit être utilisé et unique pour chaque vidéo de la même page.
  3. L’attribut class contient deux classes :
    • azuremediaplayer applique des styles requis pour la fonctionnalité d’interface utilisateur du lecteur multimédia Azure
    • amp-default-skin applique l’apparence par défaut aux contrôles HTML5
  4. Le <source> comprend deux attributs obligatoires
    • src attribut peut inclure un fichier *.ism/manifest à partir d’Azure Media Services est ajouté, azure Media Player ajoute automatiquement les URL pour DASH, SMOOTH et HLS au lecteur.
    • type attribut est le type MIME requis du flux. Le type MIME associé à .ism/manifest » est « application/vnd.ms-sstr+xml »
  5. L’attribut facultatif<data-setup> sur l'<source> indique au lecteur multimédia Azure s’il existe des stratégies de remise uniques pour le flux à partir d’Azure Media Services, y compris, mais pas limité au type de chiffrement (AES ou PlayReady, Widevine ou FairPlay) et au jeton.

Inclure/exclure des attributs, des paramètres, des sources et des pistes exactement comme vous le feriez pour la vidéo HTML5.

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

Par défaut, le grand bouton de lecture se trouve dans le coin supérieur gauche afin qu’il ne couvre pas les parties intéressantes de l’affiche. Si vous préférez centrer le bouton de lecture volumineux, vous pouvez ajouter une amp-big-play-centeredclass supplémentaire à votre élément <video>.

Autre configuration pour le code HTML chargé dynamiquement

Si votre page web ou votre application charge dynamiquement la balise vidéo (ajax, appendChild, etc.), afin qu’elle n’existe peut-être pas lorsque la page se charge, vous souhaiterez configurer manuellement le lecteur au lieu de compter sur l’attribut de configuration des données. Pour ce faire, commencez par supprimer l’attribut de configuration des données de la balise afin qu’il n’y ait aucune confusion entre le moment où le lecteur est initialisé. Ensuite, exécutez le code JavaScript suivant une fois que le lecteur multimédia Azure a chargé JavaScript et après le chargement de la balise vidéo dans le DOM.

    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"
    }]);

Le premier argument de la fonction amp est l’ID de votre balise vidéo. Remplacez-le par votre propre.

Le deuxième argument est un objet options. Il vous permet de définir des options supplémentaires comme vous pouvez avec l’attribut de configuration des données.

Le troisième argument est un rappel « prêt ». Une fois le lecteur multimédia Azure initialisé, il appelle cette fonction. Dans le rappel prêt, l’objet « this » fait référence à l’instance de lecteur.

Au lieu d’utiliser un ID d’élément, vous pouvez également transmettre une référence à l’élément lui-même.


    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"]);