Error picking element by class (but with ID)

Question

I’m trying to get a video element from CLASS,(something that seems silly to me), But I’m not getting it, take my example:

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

I need to get that element of < video > by his CLASS... someone can tell me what’s wrong here?

this is my code

Answer 1

The problem when trying to play per class in this case is that there may be more than one element with the same class and both jquery and getElementsByClassName will not return only one element, but a collection of them.

If you want to play only one video, I advise you to select it by ID since it is unique. If there are several and you want to play them all with one button, you will have to make a loop through the elements, for example: $('.video-stream').each(function(){this.play()})

If you still want to use class for a video only you can use: document.getElementsByClassName("video-stream")[0]; or $(".video-stream")[0];

There are also other ways to use . get() (not to be confused with $.get()) from jquery.

Answer 2

EDIT: var video picking up only Class element. Get() method giving play on 2nd element with Class video stream.

Your jQuery is correct.

The error occurs because play() is not a function of jQuery, but of the DOM element.

To get around it, instead of video play.() you use .get():

video.get(0).play()

Solution Reference

Following example:

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

Answer 3

Look at this example:

    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>