Reproduzir / pausar vídeo HTML 5 usando JQuery

Estou tentando controlar vídeos HTML5 usando JQuery. Eu tenho dois clipes em uma interface com guias, existem seis guias no total, os outros apenas têm imagens. Estou tentando reproduzir os videoclipes quando sua guia é clicada e depois parar quando qualquer uma das outras é clicada.

Isso deve ser uma coisa simples de fazer, mas não consigo fazê-lo funcionar, o código que estou usando para reproduzir o vídeo é:

$('#playMovie1').click(function(){
  $('#movie1').play();
      });

Eu li que o elemento video precisa ser exposto em uma função para poder controlá-lo, mas não consegue encontrar um exemplo. Eu sou capaz de fazê-lo funcionar usando JS:

document.getElementById('movie1').play();

Qualquer conselho seria ótimo. obrigado

Sua solução mostra o problema aqui - playnão é uma função jQuery, mas uma função do elemento DOM. Portanto, você precisa chamá-lo no elemento DOM. Você fornece um exemplo de como fazer isso com as funções DOM nativas. O equivalente ao jQuery - se você quiser fazer isso para se ajustar a uma seleção existente do jQuery - seria $('#videoId').get(0).play(). ( getobtém o elemento DOM nativo da seleção do jQuery.)

Foi assim que consegui fazê-lo funcionar:

jQuery( document ).ready(function($) {
    $('.myHTMLvideo').click(function() {
        this.paused ? this.play() : this.pause();
    });
});

Todas as minhas tags HTML5 têm a classe 'myHTMLvideo'

Você pode fazer

$('video').trigger('play');
$('video').trigger('pause');

Por que você precisa usar o jQuery? Sua solução proposta funciona e provavelmente é mais rápido do que construir um objeto jQuery.

document.getElementById('videoId').play();

Para pausar vários vídeos, descobri que isso funciona muito bem:

$("video").each(function(){
    $(this).get(0).pause();
});

Isso pode ser colocado em uma função de clique, o que é bastante útil.

Como uma extensão da resposta do dia solitário, você também pode usar

$('#playMovie1').click(function(){
    $('#movie1')[0].play();
});

Observe que não há nenhuma função jQuery get () ou eq () chamada. A matriz do DOM usada para chamar a função play (). É um atalho para se ter em mente.

Eu gosto deste:

$('video').click(function(){
    this[this.paused ? 'play' : 'pause']();
});

Espero que ajude.

Eu uso o FancyBox e o jQuery para incorporar um vídeo. Dê um ID.

Talvez a melhor solução não seja alternar entre reproduzir / pausar de maneira 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>`

Este é o método fácil que podemos usar

no botão jquery, clique na função

$("#button").click(function(event){
    $('video').trigger('play');
    $('video').trigger('pause');
}

obrigado

Apenas como uma nota, verifique se o navegador suporta a função de vídeo antes de tentar invocá-la:

if($('#movie1')[0].play)
    $('#movie1')[0].play();

Isso evitará erros de JavaScript em navegadores que não suportam a tag de vídeo.

Por JQuery usando seletores

$("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');

Por Javascript usando ID

video_ID.play();  video_ID.pause();

OU

document.getElementById('video_ID').play();  document.getElementById('video_ID').pause();

usa isto.. $('#video1').attr({'autoplay':'true'});

Eu também fiz funcionar assim:

$(window).scroll(function() {
    if($(window).scrollTop() > 0)
        document.querySelector('#video').pause();
    else
        document.querySelector('#video').play();
});

O @loneSomeday explicou lindamente, aqui uma solução que também pode lhe dar uma boa idéia de como obter a funcionalidade de reprodução / pausa

reproduzir / pausar vídeo ao clicar

<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> 

    enter code here
<form class="md-form" action="#">
  <div class="file-field">
    <div class="btn btn-primary btn-sm float-left">
      <span>Choose files</span>
      <input type="file" multiple>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Upload one or more files">
    </div>
  </div>
</form>

<video  width="320" height="240" id="keerthan"></video>

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 
<script>
    (function localFileVideoPlayer() {

  var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')




    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()
function playVid() { 
  keerthan.play(); 
} 

function pauseVid() { 
  keerthan.pause(); 
} 

</script>