ℹ Player de video com as funcionalidades existentes no atual player da Netflix Web.
Recursos | Tecnologias | Como Utilizar | Propriedades | Estilização | Eventos | Modos | Controles | Como Desenvolver
- Reprodução de vídeos com Loading e Memória temporária (Buffer);
- Listagem de lista de reprodução com marcação do vídeo atual e auto sequência;
- Ação para prosseguir para o próximo item;
- Tratamento de evento de término de vídeo;
- Recursos de Play/Pause, Avançar/Retroceder e FullScreen;
- Suporte a múltiplos links de reprodução;
- Informações da mídia em execução;
- Playback Rate, Possibilitando alterar a velocidade de Reprodução;
- Sistema de ocultação dos controles mediante tempo de espera;
- Customização de cor e fonte;
- Tratamento de erros;
- Disponível em Inglês e Português.
No desenvolvimento desse projeto foi ultilizado
Qualidade de Código
Adicione o react-netflix-player em seu projeto executando:
npm install react-netflix-player
ou
yarn add react-netflix-player
Após realize o import do componente no arquivo que deseja adicionar o player
import { ReactNetflixPlayer } from "react-netflix-player"
Pronto, seu componente já está pronto para ser utililado, basta criá-lo em seu arquivo.
<ReactNetflixPlayer/>
Parâmetro Obrigatório
Vídeo ou endereço do vídeo a ser reproduzido
Ao alterar esse parâmetro todo o estado do componente é restaurado para o inicial, como informações de posição, buffer e controles.
Texto ao ser exibido como título do vídeo em execução, este texto aparece quando o vídeo fica em situação PAUSADO por muito tempo.
Se essa informação não for informada, nenhuma informação será exibida na tela.
Texto auxiliar ao parâmetro de title, sua informação será exibida abaixo do título se informada.
Texto localizado na barra de controles, seguindo o design da Netflix, este campo contém o Título da Mídia em reprodução ou o nome da Playlists.
Se não for enviado, nenhuma informação será apresentada na barra de controles.
Texto auxiliar ao parâmetro de titleMedia, sua informação será exibida ao lado do título se informada.
Informa em qual língua os textos do player devem ser mostrados. Por padrão os textos são apresentados em Português.
Línguas disponíveis: pt (Português) e en (Inglês)
👋 Hey! Sabe escrever em outro idioma? Vai ser um prazer receber a sua contribuição.
Informa se o modo StandyBy estará ativo. (Tela com informações do vídeo no modo PAUSADO)
Informando false, o player não apresentará a tela.
Informa se os controles do player devem se auto ocultar.
Informando false os controles ficarão fixos em tela durante todo o vídeo.
Parâmetro informa se player deve ocupar toda a área da WebView, por padrão é setado como true
Observações: Esse parâmetro não se refere ao modo FullScreen do navegador. Se esse parâmetro for passado como false, o player ocupara a área disponível informada em seu componente pai.
Informa se o botão de voltar ⬅ será visível quando os controles estiverem ativos, por padrão ele está desativado.
Informa se o vídeo deverá iniciar automáticamente, por padrão o valor é false;
Obs: Funcionalidade pode apresentar problemas nas versões mas recentes do navegador Chrome, que bloqueia o autoplay de vídeos se não existir uma interação do usuário.
Informa em qual segundo a reprodução do vídeo deverá iniciar
Informa se as opções de Playback Rate podem ser acessadas, por padrão o valor é true
Array com as velocidades disponíveis no player.
Valor padrão ['0.25', '0.5', '0.75', 'Normal', '1.25', '1.5', '2']
Observação: os valores devem ser informados na ordem em que se deseja que sejem listados. O valor Normal poderá ser substituído por 1, porém, ele sempre será mostrado como Normal.
É necessário que o valor playbackRateEnable esteje ativado.
Velocidade inicial do vídeo
Valor padrão 1
Objeto com os dados a serem renderizados na área de Próximo Vídeo, este parâmetro não é obrigatório para utilizar a funcionalidade. É possível enviar somente a função a ser executada.
{
title: 'Texto a ser exibido',
description: 'Descrição'
}
Array com itens que compõem a lista de reprodução, devem ser informados já ordenados
Os itens devem ser informados como objetos
{
id: int // Identificador, será enviado a função informada,
playing: boolean // Utilizado para diferenciar o item que está em reprodução no momento
}
Função disparada no momento em que o vídeo se tornar pronto para reprodução.
Ela tem a mesma função do evento onCanPlay() da tag <video>, recebendo os mesmo parâmetros da função.
Função disparada a cada alteração de frames do vídeo.
Ela tem a mesma função do evento onTimeUpdate() da tag <video>, recebendo os mesmo parâmetros da função.
Função disparada ao término do vídeo
Ela tem a mesma função do evento onEnded() da tag <video>, recebendo os mesmo parâmetros da função.
Função disparada quando um erro acontecer na reprodução/busca do vídeo.
Ela tem a mesma função do evento onErrorVideo() da tag <video>, recebendo os mesmo parâmetros da função.
Função disparada ao clicar no controle de Próximo Video, sem esse parâmetro o ícone não estará disponível
Função disparada ao selecionar um ítem da lista de reprodução criada com o parâmetro reprodutionList, será enviada a função o id relacionado ao item
Função disparada ao fechar o vídeo
Observações: O Fechar vídeo só estará disponível enquanto o vídeo não estiver pronto para reprodução.
Ele foi implementado como rota de fulga do usuário caso o vídeo demore muito a iniciar. O parâmetro não é obrigatório e a sua ausência não remove o ícone de fechar, sendo aconselhável a sua implementação.
Array com as qualidades da mídia em execução.
Não deve ser implemtado na atual versão do Player
Para alterar as cores do Player e fontes, utilize os seguintes parâmetros.
Cor de destaque para os intens primários, a cor padrão é a #03dffc para alterar informe a cor desejada em hexadecimal, rgb ou rgba.
Cor de destaque para os intens secundários, a cor padrão é a #ffffff para alterar informe a cor desejada em hexadecimal, rgb ou rgba.
Fonte informada para todos os textos do player
Valor padrão:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
Caso ocorra algum erro com o vídeo em execução, será renderizado a informação do erro, com a listagem de outros links, para que o usuário possa tentar reproduzir o vídeo em outra qualidade.
-
O botão de fechar é exibido
-
A função onErrorVideo será disparada.
Quando o mouse não se move por mais de 5 segundos, automáticamente os controlles são ocultados em tela, voltando a aparecer ao mover o cursor.
O standby, é uma tela visível quando o vídeo está pausado e não existe movimentos do cursor.
Ao mover o mouse, ou executar o play pelo space o modo é desativado.
Quando o vídeo está buscando frames para reprodução e não existem frames suficientes o loading é ativado.
Ativa/Desativa o FullScreen (Tela cheia).
Dispara o evento Pause/Play
Ao exibir o componente, ele inicia a busca dos dados do vídeo, até o vídeo estar pronto para reprodução.
Controles disponível com o vídeo em execução.
Observações: Player configurado com todas as propriedades aceitáveis, no modo FullScreen
Player PAUSADO em estado de standby, as informações do título são renderizadas.
Para testar/desenvolver o projeto siga os seguintes passos.
yarn ⬇ Baixe aqui.
Git ⬇ Baixe aqui.
Com o yarn instalado, faça o clone do projeto
git clone https://github.com/Lucasmg37/react-netflix-player
Navegue até a pasta do projeto e instale as dependências
yarn
Terminado, você já pode começar a desenvolver
Servidor de testes local removido temporariamente.
⚠️
Para fazer o build, execute
yarn run build
O arquivo final estará disponível na pasta dist
Chegou a hora de virar um contribuidor! Siga estes passos.
- Faça um fork do projeto.
- Crie uma nova branch com as suas alterações:
git checkout -b my-feature - Salve as alterações e crie uma mensagem de commit contando o que você fez:
git commit -m "feature: My new feature" - Envie as suas alterações:
git push origin my-feature
Em pouco tempo você será retornado.
Caso tenha alguma dúvida confira este guia de como contribuir no GitHub
 @Prophetaa |
 @lfoliveir4 |
 @romilodev |
 @ridhwaans |
|---|
Este projeto esta sobe a licença MIT.
Feito com ❤ e ☕ por Lucas Dias. 👋🏽 Entre em contato!