Video.js indique o ecrã completo ao tocar
Exemplo:
player1 = _V_('video-1');
player1.on("play",
function () {
this.requestFullScreen();
});
player1.on("ended",
function () {
this.cancelFullScreen();
});
o código gera este erro:
Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'
4 answers
Primeiro, você não pode ir para o ecrã completo dentro de um controlador de eventos 'play'. Para segurança e boa experiência do usuário, os navegadores só lhe permitirão ativar o ecrã completo dentro de um evento ativado pelo usuário, como um 'clique'. Você não pode ter todas as páginas da web indo para tela cheia assim que você visita-lo, e você pode fazer com que um vídeo para começar a jogar automaticamente, o que violaria essa regra. Então você precisa mover isso para um controlador 'click' sobre a jogada real botao.
O segundo é um grande problema com o vídeo.js 4.0.x, que é que é minificado usando o compilador de Encerramento do Google com optimizações avançadas . Muitas das propriedades e métodos públicos são ofuscados, tornando-os difíceis/impossíveis de usar. Neste caso,requestFullScreen é agora player1.Pa(). E, tanto quanto sei, não existe.
Aqui estão algumas opções para Como lidar com isto:
Usar o nome do método ofuscado. Eu não ... recomende isto, porque a) o nome irá mudar com cada actualização de versão menor (por exemplo, 4.0.5) e b) irá tornar o seu código ilegível, e C) Você não pode usar
cancelFullScreen.Arranja um vídeo de cópia não minificado.js e apresenta-o tu. (Você pode usar Uglify ou outro minifier que não vai mexer com os nomes do método.) Video.js não fornece este arquivo, então você tem que clonar o git repo e executar o script de compilação você mesmo. E você não tem a vantagem de usar o vídeo.CDN da js para livre.
Utilize uma versão mais antiga do vídeo.js e espera até às 4.o x está pronto para o horário nobre.
Não uses vídeo.js de todo. Considere o jPlayer e o jwPlayer ou role o seu próprio.
Update: parece que este problema em particular foi corrigido, mas ainda não chegou ao lançamento.
<a class="enter-fullscreen" href="#">Play fullscreen</a>
E a parte js:
<script type="text/javascript">
$('.enter-fullscreen').click(function(e) {
e.preventDefault();
$('.vjs-play-control').click();
$('.vjs-fullscreen-control').click();
});
</script>
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
E adicionar
BigPlayButton.prototipo.handleClick = function handleClick (event) { var playPromise = this.player_.play();
document.getElementsByClassName('vjs-fullscreen-control')[0].click()
// exit early if clicked via the mouse
if (this.mouseused_ && event.clientX && event.clientY) {
silencePromise(playPromise);
return;
}
Uma maneira fácil de resolver o problema:
document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)
O vídeo vai em ecrã completo e o evento regular do botão play faz com que ele comece a tocar.