Usar o Fluid Player com Angular

O Fluid Player funciona com o Angular imediatamente, sem configuração adicional. Para começar a usar o Fluid Player no seu projeto Angular, você precisará de:

• instalar o Fluid Player usando Yarn ou NPM, como descrito aqui; e

• importar o módulo do Fluid Player e anexá-lo ao elemento de vídeo da sua escolha.

Você pode ver um exemplo de como integrar o Fluid Player e o Angular no exemplo abaixo. Este é um exemplo simplificado para ajudá-lo a começar rapidamente. Siga as melhores práticas do Angular sobre como criar componentes reutilizáveis, dependendo das necessidades do seu projeto.

IMPORTANTE: a troca dinâmica de fontes não é suportada. É necessário recriar o componente OU recriar a instância do Fluid Player para alterar as fontes ou outras configurações do player.

app.component.html

<video #ref>
    <source
            src="https://cdn.fluidplayer.com/videos/valerian-1080p.mkv"
            data-fluid-hd
            title="1080p"
            type="video/mp4"
    >
</video>

Nota: O Safari não suporta a reprodução de ficheiros .mkv. Para visualizar este tipo de ficheiro, considere usar um navegador diferente que suporte o formato .mkv.

app.component.ts

import {AfterViewChecked, Component, ElementRef, ViewChild} from '@angular/core';
import fluidPlayer from 'fluid-player';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewChecked {

  fluidPlayer: any;

  @ViewChild('ref') ref!: ElementRef;

  ngAfterViewChecked() {
    if (!this.fluidPlayer) {
      this.fluidPlayer = fluidPlayer(this.ref.nativeElement);
    }
  }
}

angular.json

Dentro da opção propriedade:

{
  ...
  "styles": [\
    "src/styles.css",\
    "node_modules/fluid-player/src/css/fluidplayer.css"\ 
  ],
  ...
}