play pause html5 video javascript

Eu tenho uma function que reproduz um vídeo quando clico na imagem do pôster exibida no player e parece funcionar:

var video = document.getElementById('player'); video.addEventListener('click',function(){ video().play(); },false); 

Na tag de vídeo html5 eu tenho algo como: id = “player” onclick = “this.play ();”

o problema é se eu pressiono a pausa nos controles de vídeo na verdade pausar o que é bom, mas se eu pressionar o que é agora o botão play nos controles de vídeo, posso ver o botão mudar para pausa novamente por uma fração de segundo de volta a ser um botão de play novamente. Então eu pressiono o play e ele só toca por alguns frames e depois volta a ser pausado. A única maneira de fazê-lo tocar novamente é clicar na área de visualização do vídeo.

Como posso fazer isso parar de voltar a pausar ao usar o botão play / pause da barra de controle, e como posso fazê-lo pausar quando clico na área de exibição de vídeo?

Eu tentei o seguinte, mas não funciona:

 var video = document.getElementById('player'); video.addEventListener('click',function(){ if(video.paused){ video().play(); }else{ video.pause(); } },false); 

O motivo pelo qual eu quero que o vídeo seja reproduzido ao pressionar a área de visualização real é que é muito difícil localizar o minúsculo botão de play controlbar no Android porque é tão pequeno que seria mais fácil para as pessoas simplesmente pressionar a área de visualização para obter Está indo. No Firefox, o player de vídeo é reproduzido quando clico na área de visualização, além de fazer uma pausa, o que é exatamente o que eu quero que aconteça, além de fazer isso sem precisar de nenhum javascript. No Android, o vídeo simplesmente não será reproduzido quando eu pressionar a área de visualização. Então eu estou basicamente tentando forçar o navegador Android a se comportar como o Firefox faz nativamente.

Alguma ideia?

 $('#play-pause-button').click(function () { if ($("#media-video").get(0).paused) { $("#media-video").get(0).play(); } else { $("#media-video").get(0).pause(); } }); 

Bem, eu fiz isso no JQuery, que simples e rápido. você pode tentar. só precisa usar o ID da tag de vídeo e seu botão play / pause

EDIT: na baunilha JavaScript: vídeo não é uma function, mas parte do DOM, portanto, usar

  video.play(); 

ao invés de

 video().play() **wrong** 

Pelo que vejo, o vídeo não é uma function, então por que você tem parênteses? Esse é o seu erro.

Então, ao invés de video() use video

Esta é a solução mais fácil

 this.on("pause", function () { $('.vjs-big-play-button').removeClass( 'vjs-hidden' ).css('display', 'block'); this.one("play", function () { $('.vjs-big-play-button').addClass( 'vjs-hidden' ).css('display', ''); }); }); 

Esse tipo de trabalho (usando jquery) para mim no Chrome v22, Firefox v15 e IE10:

 $('video').on('click', function (e) { if (this.get(0).paused) { this.get(0).play(); } else { this.get(0).pause(); } e.preventDefault(); }); 

O preventDefault aqui parou o problema de salto de quadro que você vê, mas depois quebra os outros botões na seção de controle, como canvas cheia, etc.

Parece que não há um motivo fácil para isso? Eu teria pensado que os fornecedores teriam clicado para jogar por padrão, parece a coisa lógica a fazer. : |

 $('#video-id').click(function() { // jQuery sets this as the DOM element that triggered the event // no need to wrap it in jQuery $(this) and unwrap it again $(this).get(0) if (this.paused) { this.play(); } else { this.pause(); } }); 

Esta é, acredito, a maneira mais simples e fácil de escrever o que você está tentando alcançar:

 var myVideo = document.getElementById('exampleVideo'); $(myVideo).click(function toggleVideoState() { if (myVideo.paused) { myVideo.play(); console.log('Video Playing'); } else { myVideo.pause(); console.log('Video Paused'); } }); 

Logar no console é, obviamente, apenas para ilustração.