Esse compartilhamento é um player de vídeo personalizado com base no rótulo HTML5. Entre eles, são implementadas as funções como reprodução, arrasto de progresso, controle de volume e tela cheia.
VisualizaçãoClique em mim para ver o armazém de código -fonte.
Ideia centralAcredito que alguns sapatos de crianças que não foram expostos a fazer jogadores personalizados ficarão aqui para rótulos.
<Video Controls = Controls AutoPlay = AutoPlay> <fonte src = Movie.ogg Type = Video/Ogg/> </Video>
A propriedade Controls está configurada para exibir a própria barra de controle de um navegador na interface. Se não houver demanda por interface do usuário, seu controlador construído já poderá atender à maioria das necessidades. Claro, se assim for, você não verá esse compartilhamento =. =
Ocultar a barra de controle e simularEm seguida, a chave do jogador que implementa uma função personalizada é que não usamos o controlador nativo para ocultar. nós, bem como os dados de interface do usuário de simulação correspondentes e de reprodução de vídeo do comportamento operacional do usuário.
O uso de várias funções e atributos principaisMyVid = document.getElementById (vídeo1); .DURATION // Retorna o comprimento total do vídeo // Ventio de simulação Volume MyVid.Volume // Volume // Após obter o vídeo, ele é determinado quando é alterado do carregamento para reproduzir myVid.ReadyState // 0 = Have_nothing -No Sobre o áudio/se o vídeo está pronto // 1 = Have_metadata -Sobre áudio/vídeo em metadados // 2 = Have_current_data -data sobre o local de reprodução atual está disponível, mas não há dados suficientes para reproduzir o próximo quadro/milissegundo /// 3 = Have_future_data -A corrente e pelo menos o próximo quadro dos dados estão disponíveis // 4 = Have_enough_data -dados disponíveis são suficientes para começar a reproduzir
Em todos os pontos -chave da implementação, mais tedioso é a simulação da barra de progresso. Entre eles, os atributos de duração e duração da rótulo de vídeo são usados para calcular a posição da barra de progresso em relação ao comprimento total até o tempo de reprodução atual e o tempo total de reprodução. Ao mesmo tempo, a duração do usuário na configuração final do usuário também pode ser usada para reverter a posição do vídeo neste momento.
Arraste a ideia de código // Código do núcleo Var dragdis = 0Var ProcesWidth = xxx // Comprimento total da barra de arrasto ('corpo'). renderizado no mesmo local videosource.pause ()}). (esquerda <0) {esquerda = 0} dragTarget.css ({esquerda: esquerda}) dragprocess.css ({width: esquerda}).). Lwidth * duração // calcule a posição de reprodução correta do vídeo após a arrastamentoO controle do volume é basicamente o mesmo que o comportamento acima.
Controle a animação de carregamento antes de jogar consultando o estado de streaming de vídeo function ifstate () {var state = videosource.readyState if (state === 4) {// 状态为 4 即可播放 videoPlayer ()} else {$ ('. ('Body'). fState, 10)}} setTimeout (ifState, 10)A parte do controle principal foi concluída. As funções básicas de todo o player de vídeo são realizadas.
O acima é todo o conteúdo deste artigo.