Slider take a delay after video playing is complete

[binishmp]

//if slider has video and then play
var playVideo = function(slider) {
  var vid = slider.find("video");
  if (vid.length) {
    // play
    vid[0].muted = true;
    vid[0].play();
  }
};

//if check slider has video and then pause
var pauseVideo = function(slider) {
  var vid = slider.find("video");

  if (vid.length && typeof vid[0].pause !== "undefined") {
    //pause
    vid[0].muted = true;
    vid[0].pause();
  }
};

//check slider has video and is playing
var isPlaying = function(slider) {
  var vid = slider.find("video");
  return (
    vid.length &&
    typeof vid[0].pause !== "undefined" &&
    !vid[0].paused &&
    !vid[0].ended
  );
};

$(this.$el).anythingSlider({
        resizeContents: true,
        autoPlay: true,
        resumeOnVisible: true,
        buildStartStop: false,
        infiniteSlides: false,
        buildArrows: false,
        easing: "leaner",
        theme: "cs-portfolio",
        hashTags: false,
        fade: "fade",
        tooltipClass: "",
        pauseOnHover: false,
        expand: true,
        enableKeyboard: false,
        delay: 10000,
        // Autoplay video in initial panel, if one exists
        onInitialized: function(e, slider) {
          playVideo(slider.$currentPage);
        },
        // pause video when out of view
        onSlideInit: function(e, slider) {
          pauseVideo(slider.$lastPage);
        },
        // play video
        onSlideComplete: function(slider) {
          playVideo(slider.$currentPage);
        },
        // pause slideshow if video is playing
        isVideoPlaying: function(slider) {
          return isPlaying(slider.$currentPage);
        }

I have implemented a video slider, everything working fine, but after video playing completed, slider is taking delay: 10000, milliseconds to slide to next slide. How to slide remove this delay of transition in case of video slider. Please advise

[Mottie]

Hi @binishprabhakar!

You can try modifying the isPlaying function to go to the next page when it sees the flag that the video has ended. Something like this:

var isPlaying = function(slider) {
  var vid = slider.$currentPage.find("video");
  if (vid.length && typeof vid[0].pause !== "undefined") {
    if (vid[0].ended) {
      slider.gotoPage(slider.currentPage, true);
      return false;
    }
    return !vid[0].paused && !vid[0].ended;
  }
  return false;
};

$(this.$el).anythingSlider({
  // ...
  isVideoPlaying: function(slider) {
    return isPlaying(slider);
  }
});

I quickly threw this together and didn't check the logic or functionality, so please bear that in mind.

[binishmp]

@Mottie I have tried this method also. But getting maximum stack exceeded error.

app.js:19056 Uncaught RangeError: Maximum call stack size exceeded

at RegExp.exec ()
at Function.Sizzle [as find] (app.js:19056)
at jQuery.fn.init.find (app.js:21186)
at isPlaying (app.js:54647)
at Object.isVideoPlaying (app.js:54739)
at $.anythingSlider.base.gotoPage (app.js:31718)
at isPlaying (app.js:54650)
at Object.isVideoPlaying (app.js:54739)
at $.anythingSlider.base.gotoPage (app.js:31718)
at isPlaying (app.js:54650)

[binishmp]

@Mottie I have come up with a solution , seems like issue has fixed.

onSlideComplete: function(slider) {
//playVideo(slider.$currentPage);

//check slider has video
var vid = slider.$currentPage.find("video");

if (vid.length) {
    //vid[0].currentTime = 0;
    vid[0].muted = true;
    vid[0].play();
    slider.clearTimer(true); // stop slideshow

    var refreshId = setInterval(function() {
        if (!isPlaying(slider.$currentPage)) {
            slider.clearTimer(true); // stop slideshow
            vid[0].muted = true;
            vid[0].pause();
            slider.gotoPage(slider.currentPage + 1, true);
            slider.startStop(slider.playing, true);
            clearInterval(refreshId);
        }
    }, 500);
} else {
    slider.clearTimer(true); // stop slideshow
    setTimeout(function() {
        slider.gotoPage(slider.currentPage + 1, true);
        slider.startStop(slider.playing, true); // restart slideshow
    }, 10000);
}

},

But, it shows a transition between slide 1 to 2, if slider.gotoPage(slider.currentPage + 1, true); Do you have any idea about this or have any other suggestions.

[binishmp]

Its fixed thank you ... @Mottie