Error getting element by class (but with ID)

Navigation
0

I'm trying to get a video element through the CLASS, (which sounds silly to me), But I'm not getting it, see 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><divid="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 ... Can someone tell me what's wrong here?

here is my code

    
asked by anonymous 11.05.2017 / 08:59

3 answers

5

The problem when trying to give 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 plan to only play one video, I advise you to select it by ID as it is unique. If there are several and you want to play at all with a button only, you will have to loop through the elements, for example: $('.video-stream').each(function(){this.play()})

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

There are also other ways like using .get () (not to be confused with the .get ()) of jquery.

    
11.05.2017 / 10:41
1

EDIT: var video grabbing only Class from the element. Get () method playing in the 2nd element with the video-stream Class.

Your jQuery is correct.

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

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

video.get(0).play()

Solution Reference

Here's an example: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><videoid="Video1" class="video-stream" src="https://www.html5rocks.com/pt/tutorials/video/basics/Chrome_ImF.mp4"></video><videoid="Video2" class="video-stream" src="https://www.html5rocks.com/pt/tutorials/video/basics/Chrome_ImF.mp4"></video><divid="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>
    
11.05.2017 / 14:06
0

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><videoid="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>
    
11.05.2017 / 12:09
In a TextBox, with the MultiLine property true, the character \ n does not change the line Click from UL in A