Reproduzir / pausar vídeo HTML 5 usando JQuery


206

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

Respostas:


356

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


5
Isso é ótimo, funciona perfeitamente, obrigado mesmo. É bom entender melhor o DOM também.
precisa saber é o seguinte

1
O uso do JQuery para controlar o vídeo dessa maneira parece causar problemas com a reprodução no iPhone. Eu tenho o elemento de vídeo em uma guia, o jquery revela isso, mas clicar na seta de início do vídeo não inicia o clipe. Quando removo a linha $ ('# videoId'). Get (0) .play (), não há problema. Qual é a melhor maneira de contornar isso? Eu estava pensando que poderia remover os js com uma declaração condicional para iOS - o vídeo não será iniciado automaticamente para dispositivos iOS, então seria um prazer fazê-lo - ou existe uma solução mais simples? Qualquer ajuda muito apreciada.
precisa saber é o seguinte

Como faço para pausar todos os elementos <video> em uma página?
Prismpecs

5
@russellsayshi - não, isso reproduz apenas UM vídeo; prismspecs pediu TODOS os vídeos. Sintaxe correta: $('video').each(this.play());para reproduzir tudo; $('video').each(this.pause());pausar tudo. each()é uma função jQuery, o que é passado para ela é uma função javascript, aplicada a cada elemento. À medida que cada elemento é tratado, thisrepresenta esse elemento.
Página Inicial>

11
Se você quer apenas o primeiro elemento, pode simplificar substituindo .get(0)por [0]. Então, $('video')[0].play();ou para um ID específico $('#videoId')[0].play();.
Página Inicial>

56

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'


7
Note que não há nenhuma necessidade para embrulhar em jQuery que você possa salvar a sobrecarga substituindo a linha ternário com este:this.paused ? this.play() : this.pause();
Pete Watts

56

Você pode fazer

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

2
Você pode até alternar: $ ('video'). Trigger ($ ('video'). Prop ('paused')? 'Play': 'pause');
Darío Pm

21

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();

Confira a solução do lonesomeday se você insistir em uma implementação do jQuery (também para uma explicação de por que você não pode simplesmente chamar playum objeto jQuery).
sudo work

Eu estava pensando em usar o código em outro jQuery e provavelmente o fará, mas como está, estou apenas usando essa linha, então acho que poderia ter sido feito com o código que eu tinha ... também não tinha certeza se isso era uma boa prática para misturar. Obrigado pelo conselho de qualquer maneira.
Barny83

2
Se você já tiver instanciado um objeto jQuery para movie1através $('movie1')de outras ações jQuery, então é bom; no entanto, se você estiver fazendo isso apenas neste local, encontrará uma perda de desempenho. Pode não ser perceptível o suficiente, mas eu gosto de otimizar muito.
sudo work

@sudowork - sério? você está discutindo a perda de desempenho ao iniciar a reprodução de um vídeo? Se o seu dispositivo for rápido o suficiente para reproduzir vídeo, é rápido o suficiente para executar várias ações do jQuery sem que o usuário perceba.
Página Inicial>

19

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.


4
Você pode fazer o mesmo da seguinte forma: $ ("video"). Each (function () {this.pause ()});
Marcel M.

1
$ (this) -> você cria o objeto jquery a partir deste "objeto". get (0) -> você recebe de volta o original "este" objeto do objeto jQuery ... este === $ (this) .get (0)
Blackfire

14

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.


12

Eu gosto deste:

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

Espero que ajude.


4

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

3

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


1

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.


1

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();

0

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


2
"Estou tentando reproduzir os videoclipes quando sua guia é clicada" - portanto, é necessário um tratamento controlado por eventos.
Davidenke

0

Eu também fiz funcionar assim:

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


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

Por favor, adicione algumas explicações à sua resposta
Sahil Mittal

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

Olá, bem-vindo ao Stack Overflow. Ao responder a uma pergunta que já tem muitas respostas, adicione algumas dicas adicionais sobre por que a resposta que você está fornecendo é substantiva e não simplesmente ecoando o que já foi examinado pelo pôster original. Isso é especialmente importante nas respostas "somente código", como as que você forneceu.
chb

-1

var vid = document.getElementById("myVideo"); 
function playVid() { 
  vid.play(); 
} 
function pauseVid() { 
  vid.pause(); 
} 
<video id="myVideo" width="320" height="176">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 


Solução em sua resposta não parece estar funcionando
Cray
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.