0

Estou tentando tentando pegar um elemento de vídeo pela CLASS,(algo que me parece bobo), Mas nao estou conseguindo, veja meu exemplo:

<script src="jquery-3.2.1.js"></script>

    <video   id="Video1" class="video-stream" src="https://www.html5rocks.com/pt/tutorials/video/basics/Chrome_ImF.mp4">
    </video>

    <div id="buttonbar">
        <button id="play"       onclick="vidplay()" >&gt;</button>
    </div>      


    <script>
      function vidplay() {
      // com JS e pegando pelo ID funciona bem:
      var video = document.getElementById("Video1");

      // com JS e pegando pela CLASS  nao vai...
        //var video = document.getElementsByClassName("video-stream");

      // com JQUERY NADA VAI! ..
      //var video = $("#Video1");
      //var video = $(".video-stream");

        // um teste....
            $.each( $( ".video-stream" ), function() {
                console.log( "  MESSAGE ====>  | id = " + this.id );
            });

      // o erro aparece quando dou play no video...
      video.play(); 
    }
    </script>

Eu preciso pegar aquele elemento de < vídeo > pela CLASSE dele... alguém sabe me dizer o que tem de errado aqui?

eis meu código

0

3 Respostas 3

5

O problema ao tentar dar play por classe nesse caso é que pode haver mais de um elemento com a mesma classe e tanto o jquery quanto o próprio getElementsByClassName não irão retornar somente um elemento, mas sim uma coleção deles.

Se você pretende dar play em somente um vídeo, aconselho a seleciona-lo por ID já que é único. Se forem vários e você quiser dar play em todos com um botão só, você terá que fazer um loop pelos elementos, como por exemplo: $('.video-stream').each(function(){this.play()})

Se mesmo assim quiser usar classe para um vídeo só você pode usar: document.getElementsByClassName("video-stream")[0]; ou $(".video-stream")[0];

Há também outras formas como usando o .get() (Não confundir com o $.get()) do jquery.

2
  • +1 por incrementar jQuery na resposta. Nesse caso, obter um elemento pela classe é mais tranquilo pelo jQuery do que pelo Javascript puro 11/05/2017 às 11:58
  • SIM preciso pegar por classe. E muito obrigado pela ajuda, agora consigo fazer um js e jquery!!! Bom ainda estou estudando java... tenho muito o que aprender!!! e claro nem imaginava que tinha que pegar o primeiro elemento...pois quando eh por classe em um monte!!!! 11/05/2017 às 23:44
1

EDIT: var video pegando somente Class do elemento. Método get() dando play no 2º elemento com a Class video-stream.

O seu jQuery está correto.

O erro ocorre porque play() não é uma função do jQuery, e sim do elemento DOM.

Pra contornar isso, no lugar de video.play() tu usa .get():

video.get(0).play()

Referência da Solução

Segue exemplo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<video   id="Video1" class="video-stream" src="https://www.html5rocks.com/pt/tutorials/video/basics/Chrome_ImF.mp4">
</video>

<video   id="Video2" class="video-stream" src="https://www.html5rocks.com/pt/tutorials/video/basics/Chrome_ImF.mp4">
</video>

<div id="buttonbar">
    <button id="play"		onclick="vidplay()"	>&gt;</button>
</div>

<script>
  function vidplay() {  
  
  //No jQuery eu peguei a ID(#Video1) e a Class(.video-stream) juntos
  var video = $(".video-stream");
  
	// um teste....
	   	$.each( $( ".video-stream" ), function() {
			console.log( "  MESSAGE ====>  | id = " + this.id );
		});
	 
  // o erro aparece quando dou play no video...
  //video.play();
  
  //Função play() funcionando
  video.get(1).play();
  
}
</script>

3
  • MAS no seu exemplo.... voce esta usando o ID... eu NAO POSSO USAR O ID ?!?!?!? isso eh muito importante na solucao do meu problema.... inclusive coloquei bem grande logo no titulo do post..... 11/05/2017 às 23:47
  • Opa! Falta de atenção minha. Nesse caso tu pode passar somente a Class em var video = $(".video-stream");. Em video.get(0).play();, o 0 significa que ele vai dar play no primeiro elemento que possui a Class video-stream. Então, se precisar dar play num 2º elemento com a mesma Class, deverá colocar 1 e assim por diante. 12/05/2017 às 1:03
  • Ah sim! acho que começo a entender! obrigada! 12/05/2017 às 4:41
0

Olha esse exemplo:

    function vidplay() {
       var video = document.getElementById("Video1");
       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }

    function restart() {
        var video = document.getElementById("Video1");
        video.currentTime = 0;
    }

    function skip(value) {
        var video = document.getElementById("Video1");
        video.currentTime += value;
    }    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<video id="Video1" >
     <source src="https://www.html5rocks.com/pt/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4" />
</video>

<div id="buttonbar">
    <button id="restart" onclick="restart();">[]</button> 
    <button id="rew" onclick="skip(-10)">&lt;&lt;</button>
    <button id="play" onclick="vidplay()">&gt;</button>
    <button id="fastFwd" onclick="skip(10)">&gt;&gt;</button>
</div>

1
  • Então... mais uma vez.. agradeço a ajuda MAS no seu exemplo.... você esta usando o ID... eu NÃO POSSO USAR O ID !!!!!! isso eh muito importante na solução do meu problema.... inclusive coloquei bem grande logo no titulo do post..... 11/05/2017 às 23:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .