how to play/pause, if there is multiple videos on a page

Question

I have a lot of video tags on a page. I need to play/pause an element if it was clicked on, and pause the previous element ,if it is playing. When I clicked on one element after page loading, the clicked element was played but when I clicked at the second time, on the same video, it was not paused.





$('.vsingle').on('click', function(){
    if($(this).hasClass('active')){
        $(this).trigger('pause').removeClass('active');
    }
    else{
        $('.active').trigger('pause').removeClass('active');
        $(this).trigger('play').addClass('active');
    }
});

user_2813224 · Answer

The jQuery method .trigger() deals with standard Events. It does not recognize Events that are exclusive to Web APIs like MediaElement interface to which the tag belongs to. So events "pause" and "play" cannot be triggered with any jQuery method. Moreover, "pause"/"play" events are triggered by .pause() and .play() methods. To use them, they'll need to suffixed to a plain JavaScript object of a tag. jQuery $(objects) cannot use plain JavaScript methods and vice versa.

$('video').on('click', function(e) {
  let vids = $.makeArray($(this).siblings('video'));

  vids.forEach(vid => {
    vid.pause();
    vid.classList.remove('active');
  });

  $(this).toggleClass('active');
  if ($(this).is('.active')) {
    this.play();
  } else {
    this.pause();
  }
});

video {
  height: 30vh;
  cursor: pointer;
}

.active {
  outline: 2px solid blue
}

how to play/pause, if there is multiple videos on a page

1 Answers