Introdução ao plug-in de reprodução de vídeo HTML5 video.js

video.js é um plug-in de reprodução de vídeo HTML5 muito popular. É muito adequado para reproduzir vídeos em terminais móveis (como páginas da web WeChat). Possui funções poderosas, suporta downgrade para flash e é compatível com IE8. Site oficial: http://videojs.com/git&demo: http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip

controles representa a barra de controle, prload: pré-carregamento e pôster representa a imagem inicial exibida. o conjunto de dados suporta o uso de json para definir alguns parâmetros. Escusado será dizer que a fonte se refere às legendas.

Assim sai, mas na realidade temos outras necessidades.

Você precisa aplicar o js do novtt, que está no arquivo alt da demonstração. Desta forma a seleção de letras não aparecerá na barra de controle do vídeo. É claro que você não precisa mais do elemento track na página.

 <link href=~/js/video-js-5.11.4/alt/video-js-cdn.min.css rel=stylesheet /><script src=~/js/video-js-5.11.4/alt/ video.novtt.min.js></script>

Comecei a configurá-lo sozinho usando css, mas descobri que nada funcionava. Os elementos de vídeo são diferentes dos elementos comuns porque precisam atingir largura e altura responsivas definindo a proporção dos elementos internos. video.js fornece dois métodos.

js: Defina um fluido como verdadeiro.

 var player = videojs('video', { fluid: true }, function () { console.log('Pronto!'); this.play(); // se você não confia na reprodução automática por algum motivo } )

Mas isso também requer a definição de uma largura e altura iniciais para o elemento de vídeo, caso contrário a imagem inicial não será visível.

css: os estilos podem ser adicionados diretamente. Existem três tipos: .vjs-fluid, .vjs-4-3, .vjs-16-9. O primeiro será calculado automaticamente e os dois últimos especificam a proporção. O estilo também precisa definir a largura e a altura iniciais para exibir a imagem.

 <video id=video class=video-js vjs-default-skin vjs-fluid poster=http://vjs.zencdn.net/v/oceans.png width=375 height=200 controles preload=none data-setup=' { html5: { nativeTextTracks: false } }'> <source [email protected] type=video/mp4> <p class=vjs-no-js> JavaScript precisa estar habilitado para reproduzir vídeos. É recomendado usar um navegador <a href=http://videojs.com/html5-video-support/ target=_blank> que suporte HTML5<. /a> para acessar. </p> </vídeo>

Atenção ao evento:

Geralmente nos concentramos nos três eventos de início, pausa e fim

 var player = videojs('video', { }, function () { console.log('Pronto!'); //this.play(); // se você não confia na reprodução automática por algum motivo }) ; player.on('play', function () { console.log('Iniciar/Retomar reprodução'); }); player.on('pause', function () { console.log('Pausar reprodução'); }); player.on('terminado', function () { console.log('Terminou a reprodução'); });

Existem também eventos de atualização:

 player.on('timeupdate', function() { console.log(player.currentTime()); });

Você pode determinar se o vídeo termina julgando se o tempo atual e o tempo total são iguais:

 player.on('timeupdate', function () { // Se currentTime() === Duration(), a reprodução do vídeo terminou if (player.duration() != 0 && player.currentTime() === player .duration()) { // Fim da reprodução} });

Alguns idosos apontaram que o evento finalizado não é acionado corretamente em dispositivos Android (esteja preparado primeiro).

A configuração MIME padrão do iis não adiciona o tipo mp4. Não haverá problemas com a reprodução local, mas ocorrerá um erro 404 quando chegar ao servidor. Isso requer a configuração do MIME no iis:

O formato flv é adicionado com a extensão associada: .flv, tipo de conteúdo: application/octet-stream

O formato f4v é extensão: .f4v, tipo de conteúdo: application/octet-stream

O formato mp4 é extensão: .mp4, tipo de conteúdo: video/mp4

O formato ogv é extensão: .ogv, tipo de conteúdo: video/ogg

O formato webm é extensão: .webm, tipo de conteúdo: video/webm

Reinicie o iis após a configuração para entrar em vigor.

O oficial forneceu um endereço codepen http://codepen.io/heff/pen/EarCt que você pode editar e brincar. Principalmente o botão play, barra de controle e barra de progresso. O padrão é o acima.

Também existe este: http://codepen.io/zanechua/pen/GozrNe SublimeVideo

A tecnologia de reprodução é usada para reproduzir arquivos de vídeo ou áudio em navegadores ou plug-ins. Se for h5, usará elementos de vídeo ou áudio. Se for flash, definirá um flash player. Não apenas flash, mas também suporta Silverlight, Quicktime e outras tecnologias para reprodução. A configuração de dados pode ser definida diretamente no elemento. Especifique as tecnologias suportadas.

 <video data-setup='{techOrder: [html5, flash, outra tecnologia suportada]}'

Ou use JavaScript:

 videojs(videoID, { techOrder: [html5, flash, outra tecnologia suportada]});

A regra padrão aqui é que a primeira tecnologia será usada para jogar e, se falhar, as opções subsequentes serão usadas. Por exemplo, se html5 for escrito em primeiro lugar acima, todos os vídeos serão reproduzidos usando html5. Se quisermos que o flash tenha prioridade, basta colocá-lo na frente:

 data-setup='{techOrder: [flash,html5] }'

Nos elementos da página você descobrirá que video.js nos fornece o objeto flash que usamos.

Adicione o atributo autoplay ao elemento video ou adicione autoplay:true a js

 <video id=video autoplay poster=/images/bk.png width=375 height=200 controles preload=none > </video>

ou

 var player = videojs('video', { autoplay:true }, function () { console.log('Pronto para ir!'); //this.play(); // Seguro, você também pode chamar ativamente play( ) });

A reprodução automática é sempre irritante, então o oposto é excluir o atributo de reprodução automática ou defini-lo como falso.

outro:

video.js suporta plug-ins de extensão, o que é muito conveniente de usar.

 //Definir uma função de plug-in examplePlugin(options) { this.on('play', function (e) { console.log('playback has start!'); }); //Registrar videojs.plugin(' exemploPlugin' , exemploPlugin); // Use player.examplePlugin({ exemploOption: true });

A API do player pode ser chamada diretamente dentro do plug-in. Existe um plug-in de lista de reprodução que você pode estudar se precisar de uma lista de reprodução. https://github.com/brightcove/videojs-playlist e http://videojs.com/advanced/ têm este efeito:

O texto acima é a introdução do plug-in de reprodução de vídeo HTML5 video.js introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. . Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!