Reproduzir / pausar o vídeo HTML 5 Usando o JQuery
isto deve ser uma coisa simples de se fazer, mas parece que não consigo fazê-lo funcionar, o código que estou a usar para reproduzir o vídeo é:
$('#playMovie1').click(function(){
$('#movie1').play();
});
document.getElementById('movie1').play();
15 answers
A sua solução mostra o problema aqui -- {[[0]} não é uma função jQuery, mas uma função do elemento DOM. Por conseguinte, tem de recorrer ao elemento DOM. Você dá um exemplo de como fazer isso com as funções dom nativas. O equivalente jQuery -- se você quisesse fazer isso para se encaixar com uma seleção jQuery existente -- seria $('#videoId').get(0).play(). (get obtém o elemento DOM nativo da selecção jQuery.)
jQuery( document ).ready(function($) {
$('.myHTMLvideo').click(function() {
this.paused ? this.play() : this.pause();
});
});
Todas as minhas etiquetas HTML5 têm a classe "myHTMLvideo"
Podes fazer
$('video').trigger('play');
$('video').trigger('pause');
document.getElementById('videoId').play();
$("video").each(function(){
$(this).get(0).pause();
});
Isto pode ser colocado numa função click que é bastante útil.
Como extensão da resposta do lonesomeday, também pode usar
$('#playMovie1').click(function(){
$('#movie1')[0].play();
});
Observe que não há nenhuma função get() ou eq () jQuery chamada. Dom's array used to call play() function. É um atalho para ter em mente.
$('video').click(function(){
this[this.paused ? 'play' : 'pause']();
});
Uso o FancyBox e o jQuery para incorporar um vídeo. Dá-lhe uma identificação.
Talvez não seja a melhor solução para alternar o jogo / pausa de forma diferente - mas fácil para mim e funciona! :)
No
`
<input type="hidden" id="current_video_playing">
<input type="hidden" id="current_video_status" value="playing">
<video id="video-1523" autobuffer="false" src="movie.mp4"></video>
<script>
// Play Pause with spacebar
$(document).keypress(function(e) {
theVideo = document.getElementById('current_video_playing').value
if (e.which == 32) {
if (document.getElementById('current_video_status').value == 'playing') {
document.getElementById(theVideo).pause();
document.getElementById('current_video_status').value = 'paused'
} else {
document.getElementById('current_video_status').value = 'playing'
document.getElementById(theVideo).play();
}
}
});
</script>`
Como nota, certifique-se que verifica se o navegador suporta a função de vídeo, antes de tentar invocá-la:
if($('#movie1')[0].play)
$('#movie1')[0].play();
Isso irá evitar erros de JavaScript em navegadores que não suportam a marca de vídeo.
Usa isto..
$('#video1').attr({'autoplay':'true'});
$(window).scroll(function() {
if($(window).scrollTop() > 0)
document.querySelector('#video').pause();
else
document.querySelector('#video').play();
});
@loneSomeday explicou-o lindamente, aqui uma solução que também lhe pode dar uma boa ideia de como atingir a funcionalidade de reprodução/pausa
By JQuery using selectors
$("video_selector").trigger('play');
$("video_selector").trigger('pause');
$("div.video:first").trigger('play');$("div.video:first").trigger('pause');
$("#video_ID").trigger('play');$("#video_ID").trigger('pause');
By Javascript using ID
video_ID.play(); video_ID.pause();
Ou
document.getElementById('video_ID').play(); document.getElementById('video_ID').pause();
<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>
<script>
$(document).ready(function(){
document.getElementById('vid').play(); });
</script>
Estes são os métodos fáceis que podemos usar
No botão jquery, carregue na função
$("#button").click(function(event){
$('video').trigger('play');
$('video').trigger('pause');
}