Search code examples
javascriptjqueryhtml5-videobxslider

play and pause the videos in the bxslider?

I am working on bxslider jquery plugin. I am including the videos also. If the current slider is video means when i will click the next button, the current video will be pause and when i come again that video slider that video will be auto play where the video was paused.I need to handle all the video like this. I use video tag for video.

Solution

  • please try this.

    Here is the API document of bxslider.

    onSlideBefore

    Executes immediately before each slide transition.

    So we pause all the video when this event triggered.

    $bxslider.find('video').each(function() {
  this.pause();
});

    onSlideAfter

    Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).

    So we play the video which is in current active slide.

    // arguments:
// $slideElement: jQuery element of the destination element

// get the video element, assume only one video in each slide
var video = $slideElement.find('video')[0];
// if this slide contains video and video has been played then continue the video
video !== undefined && video.currentTime !== 0 && video.play();