Configuração completa do Azure Media Player

  • Artigo

O Azure Media Player é fácil de configurar. Leva apenas alguns minutos para obter a reprodução básica de conteúdo de mídia diretamente da sua conta dos Serviços de Mídia do Azure. Amostras também são fornecidas no diretório de amostras da versão.

Passo 1: Inclua os ficheiros JavaScript e CSS no cabeçalho da sua página

Com o Azure Media Player, você pode acessar os scripts da versão hospedada pela CDN. Muitas vezes é recomendado agora colocar JavaScript antes do <body> de marca de corpo final em vez do <head>, mas o Azure Media Player inclui um 'HTML5 Shiv', que precisa estar na cabeça para versões mais antigas do IE para respeitar a tag de vídeo como um elemento válido.

Observação

Se você já estiver usando um shiv HTML5 como Modernizr poderá incluir o JavaScript do Azure Media Player em qualquer lugar. No entanto, certifique-se de que sua versão do Modernizr inclua o shiv para vídeo.

Versão 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

Você NÃO deve usar a versão latest em produção, pois esta está sujeita a alterações sob demanda. Substitua latest por uma versão do Azure Media Player. Por exemplo, substitua latest por 2.1.1. As versões do Azure Media Player podem ser consultadas a partir de aqui.

Observação

Desde o lançamento do 1.2.0, não é mais necessário incluir o local para os técnicos de fallback (ele pegará automaticamente o local do caminho relativo do arquivo azuremediaplayer.min.js). Você pode modificar o local dos técnicos de fallback adicionando o seguinte script no <head> após os scripts acima.

Observação

Devido à natureza dos plug-ins do Flash e do Silverlight, os arquivos swf e xap devem ser hospedados em um domínio sem informações ou dados confidenciais - isso é automaticamente atendido para você com a versão hospedada pela CDN do Azure.

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

Etapa 2: adicionar uma tag de vídeo HTML5 à sua página

Com o Azure Media Player, você pode usar uma marca de vídeo HTML5 para incorporar um vídeo. O Azure Media Player irá então ler a etiqueta e fazê-la funcionar em todos os browsers, não apenas naqueles que suportam vídeo HTML5. Além da marcação básica, o Azure Media Player precisa de algumas peças extras.

  1. O atributo <data-setup> no <video> informa ao Azure Media Player para configurar automaticamente o vídeo quando a página estiver pronta e ler qualquer um (no formato JSON) do atributo.
  2. O atributo id: Deve ser usado e exclusivo para cada vídeo na mesma página.
  3. O atributo class contém duas classes:
    • azuremediaplayer aplica estilos necessários para a funcionalidade da interface do usuário do Azure Media Player
    • amp-default-skin aplica a capa padrão aos controles HTML5
  4. O <source> inclui dois atributos necessários
    • src atributo pode incluir um *arquivo .ism/manifest dos Serviços de Mídia do Azure é adicionado, o Azure Media Player adiciona automaticamente as URLs para DASH, SMOOTH e HLS ao player
    • type atributo é o tipo MIME necessário do fluxo. O tipo MIME associado a ".ism/manifest" é "application/vnd.ms-sstr+xml"
  5. O atributo opcional no informa ao Azure Media Player se há políticas de entrega exclusivas para o fluxo dos Serviços de Mídia do Azure, incluindo, mas não limitado a, tipo de criptografia (AES ou PlayReady, Widevine ou FairPlay) e token.

Inclua/exclua atributos, configurações, fontes e faixas exatamente como faria para vídeos 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>

Por padrão, o botão de reprodução grande está localizado no canto superior esquerdo para não cobrir as partes interessantes do pôster. Se preferir centralizar o botão de reprodução grande, pode adicionar um amp-big-play-centeredclass adicional ao seu elemento <video>.

Configuração alternativa para HTML carregado dinamicamente

Se sua página da Web ou aplicativo carregar a tag de vídeo dinamicamente (ajax, appendChild, etc.), de modo que ela possa não existir quando a página for carregada, convém configurar manualmente o player em vez de confiar no atributo de configuração de dados. Para fazer isso, primeiro remova o atributo data-setup da tag para que não haja confusão quando o player for inicializado. Em seguida, execute o seguinte JavaScript algum tempo depois que o JavaScript do Azure Media Player for carregado e depois que a marca de vídeo tiver sido carregada no 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"
    }]);

O primeiro argumento na função amp é o ID da sua tag de vídeo. Substitua-o pelo seu.

O segundo argumento é um objeto options. Ele permite que você defina opções adicionais como você pode com o atributo de configuração de dados.

O terceiro argumento é um retorno de chamada "pronto". Depois que o Azure Media Player for inicializado, ele chamará essa função. No retorno de chamada pronto, 'este' objeto refere-se à instância do jogador.

Em vez de usar um ID de elemento, você também pode passar uma referência para o próprio 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"]);