Angular 6 com Video.js
Criando um player com angular 6 e o video.js
Nesse artigo vamos construir um player com o video.js 7 uma biblioteca javascript para reprodução de video usando HTML5 com suporte a MSE (Media source extension).
Para começar vamos criar um novo projeto como no exemplo abaixo.
$ ng new sample-player --style scss
$ cd sample-player
$ code .Agora vamos adicionar algumas dependências para o nosso projeto.
$ yarn add bootstrap video.jsConfigurando o projeto
Agora vamos fazer algumas alterações, o primeiro arquivo que temos que alterar é o angular.json e adicionar os arquivos de css e js que vamos precisar no projeto com forme o exemplo abaixo.
Agora vamos adicionar o html ao app.component.html conforme o exemplo abaixo.
E finalmente vamos adicionar nossa lógica no arquivo app.component.ts como no exemplo abaixo.
No código acima já está comentado o que cada declaração faz, mas em resumo ele está instanciando a lib do video.js dentro do angular cycle life hook ngAfterViewInit, usando algumas das opções de configuração da lib e logando no console do browser quando o video já está pronto para play.
O resultado deve ficar como o mostrado na imagem abaixo.
Nesse exemple eu usei um arquivo mp4 mas o video.js da suporte a outros formatos também como HLS e DASH. Todo o código do exemplo desse artigo se encontra disponível no meu github aqui.
