Angular 6 com Video.js

Israel Junior
Sep 6, 2018 · 2 min read

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.

AprendaJS

    Israel Junior

    Written by

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

    AprendaJS

    AprendaJS

    Blog dedicado a troca de informações sobre o universo JavaScript

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade