Skip to content

Single Video playing issue #663

Open
@binishmp

Description

@binishmp

@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);
        }
      });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions