Question 10693 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to add video html5 "controls" on click ? (jquery)

I’m trying to code my own website, fully handmade but i have a small issue. I would like to add on my website few html5 videos with the basic player.

To hide the controls, and make something clean, I added a quick js script so : when the user clicks on the thumbnail (the poster of the video), the video starts. However, I would’ve liked to add to that, when the user clicks, it also add the controls attributes of the video in question to be able to use the fullscreen or advance in the video.

So, here is my script for now :

        jQuery( document ).ready(function($) {
            $('.myHTMLvideo').click(function() {
                this.paused ? this.play() : this.pause();
            });
        });

And then, I would like that when "onclick", we add the attribute controls in my to be able to play with the video, and when I click again, it can potentially disappear.

I had already tried a previous script, but when I clicked on a video, it displayed the controls on all my videos on the same page…

Below my html video div :

<div class="tile video">
 <video preload="auto" class="myHTMLvideo" poster="#">
 <source src="#" type="video/mp4">
 </video> 
</div>

Let me know what is the best option for you guys …
And thanks for you help, of course !

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    According to the answer of @Suhel Khan, here is my script for now :

    $(document).ready(function() {
  $('.myHTMLvideo').click(function() {
    var video = $(this).find('video')[0]
    console.log(video);
    if (video.paused) {
      video.setAttribute('controls', '');
      video.play();
    } else {
      video.pause();
    }
  });
});

    But I have an error now : "Cannot read properties of undefined (reading 'paused')" and as you can see, the variable video is undefined.

    I feel that I'm close to solving my problem, but the variable video doesn't seem to give the necessary information to have the controls appear and and start playing the video at the same time.


  2. 0

    This is how you can do it.

    jQuery(document).ready(function($) {
  $('.myHTMLvideo').click(function() {
  if (this.paused) {
    this.play();
  $(this).attr('controls', true); // this will add controls attribute
   } else {
     this.pause();
    $(this).removeAttr('controls'); // and this will remove controls attribute
   }
  });
});

    To play the video on click with the controls appear

    jQuery(document).ready(function($) {
  $('.myHTMLvideo').click(function() {
    var video = $(this).find('video')[0];
    if (video && video.paused) {
       video.setAttribute('controls', '');
       video.play();
    } else if (video) {
          video.pause();
     }
   });
});
    Login or Signup to reply.
  3. 0

    small modification in your script

       jQuery(document).ready(function($) {
          $('.myHTMLvideo').click(function() {
            if (this.paused) {
            
              $(this).attr('controls', ''); 
               this.play();
            } else {
            
              $(this).removeAttr('controls'); 
              this.pause();
            }
          });
        });

     jQuery(document).ready(function($) {
          $('.myHTMLvideo').click(function() {
            if (this.paused) {
            
              $(this).attr('controls', ''); 
               this.play();
            } else {
            
              $(this).removeAttr('controls'); 
              this.pause();
            }
          });
        });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>


<div class="tile video">
 <video preload="auto" class="myHTMLvideo" style="width:300px;" poster="#">
 <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
 </video> 
</div>
<div class="tile video">
 <video preload="auto" class="myHTMLvideo" style="width:300px;" poster="#">
 <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
 </video> 
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search