Video.js é um reprodutor de vídeo de código aberto completo para todas as plataformas baseadas na web.
Imediatamente, o Video.js oferece suporte a todos os formatos de mídia comuns usados na web, incluindo formatos de streaming como HLS e DASH. Funciona em desktops, dispositivos móveis, tablets e Smart TVs baseadas na web. Ele pode ser ampliado e personalizado por um ecossistema robusto de plug-ins.
Video.js foi iniciado em meados de 2010 e agora é usado em mais de 50.000 100.000 200.000 400.000 700.000 800.000 sites.
Graças ao pessoal incrível do Fastly, existe uma versão gratuita do Video.js hospedada em CDN que qualquer pessoa pode usar. Adicione estas tags ao <head>
do seu 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, você pode incluir Video.js obtendo-o do npm, baixando-o das versões do GitHub ou incluindo-o via unpkg ou outro CDN 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 seguir, usar Video.js é tão simples quanto criar um elemento <video>
, mas com um atributo adicional data-setup
. No mínimo, esse atributo deve ter um valor '{}'
, mas pode incluir qualquer opção do Video.js - apenas certifique-se de que contém 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 >
Quando a página carregar, Video.js encontrará esse elemento e configurará automaticamente um player em seu lugar.
Se não quiser usar a configuração automática, você pode deixar de fora o atributo data-setup
e inicializar um elemento <video>
manualmente usando a função videojs
:
var player = videojs ( 'my-player' ) ;
A função videojs
também aceita um objeto options
e um retorno de chamada para ser invocado quando o player estiver pronto:
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?!' ) ;
} ) ;
} ) ;
Se você estiver pronto para começar, a página de primeiros passos e a documentação são os melhores lugares para obter mais informações. Se você tiver dúvidas, vá para o nosso Slack!
Video.js é uma biblioteca gratuita e de código aberto, e agradecemos qualquer ajuda que você esteja disposto a fornecer - seja corrigindo bugs, melhorando a documentação ou sugerindo novos recursos. Confira o guia de contribuição para mais!
Video.js usa BrowserStack para testes de compatibilidade.
Observe que este projeto é lançado com um Código de Conduta do Colaborador. Ao participar deste projeto você concorda em cumprir seus termos.
Video.js é licenciado sob a licença Apache, versão 2.0.
Video.js é uma marca registrada da Brightcove, Inc.