jhawes
jhawes

Reputation: 2364

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

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.

Upvotes: 1

Views: 8920

Answers (6)

Abhishek rajpoot
Abhishek rajpoot

Reputation: 1

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()
        }
    }
}

<video controls onPlay={HandlePause}">

<video controls onPlay={HandlePause}">

<video controls onPlay={HandlePause}">

Upvotes: 0

Ash
Ash

Reputation: 1

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>

Upvotes: 0

Rohallah Hatami
Rohallah Hatami

Reputation: 559

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>

Upvotes: 3

Bartek Maki Makoś
Bartek Maki Makoś

Reputation: 172

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

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 205979

// 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"]();

});

Upvotes: 2

Ray Wadkins
Ray Wadkins

Reputation: 904

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.

Upvotes: 1

Related Questions