Criar plug-ins para o Player de Mídia do Azure
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.