Brinque com os controlos do seu vídeo e veja como pode alterar eficazmente a posição de reprodução. Neste tutorial, você aprenderá como controlar a posição de um vídeo usando o parâmetro currentTime no React. O foco está na implementação de um controle deslizante de intervalo que permite navegar entre diferentes pontos no tempo de um vídeo usando uma interface de usuário simples. Vamos começar agora mesmo!
Principais conclusões
- O parâmetro currentTime de um elemento de vídeo controla a posição de reprodução.
- Pode ser utilizado um cursor de intervalo para criar um controlo visual e interativo da posição do vídeo.
- Para ter um controlo preciso sobre a posição, deve utilizar a percentagem entre o estado atual da reprodução e a duração do vídeo.
- Eventos como onTimeUpdate são cruciais para atualizar dinamicamente a interface do utilizador.
Guia passo-a-passo
Passo 1: Configurar o seletor de intervalo
Comece por implementar um seletor de intervalo. Este seletor permitir-lhe-á controlar a posição do vídeo. Copie a estrutura básica do seu seletor e ajuste os atributos min e max para apresentar os valores de acordo com a duração do vídeo.
Passo 2: Definir currentTime
O atributo currentTime armazena a posição de reprodução atual do vídeo em segundos. Esta é a chave para controlar onde se encontra no vídeo. Defina a inicialização de modo a que a posição de reprodução seja definida para o início do vídeo.
Passo 3: Criar um estado para a posição
É necessário criar um novo estado para a posição do vídeo. No nosso caso, pode chamar-lhe simplesmente posição, o valor inicial é 0. Isto representa o início do vídeo, ou seja, 0% de reprodução.
Passo 4: Atualizar a posição do cursor
Com o novo estado, é importante atualizar o valor do cursor em função da posição no vídeo. Defina o valor do cursor de modo a que este se mantenha sincronizado com a posição atual.
Passo 5: Implementar a duração
Para saber que percentagem do vídeo já foi reproduzida, é necessário registar a duração total do vídeo. Pode fazê-lo utilizando o atributo de duração do elemento de vídeo. Multiplique a posição atualmente definida pela duração total do vídeo.
Passo 6: Adicionar um ouvinte de eventos para a atualização da hora
Para garantir que a posição da barra deslizante também é actualizada assim que o vídeo é reproduzido, é necessário anexar um ouvinte de eventos para onTimeUpdate ao elemento de vídeo. Este ouvinte consultará a hora atual em cada intervalo de tempo e actualizará o cursor em conformidade.
Passo 7: Tratamento de erros para valores indefinidos
É importante certificar-se de que o valor currentTime está definido e de que a duração do vídeo está disponível antes de prosseguir com o cálculo. Adicione lógica para lidar com os possíveis estados iniciais do vídeo.
Passo 8: Arredondamento e formatação da hora
É preferível arredondar o tempo apresentado para segundos completos. Esta melhoria garante que a interface do utilizador permanece limpa e fácil de utilizar. Utilize a função Math.round() para formatar os valores em conformidade.
Passo 9: Teste a funcionalidade em direto
Depois de ter concluído todos estes passos, recarregue o projeto e teste a barra deslizante. Certifique-se de que a posição do vídeo pode ser ajustada em ambas as direcções e verifique se a hora é actualizada corretamente.
Resumo
Agora você aprendeu como controlar a reprodução de um vídeo no React implementando um controle deslizante de intervalo eficaz que atualiza dinamicamente a propriedade currentTime. Isso permite que você navegue facilmente entre diferentes pontos do vídeo.
Perguntas frequentes
Qual é a diferença entre currentTime e duração?currentTime indica a posição de reprodução atual, enquanto a duração descreve toda a duração do vídeo.
Como posso atualizar a posição da barra deslizante durante a reprodução? Adicione um ouvinte de eventos para onTimeUpdate ao elemento de vídeo, que consulta a hora atual e actualiza o estado da barra deslizante.
Como posso ter certeza de que meu controle deslizante funciona corretamente?Certifique-se de que você implementou a lógica de gerenciamento de estado no React corretamente. Verifique se currentTime e duração estão definidos corretamente.
Também posso utilizar o seletor para áudio?Sim, o princípio é o mesmo. Pode utilizar as mesmas técnicas para elementos de áudio, uma vez que estes têm atributos semelhantes.
