Construindo um player de vídeo Angular com Videogular

De acordo com estatísticas de tráfego online, o vídeo está assumindo o controle da web. A boa e velha TV está morrendo e as empresas avançam rapidamente para dominar um mercado que representará 80% do tráfego online até 2019.

Muitos provedores de mídia e produtos contam com suporte a vídeo HTML5:

• Youtube: vídeo HTML5 e plataforma de compartilhamento social
• Netflix: provedor de conteúdo de vídeo HTML5
• JWPlayer: serviço de vídeo HTML5 e provedor de streaming
• Brightcove: serviço de vídeo HTML5 e provedor de streaming
• Kaltura: serviço de vídeo HTML5 e provedor de streaming
• Video.js: player de vídeo HTML5
• Flowplayer: player de vídeo HTML5 e provedor de streaming

A comunidade de desenvolvedores precisa de uma estrutura de mídia sólida, extensível e avançada (não apenas um player de vídeo HTML5) para enfrentar os novos desafios que estão por vir. Neste artigo, quero apresentar um desses frameworks: Videogular .

O que é Videogular?

Como o nome sugere, Videogular é uma estrutura de mídia escrita em Angular 2+. Com o Videogular, você pode reproduzir vídeo HTML5, áudio ou qualquer outro conteúdo que desejar. Existe uma implementação para o Angular 1.X (também conhecido como AngularJS), mas neste artigo falaremos apenas sobre a versão atual do Angular 2+.

Então, a próxima pergunta que provavelmente está passando pela sua cabeça é: Por que usar Angular para vídeo?

Bem, existem várias boas razões para escolher uma estrutura específica para criar uma biblioteca de vídeos.

• Facilidade de contribuição: Como o Videogular é baseado em Angular, um framework popular com uma comunidade muito ativa, é muito fácil para outras pessoas começarem a contribuir criando plugins ou corrigindo bugs.
• Componentes da Web: Não há necessidade de escrever JavaScript para criar e estilizar seu próprio player. Você pode escrever código HTML e CSS.
• TypeScript: Angular é um framework tipado, assim como todas as bibliotecas ao seu redor. Ter um ecossistema fortemente tipado nos permite detectar bugs e problemas de arquitetura antes que seja tarde demais.
• Velocidade: todos os frameworks populares mais recentes são extremamente rápidos, incluindo o Angular.

Além disso, temos alguns outros recursos interessantes, como RxJS, AOT (compilação antecipada), a CLI Angular e muito mais.

Como o Videogular funciona?

Eu gosto de dizer que o Videogular é mais um framework de mídia do que apenas um player de vídeo HTML5. O recurso e a diferença mais relevante entre outros players de vídeo é que você escreve tags para configurar seu player em vez de JavaScript.

É assim que a maioria dos players de vídeo funciona agora:

 <video class="library" controls preload="auto" data-config="some-js-object-here"> <source src="video-url.mp4" type='video/mp4'> </video> <script src="video-library.js"></script>

E é assim que a implementação do Videogular se parece:

 <vg-player> <vg-overlay-play></vg-overlay-play> <vg-buffering></vg-buffering> <vg-controls> <vg-play-pause></vg-play-pause> <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display> <vg-scrub-bar> <vg-scrub-bar-current-time></vg-scrub-bar-current-time> <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time> </vg-scrub-bar> <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display> <vg-track-selector></vg-track-selector> <vg-mute></vg-mute> <vg-volume></vg-volume> <vg-fullscreen></vg-fullscreen> </vg-controls> <video #myMedia [vgMedia]="myMedia" preload="auto" crossorigin> <source src="video-url.mp4" type='video/mp4'> <track kind="subtitles" label="English" src="assets/subs/pale-blue-dot.vtt" srclang="en" default> <track kind="subtitles" label="Espanol" src="assets/subs/pale-blue-dot-es.vtt" srclang="es"> </video> </vg-player>

O bom do Videogular é que, com apenas uma rápida olhada no código HTML, você sabe como esse player funciona, quais controles estão disponíveis e como modificá-lo para remover, por exemplo, as faixas e o seletor de faixas.

Mas essa não é a única vantagem da qual podemos nos beneficiar ao construir um player de vídeo Angular. Pense em grandes equipes de desenvolvimento onde designers de HTML/CSS e desenvolvedores de JavaScript trabalham juntos na mesma base de código. Como estamos usando elementos personalizados, os designers podem começar a trabalhar aplicando estilos e animações sem a necessidade de aprender uma nova biblioteca ou mesmo JavaScript/TypeScript.

Além disso, o Videogular fornece recursos muito mais poderosos do que apenas escrever um player de vídeo Angular simples, como sincronização automática entre vários arquivos de mídia ou a capacidade de reproduzir não apenas vídeo/áudio, mas praticamente qualquer conteúdo que tenha um começo e um fim.

Para ver como é fácil criar um aplicativo rico e interativo com o Videogular, vamos criar uma lista de reprodução de vídeos com metadados sincronizados.

Como instalar o Videogular

Neste exemplo, teremos uma lista de vídeos e um trecho relacionado da Wikipedia, caso o usuário precise ter mais informações sobre o vídeo.

Todo o código está disponível em nosso repositório GitHub Videogular Showroom e é publicado como uma página do GitHub.

A instalação videogular deve ser um assunto simples para qualquer desenvolvedor Angular qualificado. Por outro lado, se você está apenas começando no Angular, confira este guia rápido para criar seu primeiro aplicativo Angular.

Se você ainda não instalou o Node.js, acesse o site oficial do Node.js e instale-o. Este é o único servidor que precisamos desenvolver com Angular, e precisamos dele para instalar dependências via NPM. Você só precisa ter certeza de instalar o Node.js 6.9.0 ou superior e o NPM 3.0.0 ou superior.

A primeira coisa que precisamos fazer é instalar a CLI Angular. A CLI Angular é uma ferramenta obrigatória para qualquer desenvolvedor Angular, pois fornece andaimes, testes, servidores de desenvolvimento e compilações de produção fáceis. Ainda mais importante, segue uma convenção que qualquer outro desenvolvedor Angular pode entender.

Instale a CLI Angular globalmente via NPM:

 npm install -g @angular/cli

E vamos criar nosso primeiro projeto com suporte para SASS:

 ng new smart-video-playlist --style=scss

Isso deve criar um projeto de amostra para você. Se você quiser começar a desenvolver e observar os resultados ao mesmo tempo, você pode executar npm run start e abrir [http://localhost:4200](http://localhost:4200) . A CLI Angular executará um servidor de desenvolvimento Node.js com recarga ao vivo e todos os recursos interessantes que nós, desenvolvedores, adoramos.

Agora você pode instalar a biblioteca videogular2 e as tipagens core-js :

 npm install videogular2 --save npm install @types/core-js --save-dev

Criando um player de vídeo Angular

Se quiser, você pode usar a fonte oficial Videogular para definir ícones em seus botões e controles. Para fazer isso, você precisa adicionar CSS ao seu arquivo .angular-cli.json disponível na raiz do seu projeto.

 { ... "apps": [ { ... "styles": [ "../node_modules/videogular2/fonts/videogular.css", "styles.scss" ], ... } ], ... }

Se você quiser definir sua própria fonte e estilos, você pode definir seu CSS personalizado aqui ou dentro styles.scss .

Para começar a usar o Videogular em seu projeto, você precisa adicionar o módulo Videogular ao seu módulo de aplicação.

Abra src/app/app.module.ts e remova o FormsModule e o HttpModule; não precisaremos deles para esta demonstração. É assim que seu arquivo app.module.ts deve ficar:

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { VgCoreModule } from 'videogular2/core'; import { VgControlsModule } from 'videogular2/controls'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, VgCoreModule, VgControlsModule ], providers: [], bootstrap: [ AppComponent ] }) export class AppModule { }

Com tudo configurado, só precisamos escrever nosso código HTML!

 <vg-player> <vg-controls> <vg-play-pause></vg-play-pause> <vg-playback-button></vg-playback-button> <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display> <vg-scrub-bar> <vg-scrub-bar-current-time></vg-scrub-bar-current-time> <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time> </vg-scrub-bar> <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display> <vg-mute></vg-mute> <vg-volume></vg-volume> <vg-fullscreen></vg-fullscreen> </vg-controls> <video #media [vgMedia]="media" preload="auto" crossorigin> <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4"> </video> </vg-player>

Agora você pode executar o servidor e aproveitar seu primeiro aplicativo de vídeo desenvolvido com Angular e Videogular.

 npm run start

Construindo uma lista de reprodução de mídia em Angular

Para listar nossos vídeos, vamos criar um array simples com todas as opções. Lembre-se de que você pode carregar essa lista por meio de um serviço REST com o HttpModule do Angular, mas para simplificar, faremos isso codificado nesta demonstração.

Abra app.component.ts e adicione este conjunto de vídeos e sua interface:

 import { Component } from '@angular/core'; export interface IMedia { title: string; src: string; type: string; } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: [ './app.component.scss' ] }) export class AppComponent { playlist: Array<IMedia> = [ { title: 'Pale Blue Dot', src: 'http://static.videogular.com/assets/videos/videogular.mp4', type: 'video/mp4' }, { title: 'Big Buck Bunny', src: 'http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov', type: 'video/mp4' }, { title: 'Elephants Dream', src: 'http://static.videogular.com/assets/videos/elephants-dream.mp4', type: 'video/mp4' } ]; }

Agora estamos prontos para adicionar a playlist abaixo do nosso player no arquivo HTML:

 <ul> <li *ngFor="let item of playlist; let $index = index" (click)="onClickPlaylistItem(item, $index)" [class.selected]="item === currentItem"> {{ item.title }} </li> </ul>

Vamos adicionar alguns estilos para a classe selected e o efeito de hover :

 ul { list-style-type: none; margin: 0; padding: 0; font-family: sans-serif; li { padding: 10px; cursor: pointer; &.selected { background-color: #dddddd; } &:hover { background-color: #cce6ee; } } }

O método onClickPlaylistItem definirá a mídia a ser reproduzida em nosso player Videogular. Vamos agora para app.component.ts para adicionar o método:

 // ... export class AppComponent { // ... currentIndex = 0; currentItem: IMedia = this.playlist[ this.currentIndex ]; onClickPlaylistItem(item: IMedia) { this.currentIndex = index; this.currentItem = item; } }

A propriedade currentIndex será usada posteriormente para identificar o item atual e sua posição na lista de reprodução. Isso é importante para fazer playlists de loop infinito e atualizar o currentIndex quando o usuário clica em um item da playlist.

Por fim, basta modificar o elemento video para definir a origem da propriedade currentItem tratada pela lista de reprodução. Vamos criar para isso uma ligação simples para a propriedade src do elemento de vídeo HTML5:

 <video #media [vgMedia]="media" [src]="currentItem.src" preload="auto" crossorigin> </video>

Agora podemos testar nossa playlist e ver como funciona. O primeiro vídeo é carregado no início e podemos alternar entre os vídeos, então está tudo bem! Mas podemos fazer alguns ajustes e melhorar a experiência alternando automaticamente entre os vídeos quando um vídeo é concluído e adicionando um melhor gerenciamento geral do estado do player.

Para fazer isso, precisaremos da API do Videogular, um serviço global disponível em cada instância do Videogular para lidar com o estado e ouvir os eventos.

Usando VgAPI para lidar com estados

Nossa lista de reprodução de mídia agora está 100% funcional, mas podemos melhorar a experiência do usuário reproduzindo vídeos automaticamente quando um novo item é selecionado ou quando um vídeo é concluído.

O Videogular expõe uma API para controlar e ouvir as alterações de cada instância VgMedia dentro do componente VgPlayer . Na verdade, todos os módulos do Videogular são baseados nessa API pública, então você pode criar seus próprios módulos para seus clientes ou contribuir com a comunidade liberando-os como código aberto.

Para usar a API Videogular, você só precisa ouvir o evento onPlayerReady disparado pelo componente VgPlayer:

 <vg-player (onPlayerReady)="onPlayerReady($event)"> // ...

Quando o player é inicializado, você pode salvar a API e começar a ouvir os eventos despachados pela tag de video :

 export class AppComponent { // ... onPlayerReady(api: VgAPI) { this.api = api; } }

A API Videogular é baseada em RxJS, então você pode subscribe Observables e reagir em consequência. Para reproduzir automaticamente os vídeos, precisamos ouvir o evento de loadedmetadata .

Vamos adicionar uma nova Subscription para reproduzir o vídeo quando os metadados forem carregados:

 export class AppComponent { // ... onPlayerReady(api: VgAPI) { this.api = api; this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe( this.playVideo.bind(this) ); } playVideo() { this.api.play(); } // ... }

Essa foi fácil; simplesmente reproduzimos o vídeo por meio da loadedMetadata quando o observável carregadoMetadata é acionado.

Você se lembra da propriedade currentIndex ? Agora é o momento de usá-lo para que possamos passar para o próximo vídeo quando o vídeo atual estiver concluído:

 // ... export class AppComponent { // ... onPlayerReady(api: VgAPI) { this.api = api; this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe( this.playVideo.bind(this) ); this.api.getDefaultMedia().subscriptions.ended.subscribe( this.nextVideo.bind(this) ); } nextVideo() { this.currentIndex++; if (this.currentIndex === this.playlist.length) { this.currentIndex = 0; } this.currentItem = this.playlist[ this.currentIndex ]; } // ... }

Com esse método, podemos lidar com quando o evento ended é acionado pela tag de video e, em seguida, passar para o próximo vídeo. Também adicionamos um pequeno controle para fazer um loop infinito quando chegamos ao final da lista de reprodução definindo currentIndex = 0; para que possamos voltar ao primeiro item. Por fim, definimos o currentItem que atualizará nossas associações Angular na interface do usuário.

Como você pode ver, não estamos reproduzindo o vídeo aqui; isso porque lidamos com isso com o observável loadedMetadata . Quando atualizamos o currentItem dentro nextVideo() , um novo vídeo é carregado e aciona o observável loadedMetadata .

Isso torna nosso código mais fácil de ler e mais difícil de quebrar! Observáveis ​​são incríveis, certo?

Qual é o próximo?

A partir daqui, poderíamos adicionar alguns controles de vídeo HTML5 para remover a reprodução automática ou o loop infinito, injetar anúncios ou sincronizar informações.

Nesta demonstração, apenas arranhamos a superfície do que é possível fazer com o Videogular. A API é capaz de gerenciar vários arquivos de mídia ao mesmo tempo, temos módulos para streaming e propaganda, e você ainda pode criar um media player para reproduzir animações, rotas em um mapa e muito mais.

O Videogular é lançado sob uma licença do MIT e é um projeto de código aberto disponível no GitHub. Todos são bem-vindos para criar um pull request, enviar um problema, escrever documentação e contribuir com a comunidade.