Compartilhar via

Configuração completa do Player de Mídia do Azure

  • Artigo

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

Etapa 1: Incluir os arquivos JavaScript e CSS no cabeçalho da sua página

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

Nota

Se você já estiver usando um shiv HTML5 como Modernizr poderá incluir o JavaScript do Player de Mídia do Azure em qualquer lugar. No entanto, verifique se sua versão do Modernizr inclui o shiv para vídeo.

Versão da 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 NÃO usar a versão latest em produção, pois isso está sujeito a alterações sob demanda. Substitua latest por uma versão do Player de Mídia do Azure. Por exemplo, substitua latest por 2.1.1. As versões do Player de Mídia do Azure podem ser consultadas de aqui.

Nota

Desde a versão 1.2.0, não é mais necessário incluir o local para as tecnologias de fallback (ele automaticamente pegará o local do caminho relativo do arquivo azuremediaplayer.min.js). Você pode modificar o local das tecnologias de fallback adicionando o script a seguir no <head> após os scripts acima.

Nota

Devido à natureza dos plug-ins Flash e Silverlight, os arquivos swf e xap devem ser hospedados em um domínio sem informações confidenciais ou dados – isso é cuidado automaticamente para você com a versão hospedada da 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 marca de vídeo HTML5 à sua página

Com o Player de Mídia do Azure, você pode usar uma marca de vídeo HTML5 para inserir um vídeo. O Player de Mídia do Azure lerá a marca e a fará funcionar em todos os navegadores, não apenas naqueles que dão suporte a vídeo HTML5. Além da marcação básica, o Player de Mídia do Azure precisa de algumas peças extras.

  1. O atributo <data-setup> no <video> informa ao Player de Mídia do Azure 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 de interface do usuário do Player de Mídia do Azure
    • amp-default-skin aplica a pele 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 Player de Mídia do Azure adiciona automaticamente as URLs para DASH, SMOOTH e HLS ao player
    • type atributo é o tipo MIME necessário do fluxo. O tipo MIME associado ao ".ism/manifest" é "application/vnd.ms-sstr+xml"
  5. O atributo <data-setup> opcional no <source> informa ao Player de Mídia do Azure se há políticas de entrega exclusivas para o fluxo dos Serviços de Mídia do Azure, incluindo, mas não se limitando a, tipo de criptografia (AES ou PlayReady, Widevine ou FairPlay) e token.

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

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

Configuração alternativa para HTML carregado dinamicamente

Se sua página da Web ou aplicativo carregar a marca de vídeo dinamicamente (ajax, appendChild etc.), para que ela não exista quando a página for carregada, você desejará configurar manualmente o player em vez de depender do atributo de configuração de dados. Para fazer isso, primeiro remova o atributo de configuração de dados da marca para que não haja confusão quando o player for inicializado. Em seguida, execute o JavaScript a seguir algum tempo depois que o JavaScript do Player de Mídia do Azure tiver sido 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 é a ID da marca de vídeo. Substitua-o por sua própria.

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

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

Em vez de usar uma 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"]);