video.js
Unknown
Video.js es un reproductor de vídeo de código abierto y con todas las funciones para todas las plataformas web.
Desde el primer momento, Video.js admite todos los formatos multimedia comunes utilizados en la web, incluidos formatos de transmisión como HLS y DASH. Funciona en computadoras de escritorio, dispositivos móviles, tabletas y televisores inteligentes basados en web. Puede ampliarse y personalizarse aún más mediante un sólido ecosistema de complementos.
Video.js se inició a mediados de 2010 y ahora se utiliza en más 50.000 100.000 200.000 400.000 700.000 800.000 sitios web.
Gracias a la fantástica gente de Fastly, existe una versión gratuita alojada en CDN de Video.js que cualquiera puede utilizar. Agregue estas etiquetas al <head> de su documento:
< link href =" //vjs.zencdn.net/8.19.1/video-js.min.css " rel =" stylesheet " >
< script src =" //vjs.zencdn.net/8.19.1/video.min.js " > </ script >Alternativamente, puede incluir Video.js obteniéndolo de npm, descargándolo de las versiones de GitHub o incluyéndolo mediante unpkg u otro CDN de JavaScript, como CDNjs.
<!-- unpkg : use the latest version of Video.js -->
< link href =" https://unpkg.com/video.js/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg.com/video.js/dist/video.min.js " > </ script >
<!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) -->
< link href =" https://unpkg.com/[email protected]/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg.com/[email protected]/dist/video.min.js " > </ script >
<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
< link href =" https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video-js.min.css " rel =" stylesheet " >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video.min.js " > </ script > A continuación, usar Video.js es tan simple como crear un elemento <video> , pero con un atributo data-setup adicional. Como mínimo, este atributo debe tener un valor de '{}' , pero puede incluir cualquier opción de Video.js; ¡solo asegúrese de que contenga JSON válido!
< video
id =" my-player "
class =" video-js "
controls
preload =" auto "
poster =" //vjs.zencdn.net/v/oceans.png "
data-setup =' {} ' >
< source src =" //vjs.zencdn.net/v/oceans.mp4 " type =" video/mp4 " > </ source >
< source src =" //vjs.zencdn.net/v/oceans.webm " type =" video/webm " > </ source >
< source src =" //vjs.zencdn.net/v/oceans.ogv " type =" video/ogg " > </ source >
< p class =" vjs-no-js " >
To view this video please enable JavaScript, and consider upgrading to a
web browser that
< a href =" https://videojs.com/html5-video-support/ " target =" _blank " >
supports HTML5 video
</ a >
</ p >
</ video >Cuando se carga la página, Video.js encontrará este elemento y configurará automáticamente un reproductor en su lugar.
Si no desea utilizar la configuración automática, puede omitir el atributo data-setup e inicializar un elemento <video> manualmente usando la función videojs :
var player = videojs ( 'my-player' ) ; La función videojs también acepta un objeto options y una devolución de llamada que se invocará cuando el reproductor esté listo:
var options = { } ;
var player = videojs ( 'my-player' , options , function onPlayerReady ( ) {
videojs . log ( 'Your player is ready!' ) ;
// In this context, `this` is the player that was created by Video.js.
this . play ( ) ;
// How about an event listener?
this . on ( 'ended' , function ( ) {
videojs . log ( 'Awww...over so soon?!' ) ;
} ) ;
} ) ;Si está listo para sumergirse, la página de introducción y la documentación son los mejores lugares a los que acudir para obtener más información. Si te quedas atascado, ¡dirígete a nuestro Slack!
Video.js es una biblioteca gratuita y de código abierto, y agradecemos cualquier ayuda que esté dispuesto a brindar, ya sea corrigiendo errores, mejorando la documentación o sugiriendo nuevas funciones. ¡Consulta la guía de contribución para obtener más información!
Video.js utiliza BrowserStack para realizar pruebas de compatibilidad.
Tenga en cuenta que este proyecto se publica con un Código de conducta para colaboradores. Al participar en este proyecto, usted acepta cumplir con sus términos.
Video.js tiene la licencia Apache, versión 2.0.
Video.js es una marca registrada de Brightcove, Inc.
