Search code examples
jqueryhtml5-videoinview

html5 video with jquery and inview - how to point to the right video element?

I use the jquery inview plugin top automatically play videos when in view. Since I cannot use IDs for the video I use html5 <video> as selector and all videos are always starting to play. How can I point the play/pause trigger only to the one element that is currently triggering the event and ignore all the others? 

$('.video-autoplay').on('inview', function(event, isInView) {
  if (isInView) {
    $('video').trigger('play');
  } else {
    $('video').trigger('pause');
  }
});

many thanks, C

Solution

  • You can make use of this. For more information, see this answer.

    $('.video-autoplay').on('inview', function(event, isInView) {
  if (isInView) {
    $(this).trigger('play');
  } else {
    $(this).trigger('pause');
  }
});