How do I pause a HTML5 video with JavaScript?

Question

Initially the video is hidden. When you click the image with ID 3, the video is visible. I put a button with ID close_video that will hide player. The problem is it's still running video after you click the button. How do I pause the video?

The code is:

<div id="video" class="popup-video">
  <div class="video">
    <div class="close_video" id="close_video">
    </div>
    <video id="id_video" width="400" height="257" controls="controls" preload="auto">
      <source src="{$content_dir}themes/trendy/video/Wildlife.mp4" type="video/mp4"/>     
    </video>                         
  </div>
</div>  

<script>
  $(document).ready(function(){
    $('#3').click(function(){
      $("#video").removeClass("popup-video").addClass("popup-video-show");
    });
  });
</script>
<script>
  $(document).ready(function(){
    $('#close_video').click(function(){
      $("#video").removeClass("popup-video-show").addClass("popup-video");
    });
  });
</script>

I also tried this:

<script>
  $(document).ready(function(){
    $('#close_video').click(function(){
      $("#video").removeClass("popup-video-show").addClass("popup-video");
      document.getElementById('id_video').pause();
      // and $("#id_video").pause();
    });
  });
</script>

Still no effect. The video disappears, but is still running.

I just googled your title and found the following topic : http://stackoverflow.com/questions/4155329/how-to-pause-a-html5-video-on-an-event — Brewal, Apr 24 '13 at 14:12

score 14 · Answer 1 · answered Apr 24 '13 at 14:16

14

When using jQuery, you'll need to use 'get' first:

$('#videoId').get(0).pause()

answered Apr 24 '13 at 14:16

Dan Esparza

28,047
29
99
127

a tried $('#videoId').get(0).pause(),but error in firefox is: TypeError: $(...).get(...).pause is not a function – marius Apr 24 '13 at 14:17
What version of Firefox are you running? – Dan Esparza Apr 24 '13 at 14:19
last version 20.0.1 firefox – marius Apr 24 '13 at 14:22
TypeError: $(...).get(...).pause is not a function – marius Apr 24 '13 at 14:25
@marius did you add the [jQuery Script](https://developers.google.com/speed/libraries/devguide#jquery)? – Dom Apr 24 '13 at 15:41
Great! @maius look your page cache. – Andre Mesquita Feb 07 '18 at 21:08
this worked for me – kinsley kajiva Oct 08 '19 at 05:11

score 1 · Answer 2 · edited Jan 31 '18 at 14:27

1

When working with HTML5, use:

document.getElementById(\"movie_player\").click()

It works for me.

edited Jan 31 '18 at 14:27

Milo

3,365
9
30
44

answered Jan 31 '18 at 14:07

UmbrellaINC

11
1

score 0 · Answer 3 · answered Apr 24 '13 at 14:15

0

Normally you only need to click on the video to pause/play it.

Instead of using the pause() try to use the click()

answered Apr 24 '13 at 14:15

i used click() but nothing effect – marius Apr 24 '13 at 14:21

How do I pause a HTML5 video with JavaScript?

3 Answers3