hello there is a markup

</head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <video class="video"> <source src="1.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'> </video> </div> <div class="col-md-12"> <button class="play-pause-btn">PLAY</button> <button class="stop-btn">STOP</button> <progress id="progressBar" min="0" max="100" value="0"></progress> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="bootstrap/js/userjs.js"></script> </body> </html>

Trying to make a simple HTML5 player using not a lot of JS. Here is the JS code

 $(".play-pause-btn").click(function() { var media = $(".video"); if ($(".video").paused) { this.innerHTML = "Play"; media.play(); } else { this.innerHTML = "Pause"; $(".video").pause(); } });

The problem is that the video does not play. The caption on the button changes, but the video as it was and stands still. Who is the thread in the course of what's funny. Maybe not the right method but in Googol such methods are said to be used.

  • I did when I click the additional variable var media = $ (". video"); and wrote media.play (); and did on line $ (". video"). play (); all the same - Sasuke
  • It will not change anything. See my answer - Yuri

1 answer 1

The fact is that all player control functions are not Jquery functions, they are direct JavaScript functions. When using JS functions to jQuery, you need to specify the element ID. I hope you understand something :) In short, try this:

 $(function() { $(".play-pause-btn").click(function() { var media = $(".video")[0]; if(media.paused){ $(this).html('PAUSE'); media.play(); }else{ $(this).html('PLAY'); media.pause(); } }); });

Here is a working example: jsfiddle-ks7aqd01

  • all is also left ( - Sasuke
  • @ Sanitary, I'll check, wait a couple of minutes - Yuri
  • @ Sanitary, look, I changed the answer and added a working example to the answer - Yuri