A biblioteca do reprodutor de mídia é de código aberto

Abrimos o código do nosso kit de ferramentas para criar reprodutores de vídeo e áudio personalizados. O kit de ferramentas fornece renderizadores React mínimos, componentes pré-empacotados e uma API flexível para criar seus componentes personalizados.

O mundo está virando vídeo — e os navegadores são um foguete sólido para embarcar nessa jornada. Rápido, simples de usar e com amplo suporte a codecs. Adicionar vídeos a aplicativos React nunca foi tão fácil .

No entanto, isso não significa que tudo já esteja perfeito. Embora bibliotecas como o ReactPlayer preencham a lacuna dos navegadores para o React, ainda existem desafios em aberto:

• Eventos baratos: obtenha uma atualização a cada 50 ms do player de vídeo para atualizar seu aplicativo — sem interromper o desempenho do aplicativo
• Personalize a interface do usuário: ainda é surpreendentemente complicado criar um player com sua própria aparência

Habilitamos eventos baratos espelhando o estado do vídeo em JavaScript . É basicamente o conceito de Virtual DOM do React aplicado ao player de vídeo do navegador: o app interage com JavaScript, o que é muito mais barato do que descer para o nível DOM. Isso permite registrar os ouvintes em mudanças de alta frequência no player, por exemplo, ser alertado quando o vídeo atinge determinados pontos de tempo.

Para personalizar a interface do usuário, nos inspiramos no modelo onion: você pode usar o player pré-embalado que vem com todos os tipos de recursos, como picture-in-picture, tela cheia e segmentos destacados. Se precisar de mais personalização da interface do usuário, basta remover essa camada e compor seu próprio player juntando os componentes prontos . Precisa de ainda mais personalização? Basta escrever seus próprios componentes que podem ser facilmente conectados ao seu player.

➡️ Parece interessante? Vá até o Github, experimente e diga-nos o que você pensa:https://github.com/Collaborne/media-player