@edm-webplayer/webplayer-angular

Webplayer Angular para YouTube, Vimeo, MP4 e HLS usando Plyr.io. Suporta salvar progresso (hooks) e retomar playback.

Instalação

npm i @edm-webplayer/webplayer-angular plyr hls.js

Importante: adicione o CSS do Plyr no seu app (global styles):

import 'plyr/dist/plyr.css';

ou no angular.json (styles).

Uso

import { WebplayerModule } from '@edm-webplayer/webplayer-angular';

@NgModule({
  imports: [WebplayerModule]
})
export class AppModule {}

<edm-webplayer
  [source]="{ kind: 'youtube', id: 'dQw4w9WgXcQ' }"
  [startTime]="lastPosition"
  (progress)="onProgress($event)"
  (ended)="onEnded()">
</edm-webplayer>

lastPosition = 0;
onProgress(e: {currentTime:number; duration:number}) {
  localStorage.setItem('progress:video1', String(Math.floor(e.currentTime)));
}
onEnded() { console.log('ended'); }

Fontes suportadas

• youtube (via provider interno do Plyr)
• vimeo (provider do Plyr)
• mp4 (HTML5)
• hls (m3u8) — usa HLS nativo do Safari ou hls.js

Build e publicação (sem Nx)

npm install
npm run build         # gera ./dist
npm publish --access public

Docker

Ambiente de Desenvolvimento

Para rodar o ambiente de desenvolvimento com hot-reload:

1. Certifique-se de ter o Docker e o Docker Compose instalados.
2. Execute o comando na raiz do projeto:

   docker-compose up --build

3. Acesse http://localhost:4200 no seu navegador.

Build de Produção

Opção 1: Gerar Apenas os Arquivos Compilados (Recomendado)

Para gerar os arquivos estáticos de produção na pasta ./dist, execute o script de build:

./build.sh

Ao final, a pasta ./dist conterá a aplicação pronta para deploy.

Opção 2: Gerar e Servir a Imagem Docker com Nginx

Para gerar uma imagem Docker final, otimizada e pronta para ser executada com Nginx:

1. Execute o comando na raiz do projeto:

   docker build -t edm-web-player .

2. Para rodar a imagem gerada:

   docker run -p 8080:80 edm-web-player

3. Acesse http://localhost:8080 para ver a aplicação em modo de produção.

Notas

• Anúncios/branding do YouTube e restrições do Vimeo continuam valendo.
• iOS não permite controle de volume via JS.
• Para DASH/DRM, considere Shaka Player (UI Plyr permanece).