Você quer exibir a duração de um vídeo corretamente no seu projeto React? No tutorial a seguir, mostrarei como usar um evento para determinar a duração do vídeo depois que os metadados necessários forem carregados. É crucial acessar a duração do vídeo no momento certo para garantir que você forneça as informações corretas.
Principais lições
- O evento loadedmetadata garante que a duração do vídeo está disponível.
- O estado tem de ser atualizado para apresentar a duração.
- Pode utilizar a propriedade duration do elemento de vídeo para consultar a duração.
Instruções passo a passo
Para mostrar a duração do vídeo, proceda da seguinte forma
Passo 1: Inicializar o vídeo com o estado
Primeiro, você precisa criar um elemento de vídeo no seu componente React. Certifique-se de que o estado é inicializado para a duração.
Aqui, você define o valor inicial da duração como zero ou 0. Isso é importante porque você vai querer atualizar esse valor mais tarde, quando os metadados do vídeo estiverem disponíveis.
Etapa 2: Integrar o evento loadedmetadata
O passo seguinte é utilizar o evento loadedmetadata para obter a duração do vídeo. Adiciona-se um ouvinte de eventos para este evento.
Assim que o vídeo for carregado e os metadados estiverem prontos, este evento será acionado, permitindo-lhe aceder à propriedade de duração do vídeo.
Passo 3: Atualizar o estado com a duração do vídeo
Agora pode atualizar o estado com a duração do vídeo recentemente determinada.
Use a função setDuration para definir o valor da duração. Normalmente, isto é feito na função de retorno de chamada que responde ao evento.
Etapa 4: Exibir o estado de duração
É necessário certificar-se de que apresenta a duração final na parte de renderização do componente. Nesta fase, certifica-se de que a duração é apresentada corretamente.
É importante ajustar a renderização em conformidade para que o utilizador veja sempre a duração atual que recuperou do elemento de vídeo.
Passo 5: Teste e optimize as alterações
O teste e a otimização são aspectos importantes. Recarregue a sua aplicação e teste se a duração do vídeo é apresentada corretamente.
Aqui pode ver que a duração de 60 segundos é apresentada corretamente. Se houver algum problema, verifique se o ouvinte está configurado corretamente e se o estado é atualizado como esperado.
Passo 6: Extensões para o leitor
Se as funções básicas para a duração do vídeo funcionarem bem, pode considerar funções adicionais. Estas incluem o modo de ecrã inteiro ou o controlo do volume.
Estas optimizações permitem ao utilizador desfrutar de uma experiência mais abrangente.
Resumo
Neste tutorial, você aprendeu como exibir a duração do vídeo em um aplicativo React usando o evento loadedmetadata. O estado é atualizado para garantir que a duração correta do vídeo seja exibida. A implementação de melhorias tornará seu player de vídeo ainda mais fácil de usar.
Perguntas frequentes
Como posso apresentar a duração do vídeo?Pode consultar a duração do vídeo com o evento loadedmetadata depois de o vídeo ter sido carregado.
O que acontece se a duração não for apresentada?Verifique se o evento listener está corretamente configurado e certifique-se de que o estado é atualizado.
Posso também utilizar outros eventos de vídeo?Sim, pode também utilizar outros eventos, mas loadedmetadata é o ideal para obter a duração do vídeo.
