How to pause a video when another video's play button is clicked

Question

I thought this would be simple to set up with a click event, but the it's not recognizing the html5 video's controls as part of the video.

There is another video on the page with the ID of video1 that is set to autoplay. The second video with the ID of video2 does not overplay, but has html5 controls so the viewer can start it. I'd like to have it set up so that once the play button in video2 is selected that video1 stop playing.

Here's what I've tried:

html

<video id="video2" controls>
  <source src="assets/explainer.mp4" type="video/mp4">
  This browser does not support HTML5 video
</video>

js

$('#video2').click(function(){
  $('#video1').get(0).pause();
});

Note that if I click on the video it works, but click on the controls does not.

You will probably need to implement your own custom video controls or use a library like http://videojs.com — Marcel Dieterle, Oct 04 '16 at 21:16
With the controls I think you're correct. Though, I did find a way that's a bit of a workaround, but still get's the job done. — jhawes, Oct 04 '16 at 21:40

score 3 · Answer 1 · answered Mar 04 '19 at 07:29

worked for videos and sounds

html >>

<audio class="player"  controls>
       <source src="{{$sound->path}}" type="audio/ogg">
       <source src="{{$sound->path}}" type="audio/mpeg">                                
</audio>
<video class="player" style="max-width: 100%" controls>
       <source src="{{$video->path}}" type="video/mp4">
       <source src="{{$video->path}}" type="video/ogg">
</video>

script >>

<script>
    $(document).ready(function () {
        function playFile() {
            $(".player").not(this).each(function () {
                $(this).get(0).pause();
            });
            this[this.get(0).paused ? "play" : "pause"]();
        }

        $('.player').on("click play", function() {
            playFile.call(this);
        });
    })
</script>

Roko C. Buljan · Answer 2 · 2016-10-04T21:26:03.640

2

// You heard about classes

$(".allMyVideos").on("click", function() {

    // All but not this one - pause
    $(".allMyVideos").not( this ).each(function() {
         this.pause();
    });

    // Play this one
    // this.play();

    // Or rather toggle play / pause
    this[this.paused ? "play" : "pause"]();

});

Or if you have two ID videos:

var $v1$v2 = $("#video1, #video2");

$v1$v2.on("click", function() {

    // ...not this one - pause
    $v1$v2.not( this ).each(function() {
         this.pause();
    });

    // Play this one
    // this.play();

    // Or rather toggle play / pause
    this[this.paused ? "play" : "pause"]();

});

edited Oct 04 '16 at 21:26

answered Oct 04 '16 at 21:19

Roko C. Buljan

196,159
39
305
313

Tried both of these out and haven't had any luck. I can start building something out in jsFiddle - maybe that will help. – jhawes Oct 04 '16 at 21:28
1

For your _classes_ answer, no necessarily need to use classes. `$("video")` will make the job. – Robiseb Oct 04 '16 at 21:30
@jhawes mentioned in his question that click event doesn't help when taking into account video navigation buttons. Your code would work if you'd update event to "play" – Bartek Maki Makoś Oct 04 '16 at 21:31
@BartekMaki humm yes I missed the `controls` attribute in OP's question – Roko C. Buljan Oct 04 '16 at 21:32
Ok I found a way, but it's a bit of a workaround. I placed an absolutely position div in the parent element that goes over the play button. When it's clicked it stops video1, plays video2 and then I remove it since I only need the event to occur a single time. Thoughts? – jhawes Oct 04 '16 at 21:38

score 1 · Answer 3 · answered Oct 04 '16 at 21:19

1

the video element supports it's own events. playing is one of them, and alerts you when a video starts playing, either autoplay or when the play button is pressed after pause. You should be able to listen for it instead of the click event.

answered Oct 04 '16 at 21:19

Ray Wadkins

876
1
7
16

`.onplay` helped me as I'd initially dropped my function call in the `video` tag `onclick` event opposed to `onplay`. – id.ot Jan 23 '20 at 03:38

Bartek Maki Makoś · Answer 4 · 2016-10-04T21:26:21.257

0

You can listen to onplay event:

var vid1 = document.getElementById("video-1");    
var vid2 = document.getElementById("video-2");

vid1.onplay = function() {
    vid2.pause();
};

Hope you can take it from here :)

You may check all evets that you can listen to on video element here (just hit play / pause and see the table updates): https://www.w3.org/2010/05/video/mediaevents.html

edited Oct 04 '16 at 21:26

answered Oct 04 '16 at 21:20

Bartek Maki Makoś

174
1
10

score 0 · Answer 5 · answered Nov 10 '21 at 19:33

I faced the same problem and solved it with this code snippet below I have written where (.video) represents the class name of your video.

<script>
    $("video").on("play", function (e) {
        $('.video').not(this).each(function(){
            var $playpause = $(this);
            video = $playpause[0];
            video.pause();
        });
    });
</script>

Abhishek rajpoot · Answer 6 · 2023-01-25T20:50:01.957

0

if you're having more than two video you can do this, it works fine for me

 const HandlePause = () => {
    const player = document.getElementsByTagName('video')
    for (let x = 0; x < player.length; x++) {
          if (player[x] !== e.target) {
            player[x].pause()
        }
    }
}

edited Jan 25 '23 at 20:50

answered Jan 25 '23 at 20:00

Abhishek rajpoot

1
1

How to pause a video when another video's play button is clicked

6 Answers6

Linked