Share via

Criar plug-ins para o Player de Mídia do Azure

  • Artigo

Um plug-in é criado com JavaScript para estender ou aprimorar o player. Você pode criar plug-ins que alteram a aparência e funcionalidade do Player de Mídia do Azure ou até mesmo criam uma interface com outros serviços. É possível fazer isso de duas formas simples:

Etapa 1

Programe o JavaScript em uma função como esta:


    (function () {
        amp.plugin('yourPluginName', function (options) {
        var myPlayer = this;
           myPlayer.addEventListener(amp.eventName.ready, function () {
        console.log("player is ready!");
            });
        });
    }).call(this);

Você pode escrever o código diretamente em sua página HTML dentro das marcas <script> ou em um arquivo JavaScript externo. Se você fizer o último, será necessário incluir o arquivo JavaScript na <head> da página HTML após o script do AMP.

Exemplo:

    <!--*****START OF Azure Media Player Scripts*****-->
    <script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
    <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    <!--*****END OF Azure Media Player Scripts*****-->
    <!--Add Plugins-->
    <script src="yourPluginName.js"></script>

Etapa 2

Inicialize o plug-in com JavaScript de uma das duas maneiras:

Método 1:

    var myOptions = {
        autoplay: true,
        controls: true,
        width: "640",
        height: "400",
        poster: "",
        plugins: {
            yourPluginName: {
                [your plugin options]: [example options]
           }
        }
    };
    var myPlayer = amp([videotag id], myOptions);

Método 2:

    var video = amp([videotag id]);
    video.yourPluginName({[your plugins option]: [example option]});

As opções de plug-in não são obrigatórias, incluí-las apenas permite que os desenvolvedores que usam seu plug-in configurem seu comportamento sem precisar alterar o código-fonte.

Para obter inspiração e mais exemplos de como criar um plug-in, dê uma olhada em nossa galeria

Observação

O código do plug-in altera dinamicamente os itens no DOM durante o tempo de vida da experiência do player do visualizador, mas nunca faz alterações permanentes no código-fonte do player. É nesse momento que o entendimento das ferramentas de desenvolvedor do seu navegador se torna útil. Por exemplo, se você quiser alterar a aparência de um elemento no Player, poderá localizar o elemento HTML por seu nome de classe e adicionar ou alterar atributos. Confira aqui um ótimo recurso para alterar atributos HTML.

Plug-ins integrados

Atualmente, há dois plug-ins incluídos no AMP: time-tip e hotkeys. Esses plug-ins foram originalmente desenvolvidos para serem plug-ins modulares para o Player, mas agora estão incluídos no código-fonte do Player.