pause the other playing video when play a new video jquery

June 27, 2022

I have many videos on one page.
I am using jquery to play and pause the videos
when I click on the play button it should play.
I did this using jquery. now I need to pause the other videos when I press play on the next or previous video. could you help me, please?

a screenshot is here

$('video').each(function(i, el) {
  var p = $(el).parent();
  $('.play-toggle', p).click(function(e) {
    var button = $(this);
    if (button.hasClass('playvideo')) {
      button.removeClass('playvideo');
      $('.play', button).hide();
      $('.pause', button).show();
      el.play();
    } else {
      button.addClass('playvideo');
      $('.play', button).show();
      $('.pause', button).hide();
      el.pause();
    }
  });
});

$('video').each(function(i, el) {
  var p = $(el).parent();
  $('.sound-toggle', p).click(function(e) {
    var button = $(this);
    if (button.hasClass('playsound')) {
      button.removeClass('playsound');
      $('.play-sound', button).hide();
      $('.pause-sound', button).show();
      el.muted = true;
    } else {
      button.addClass('playsound');
      $('.play-sound', button).show();
      $('.pause-sound', button).hide();
      el.muted = false;
    }
  });
});

<div class="video-player">
  <video id="video1" width="420">
    <source src="<?php echo base_url(); ?>assets/video/video.mp4" type="video/mp4">
    Your browser does not support HTML video.
  </video>
  <div class="controls">
    <button class="play-toggle playvideo">
      <span class="play"><i class="fa-solid fa-play"></i></span>
      <span class="pause" style="display: none;"><i class="fa-solid fa-pause"></i></span>
    </button>
    <button class="sound-toggle playsound">
      <span class="play-sound"><i class="fa-solid fa-volume-high"></i></span>
      <span class="pause-sound" style="display: none;"><i class="fa-solid fa-volume-xmark"></i></span>
    </button>
  </div>
</div>

>Solution :

To do what you require you can create a function which loops through all video elements and calls pause() on then. You can then call this function when a video is played.

In addition, note that instead of looping through the video elements on document.ready, you can instead attach event handlers to the media control buttons which use DOM traversal to find the related content when they are clicked. This has the benefit of simplfying the code, and maknig it easier to maintain. Try this:

let pauseAllVideos = excludeVideo => $('video').not(excludeVideo).each((i, v) => {
  v.pause();
  $(v).closest('.video-player').find('.play-toggle')
    .removeClass('pause').addClass('play')
    .find('i').removeClass('fa-pause').addClass('fa-play');
});

$('.play-toggle').on('click', e => {
  let $button = $(e.currentTarget);
  let video = $button.closest('.video-player').find('video')[0];
  pauseAllVideos(video);
  $button.toggleClass('play pause').find('i').toggleClass('fa-play fa-pause');
  video[video.paused ? 'play' : 'pause']();
});

$('.sound-toggle').on('click', e => {
  let $button = $(e.currentTarget);
  let video = $button.closest('.video-player').find('video')[0];
  $button.toggleClass('play-sound pause-sound').find('i').toggleClass('fa-volume-high fa-volume-xmark');
  video.muted = !video.muted;
});

// This is just for this demo, so it doesn't deafen people :)
// it can be removed in your production version
$('video').each((i, v) => v.volume = 0.1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<p>Video #1:</p>
<div class="video-player">
  <video id="video1" width="420">
    <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
    Your browser does not support HTML video.
  </video>
  <div class="controls">
    <button class="play-toggle playvideo">
      <span class="play"><i class="fa-solid fa-play"></i></span>
      <span class="pause" style="display: none;"><i class="fa-solid fa-pause"></i></span>
    </button>
    <button class="sound-toggle playsound">
      <span class="play-sound"><i class="fa-solid fa-volume-high"></i></span>
      <span class="pause-sound" style="display: none;"><i class="fa-solid fa-volume-xmark"></i></span>
    </button>
  </div>
</div>

<p>Video #2:</p>
<div class="video-player">
  <video id="video2" width="420">
    <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
    Your browser does not support HTML video.
  </video>
  <div class="controls">
    <button class="play-toggle playvideo">
      <span class="play"><i class="fa-solid fa-play"></i></span>
      <span class="pause" style="display: none;"><i class="fa-solid fa-pause"></i></span>
    </button>
    <button class="sound-toggle playsound">
      <span class="play-sound"><i class="fa-solid fa-volume-high"></i></span>
      <span class="pause-sound" style="display: none;"><i class="fa-solid fa-volume-xmark"></i></span>
    </button>
  </div>
</div>