Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Criar um player de vídeo no React pode parecer uma tarefa desafiadora. Mas com as ferramentas e técnicas certas, você pode fazer isso com relativa facilidade.

Existem duas maneiras de criar um player de vídeo no React: usando recursos integrados e usando bibliotecas de terceiros.

Criando um player de vídeo em React

Antes de criar um reprodutor de vídeo React, certifique-se de ter um conhecimento básico de HTML, CSS e JavaScript.

Começar por criando um aplicativo React básico para adicionar a seguinte funcionalidade de player de vídeo.

Usando recursos integrados (React Hooks)

A primeira opção para criar um player de vídeo no React é usar recursos integrados.

Comece criando o componente player que exibirá o vídeo e todos os seus controles. Para fazer isso, crie um arquivo chamado “Player.js” e adicione o seguinte código:

importar Reagir
instagram viewer
de 'reagir';

const Jogador = () => {
retornar (
<div>
<largura do vídeo="100%" altura="100%" controles>
<fonte origem ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tipo="vídeo/mp4" />
</video>
</div>
)
}

exportarpadrão Jogador;

Este código importa a biblioteca React e cria um componente player. Ele também adiciona um elemento de vídeo com o atributo de controles definido como “true”. Isso adicionará o player de vídeo básico à página.

Em seguida, adicione o botão play/pause. Para fazer isso, você precisará adicionar algumas linhas de código ao componente player. Adicione o seguinte código ao arquivo Player.js:

importar Reagir, { useState, useRef } de 'reagir';

const Jogador = () => {
const [está jogando, setIs jogando] = useState(falso);
const videoRef = useRef(nulo);

const togglePlay = () => {
if (está tocando) {
videoref.atual.pausa();
} outro {
videoref.atual.jogar();
}
setIsPlaying(!isPlaying);
};

retornar (
<div>
<vídeo
ref={vídeoRef}
largura="100%"
altura="100%"
controles
>
<fonte origem ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tipo="vídeo/mp4" />
</video>
<botão onClick={togglePlay}>
{está jogando? "Pausa": "Jogar"}
</button>
</div>
)
}

exportarpadrão Jogador;

Este código usa os ganchos useState e useRef para acompanhar o estado do vídeo (se está em reprodução ou em pausa) e a referência ao elemento de vídeo. Ele também adiciona uma função togglePlay que reproduz e pausa o vídeo. O elemento de botão acionará a função togglePlay.

A última etapa é adicionar a barra de progresso. Para fazer isso, você precisará adicionar mais algumas linhas de código ao arquivo Player.js. Adicione o seguinte:

importar Reagir, { useState, useRef } de 'reagir';

const Jogador = () => {
const [está jogando, setIs jogando] = useState(falso);
const [progresso, setProgresso] = useState(0);
const videoRef = useRef(nulo);

const togglePlay = () => {
if (está tocando) {
videoref.atual.pausa();
} outro {
videoref.atual.jogar();
}
setIsPlaying(!isPlaying);
};

const handleProgress = () => {
const duração = videoRef.current.duration;
const currentTime = videoRef.current.currentTime;
const progresso = (tempo atual / duração) * 100;
setProgress (progresso);
};
retornar (
<div>
<vídeo
onTimeUpdate={handleProgress}
ref={vídeoRef}
largura="100%"
altura="100%"
controles
>
<fonte origem ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tipo="vídeo/mp4" />
</video>
<div>
<botão onClick={togglePlay}>
{está jogando? "Pausa": "Jogar"}
</button>
<valor do progresso={progresso} máx="100" />
</div>
</div>
)
}

exportarpadrão Jogador;

Este código adiciona a função handleProgress. Esta função irá atualizar a barra de progresso. Ele também adiciona um ouvinte de evento onTimeUpdate ao elemento de vídeo que acionará a função handleProgress. Por fim, ele adiciona um elemento de progresso à página com os atributos value e max definidos como progress e 100, respectivamente.

Usando bibliotecas de terceiros

A segunda opção para criar um player de vídeo no React é usar bibliotecas de terceiros. Existem muitas bibliotecas disponíveis, mas algumas das mais populares são ReactPlayer e React-media-player.

ReactPlayer

O ReactPlayer é uma biblioteca simples e leve que permite criar um reprodutor de vídeo com apenas algumas linhas de código. Para instalá-lo, execute o seguinte comando em seu terminal:

npm instalar jogador de reação

Uma vez instalado, você pode usá-lo assim:

importar Reagir de 'reagir';
importar ReactPlayer de 'jogador de reação';

const Jogador = () => {
retornar (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
largura="100%"
altura="100%"
controles
/>
)
}

exportarpadrão Jogador;

Este código importa o componente ReactPlayer da biblioteca react-player e o adiciona à página. Ele define os atributos url, largura, altura e controles. Dê uma olhada em cada um desses parâmetros, um por um:

  • url: Este é o URL do vídeo que você deseja reproduzir.
  • largura: Esta é a largura do player de vídeo.
  • altura: Esta é a altura do player de vídeo.
  • controles: Este é um atributo booleano que determina se o player de vídeo terá controles ou não.

react-video-js-player

react-video-js-player é outra biblioteca simples e leve que permite criar um reprodutor de vídeo com apenas algumas linhas de código. Para instalá-lo, execute o seguinte comando em seu terminal:

npm instalar react-video-js-player

Uma vez instalado, você pode usá-lo assim:

importar Reagir de "reagir";
importar Reprodutor de vídeo de "react-video-js-player";

const Jogador = () => {
retornar (
<Reprodutor de vídeo
largura="100%"
altura="100%"
origem="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
controles
/>
)
}

exportarpadrão Jogador;

Este código importa o componente VideoPlayer da biblioteca react-video-js-player e o adiciona à página.

Recursos adicionais do reprodutor de vídeo

Você pode adicionar recursos extras ao seu reprodutor de vídeo, como:

  1. Adicionando um pôster: Você pode adicionar uma imagem de pôster ao seu player de vídeo definindo o atributo de pôster do elemento de vídeo para o URL da imagem.
  2. Repetindo: Você pode repetir seu vídeo definindo o atributo loop do elemento de vídeo como “true”.
  3. Silenciado: Você pode silenciar seu vídeo definindo o atributo muted do elemento de vídeo como “true”.
  4. Reprodução automática: Você pode reproduzir automaticamente seu vídeo definindo o atributo de reprodução automática do elemento de vídeo como “true”.

Você também pode adicionar seus próprios controles personalizados ao player de vídeo. Para fazer isso, você precisará adicionar ouvintes de evento ao elemento de vídeo e escrever funções para controlar o vídeo.

Aumente o envolvimento do usuário com um reprodutor de vídeo

Com as ferramentas e técnicas certas, você pode criar facilmente um player de vídeo no React. Você também pode adicionar recursos adicionais para aumentar o envolvimento do usuário. Os players de mídia são uma ótima maneira de aumentar o envolvimento do usuário em seu site ou aplicativo.

Depois de adicionar um player de vídeo ao seu site, certifique-se de acompanhar o engajamento do usuário para ver se está surtindo o efeito desejado. Você também pode implantar testes A/B para ver se adicionar um player de vídeo aumenta as taxas de conversão.