Compartir a través de

Configuración completa de Azure Media Player

  • Artículo

Azure Media Player es fácil de configurar. Solo se tarda unos minutos en obtener la reproducción básica del contenido multimedia directamente desde la cuenta de Azure Media Services. también se proporcionan ejemplos en el directorio samples de la versión.

Paso 1: Incluir los archivos JavaScript y CSS en el encabezado de la página

Con Azure Media Player, puede acceder a los scripts desde la versión hospedada de la red CDN. A menudo se recomienda colocar JavaScript antes de la etiqueta de cuerpo final <body> en lugar de la <head>, pero Azure Media Player incluye un "HTML5 Shiv", que debe estar en el encabezado para que las versiones anteriores de IE respeten la etiqueta de vídeo como un elemento válido.

Nota

Si ya usa un shiv HTML5 como Modernizr puede incluir JavaScript de Azure Media Player en cualquier lugar. Sin embargo, asegúrese de que la versión de Modernizr incluye el shiv para vídeo.

Versión de CDN

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

Importante

Debe NOT usar la versión de latest en producción, ya que esto está sujeto a cambios a petición. Reemplace latest por una versión de Azure Media Player. Por ejemplo, reemplace latest por 2.1.1. Las versiones de Azure Media Player se pueden consultar desde aquí.

Nota

Dado que el 1.2.0 versión, ya no es necesario incluir la ubicación en las tecnologías de reserva (recogerá automáticamente la ubicación de la ruta de acceso relativa del archivo azuremediaplayer.min.js). Puede modificar la ubicación de las tecnologías de reserva agregando el siguiente script en el <head> después de los scripts anteriores.

Nota

Debido a la naturaleza de los complementos de Flash y Silverlight, los archivos swf y xap deben hospedarse en un dominio sin información confidencial o datos; esto se encarga automáticamente de usted con la versión hospedada de 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>

Paso 2: Agregar una etiqueta de vídeo HTML5 a la página

Con Azure Media Player, puede usar una etiqueta de vídeo HTML5 para insertar un vídeo. Después, Azure Media Player leerá la etiqueta y hará que funcione en todos los exploradores, no solo en los que se admita vídeo HTML5. Además del marcado básico, Azure Media Player necesita algunas piezas adicionales.

  1. El atributo <data-setup> de la <video> indica a Azure Media Player que configure automáticamente el vídeo cuando la página esté lista y lea cualquier (en formato JSON) del atributo.
  2. Atributo id: debe usarse y ser único para cada vídeo de la misma página.
  3. El atributo class contiene dos clases:
    • azuremediaplayer aplica estilos necesarios para la funcionalidad de la interfaz de usuario de Azure Media Player.
    • amp-default-skin aplica la máscara predeterminada a los controles HTML5
  4. El <source> incluye dos atributos necesarios
    • src atributo puede incluir un archivo *.ism/manifest de Azure Media Services, Azure Media Player agrega automáticamente las direcciones URL de DASH, SMOOTH y HLS al reproductor.
    • type atributo es el tipo MIME necesario de la secuencia. El tipo MIME asociado a ".ism/manifest" es "application/vnd.ms-sstr+xml"
  5. El atributo opcional<data-setup> en el <source> indica a Azure Media Player si hay directivas de entrega únicas para la transmisión desde Azure Media Services, incluidos, entre otros, el tipo de cifrado (AES o PlayReady, Widevine o FairPlay) y el token.

Incluir o excluir atributos, configuraciones, orígenes y pistas exactamente como lo haría para el vídeo 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>

De forma predeterminada, el botón de reproducción grande se encuentra en la esquina superior izquierda para que no cubra las partes interesantes del póster. Si prefiere centrar el botón de reproducción grande, puede agregar un amp-big-play-centeredclass adicional al elemento <video>.

Configuración alternativa para HTML cargado dinámicamente

Si la aplicación o la página web cargan la etiqueta de vídeo dinámicamente (ajax, appendChild, etcetera.), para que no exista cuando se cargue la página, querrá configurar manualmente el reproductor en lugar de confiar en el atributo de configuración de datos. Para ello, quite primero el atributo data-setup de la etiqueta para que no haya ninguna confusión cuando se inicialice el jugador. A continuación, ejecute el siguiente Código JavaScript algún tiempo después de que se haya cargado el JavaScript de Azure Media Player y después de que la etiqueta de vídeo se haya cargado en el 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"
    }]);

El primer argumento de la función amp es el identificador de la etiqueta de vídeo. Reemplácelo por el suyo propio.

El segundo argumento es un objeto options. Permite establecer opciones adicionales como puede con el atributo data-setup.

El tercer argumento es una devolución de llamada "lista". Una vez que Azure Media Player se haya inicializado, llamará a esta función. En la devolución de llamada lista, el objeto "this" hace referencia a la instancia del reproductor.

En lugar de usar un identificador de elemento, también puede pasar una referencia al propio elemento.


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