pause the other playing video when play a new video jquery

Question

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

user_519413 · Answer

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);




Video #1:

  
  
    
    
  


Video #2:

pause the other playing video when play a new video jquery

1 Answers