Angular 6 com Video.js

Israel Junior
AprendaJS
Published in
2 min readSep 6, 2018

Criando um player com angular 6 e o video.js

Angular 6 com 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.js

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

angular.json

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.

Sample Player

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.

--

--

Israel Junior
AprendaJS

Lifelong learner still trying to learn the secret of strength. Full Stack Web Developer working with Ruby on Rails, Node.JS and Serverless.