AnythingSlider icon indicating copy to clipboard operation
AnythingSlider copied to clipboard

Single Video playing issue

Open binishmp opened this issue 6 years ago • 3 comments

@Mottie Could you please provide a solution for the below mentioned issue.

Video is not playing for single slide with video. The "var playVideo = function(slider) ", checking for currentSlider has any video. But in this case slider.find("video"); return as not found a video.

//if slider has video and then play
var playVideo = function(slider) {
  var vid = slider.find("video");
  if (vid.length) {
    // play
    vid[0].load();
    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();
    vid[0].currentTime = 0;
  }
};

//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,
        buildArrows: false,
        buildNavigation: false,
        infiniteSlides: true,
        easing: "swing",
        theme: "cs-portfolio",
        hashTags: false,
        fade: "fade",
        tooltipClass: "",
        pauseOnHover: false,
        expand: true,
        enableKeyboard: false,
        delay: 10000,
        stopAtEnd: true,
        // 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) {

          //check slider has video
          var vid = slider.$currentPage.find("video");
          if (vid.length) {
            //vid[0].load();
            //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();
                vid[0].currentTime = 0;

                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);
          }
        },
        // pause slideshow if video is playing
        isVideoPlaying: function(slider) {
          return isPlaying(slider.$currentPage);
        }
      });

binishmp avatar Mar 04 '19 07:03 binishmp

Hi @binishprabhakar!

If a "video" isn't found maybe the video is an embedded iframe? Would you please share the HTML?

Mottie avatar Mar 04 '19 12:03 Mottie

@Mottie its not iframe. Video included inside

binishmp avatar Mar 05 '19 10:03 binishmp

Would you please share the HTML?

Mottie avatar Mar 05 '19 12:03 Mottie