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 >
  <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 >
    <button >
      <span ><i ></i></span>
      <span  style="display: none;"><i ></i></span>
    </button>
    <button >
      <span ><i ></i></span>
      <span  style="display: none;"><i ></i></span>
    </button>
  </div>
</div>

CodePudding user response：

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 >
  <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 >
    <button >
      <span ><i ></i></span>
      <span  style="display: none;"><i ></i></span>
    </button>
    <button >
      <span ><i ></i></span>
      <span  style="display: none;"><i ></i></span>
    </button>
  </div>
</div>

<p>Video #2:</p>
<div >
  <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 >
    <button >
      <span ><i ></i></span>
      <span  style="display: none;"><i ></i></span>
    </button>
    <button >
      <span ><i ></i></span>
      <span  style="display: none;"><i ></i></span>
    </button>
  </div>
</div>