video.js es un complemento de reproducción de vídeo HTML5 muy popular. Es muy adecuado para reproducir videos en terminales móviles (como páginas web WeChat). Tiene funciones potentes, admite la degradación a flash y es compatible con IE8. Sitio web oficial: http://videojs.com/git&demo: http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip
Eche un vistazo al ejemplo predeterminado:controles representa la barra de control, prload: precarga y poster representa la imagen mostrada inicial. El conjunto de datos admite el uso de json para establecer algunos parámetros. No hace falta decir que la fuente se refiere a los subtítulos.
Así sale, pero en realidad tenemos otras necesidades.
Sin subtítulos:Debe aplicar el js de novtt, que se encuentra en el archivo alt de la demostración. De esta forma la selección de letras no aparecerá en la barra de control de vídeo. Por supuesto, ya no necesitas el elemento de seguimiento en la página.
<link href=~/js/video-js-5.11.4/alt/video-js-cdn.min.css rel=hoja de estilo /><script src=~/js/video-js-5.11.4/alt/ video.novtt.min.js></script>Ancho y alto adaptables:
Empecé a configurarlo yo mismo usando CSS, pero descubrí que nada funcionaba. Los elementos de video se diferencian de los elementos ordinarios en que deben lograr un ancho y alto receptivos estableciendo la proporción de elementos internos. video.js proporciona dos métodos.
js: establece un fluido en verdadero.
var player = videojs('video', { fluid: true }, function () { console.log('¡Bueno!'); this.play(); // si no confías en la reproducción automática por algún motivo } )
Pero esto también requiere establecer un ancho y alto inicial para el elemento de video; de lo contrario, la imagen inicial no será visible.
css: los estilos se pueden agregar directamente. Hay tres tipos: .vjs-fluid, .vjs-4-3, .vjs-16-9. El primero se calculará automáticamente y los dos últimos especificarán la proporción. El estilo también necesita establecer el ancho y alto inicial para mostrar la imagen.
<video id=video class=video-js vjs-default-skin vjs-fluid poster=http://vjs.zencdn.net/v/oceans.png ancho=375 alto=200 controles precarga=ninguno configuración de datos=' { html5 : { nativoTextTracks : false } }'> <fuente src=@Model.Url tipo=video/mp4> <p class=vjs-no-js> Es necesario habilitar JavaScript para reproducir vídeos. Se recomienda utilizar un navegador <a href=http://videojs.com/html5-video-support/ target=_blank> que admita HTML5<. /a> para acceder. </p> </vídeo>
Atención de eventos:
Generalmente nos centramos en los tres eventos de inicio, pausa y final.
var player = videojs('video', { }, function () { console.log('¡Bueno!'); //this.play(); // si no confías en la reproducción automática por algún motivo }) ; player.on('reproducir', function () { console.log('Iniciar/Reanudar reproducción'); }); player.on('pausar', function () { console.log('Pausar reproducción'); }); player.on('finalizado', function () { console.log('Terminó la reproducción'); });
También hay eventos de actualización:
player.on('timeupdate', function() { console.log(player.currentTime()); });
Puedes determinar si el vídeo termina juzgando si el tiempo actual y el tiempo total son iguales:
player.on('timeupdate', function () { // Si currentTime() === duration(), el video ha terminado de reproducirse if (player.duration() != 0 && player.currentTime() === player .duration()) { // Fin de la reproducción} });
Algunas personas mayores señalaron que el evento finalizado no se activa correctamente en dispositivos Android (esté preparado primero).
Configuración de tipo MIMELa configuración predeterminada de iis MIME no agrega el tipo mp4. No habrá ningún problema con la reproducción local, pero se producirá un error 404 cuando llegue al servidor. Esto requiere configurar MIME en iis:
Formatos de vídeo comunes:El formato flv se agrega con la extensión asociada: .flv, tipo de contenido: aplicación/octeto-stream
El formato f4v tiene extensión: .f4v, tipo de contenido: aplicación/octeto-stream
El formato mp4 es extensión: .mp4, tipo de contenido: video/mp4
El formato ogv es extensión: .ogv, tipo de contenido: video/ogg
El formato webm es extensión: .webm, tipo de contenido: video/webm
Reinicie iis después de que la configuración surta efecto.
Personalización de estiloEl funcionario proporcionó una dirección de codepen http://codepen.io/heff/pen/EarCt con la que puedes editar y jugar. Principalmente el botón de reproducción, la barra de control y la barra de progreso. El valor predeterminado es el anterior.
También está este: http://codepen.io/zanechua/pen/GozrNe SublimeVideo
configuración de flashLa tecnología de reproducción se utiliza para reproducir archivos de video o audio en navegadores o complementos. Si es h5, utilizará elementos de video o audio. Si es flash, definirá un reproductor flash. No sólo flash, sino que también es compatible con Silverlight, Quicktime y otras tecnologías de reproducción. La configuración de datos se puede definir directamente en el elemento. Especifique las tecnologías compatibles.
<video data-setup='{techOrder: [html5, flash, otra tecnología compatible]}'
O use JavaScript:
videojs(videoID, { techOrder: [html5, flash, otra tecnología compatible]});
La regla predeterminada aquí es que se usará la primera tecnología para jugar y, si falla, se usarán las opciones posteriores. Por ejemplo, si html5 está escrito en primer lugar arriba, todos los videos se reproducirán usando html5. Si queremos que flash tenga prioridad, simplemente ponlo delante:
configuración-datos='{ techOrder: [flash,html5] }'
En los elementos de la página encontrarás que video.js nos proporciona el objeto flash que utilizamos.
Reproducción automática:Agregue el atributo de reproducción automática al elemento de video o agregue reproducción automática: verdadero a js
<video id=reproducción automática de video poster=/images/bk.png ancho=375 alto=200 controles precarga=ninguno > </video>
o
var player = videojs('video', { autoplay:true }, function () { console.log('¡Bueno!'); //this.play(); // Seguro, también puedes llamar activamente a play( ) });
La reproducción automática siempre es molesta, por lo que lo contrario es eliminar el atributo de reproducción automática o establecerlo en falso.
otro:
video.js admite complementos de extensión, lo cual es muy conveniente de usar.
//Definir una función de complemento examplePlugin(options) { this.on('play', function (e) { console.log('¡la reproducción ha comenzado!'); } } //Registrar videojs.plugin(' examplePlugin', examplePlugin); // Utilice player.examplePlugin({ exampleOption: true });
La API del reproductor se puede llamar directamente dentro del complemento. Hay un complemento de lista de reproducción que puedes estudiar si necesitas una lista de reproducción. https://github.com/brightcove/videojs-playlist y http://videojs.com/advanced/ tienen este efecto:
ResumirLo anterior es la introducción del complemento de reproducción de video HTML5 video.js presentado por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. . ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!