Usar o Fluid Player com React

O Fluid Player funciona com React pronto a usar. Para começar a usar o Fluid Player no seu projeto React, 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 React no exemplo abaixo. Este é um exemplo simplificado para ajudá-lo a começar rapidamente. Siga as melhores práticas do React 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.css

@import "~fluid-player/src/css/fluidplayer.css";

App.js

import fluidPlayer from 'fluid-player'
import './App.css';
import {useEffect, useRef} from "react";

function App() {
  let self = useRef(null);
  let player = null;

  useEffect(() => {
      if (!player) {
        player = fluidPlayer(self.current, {});
      }
  });

  return (
      <>
        <video ref={self}>
          <source src='https://cdn.fluidplayer.com/videos/valerian-1080p.mkv'
                  data-fluid-hd
                  title='1080p'
                  type='video/mp4'/>
        </video>
      </>
  );
}

export default App;

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.