javascript - How to pause a video when another video's play button is clicked - Stack Overflow

admin管理员组

文章数量:1320661

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.

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.

• javascript
• jquery
• html
• video

Share Improve this question Follow asked Oct 4, 2016 at 21:14 jhawesjhawes 2,37433 gold badges2828 silver badges3636 bronze badges 2

• You will probably need to implement your own custom video controls or use a library like videojs. – Marcel Dieterle Commented Oct 4, 2016 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 Commented Oct 4, 2016 at 21:40

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

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>

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

});

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.

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/2010/05/video/mediaevents.html

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>

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}">

本文标签： javascriptHow to pause a video when another video39s play button is clickedStack Overflow