1

I'm trying to create a Swiper slider with YT videos and html5 videos. I have the YT videos working however I just can't get the HTML 5 videos to work. I'm having trouble to detect the progress of the video. Whatever I try I just can't keep track of when the video ends so I can jump to the next slide.

So what I have is just 1 video to test now:

 window.addEventListener('load', function() {
    .....
    swiper = new Swiper('#headlines .swiper-container', {
      .... settings .....
    });
    if(is_video){
      var sliderVideos = $(".swiper-slide video");
      swiper.on('init', function() {
        var currentVideo =  $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
        currentVideo.trigger('play');
        console.log('video plays')

        currentVideo.on('ended', function(){
          console.log('video ended')
          swiper.autoplay.start()
          swiper.slideNext();
        });

      });
      swiper.on('slideChange', function () {
        sliderVideos.each(function( index ) {
          this.currentTime = 0;
        });
        var prevVideo =  $("[data-swiper-slide-index=" + this.previousIndex + "]").find("video");
        prevVideo.trigger('stop');
      });

    }
   swiper.init();
  });

I also tried

video.addEventListener("ended", function() {
          console.log('Video has ended!');
});

Or

currentVideo.bind('ended', function(){          
  console.log('Video has ended!');
});

I just can't see what I'm doing wrong.

Meules
  • 1,349
  • 4
  • 24
  • 71
  • 1
    what exactly is not working though? You should also decide whether you use jQuery or not because currentl you have a lot of mixed vanilla js and jQuery. Also, dont use bind but on. Which of your console logs work as expected? – Alex May 07 '21 at 10:45
  • your video(s) are in what format and codec? I did many test with many codecs and what I found that have the BEST seek capabilities is HLS H264 with hls.js to play it. example a 1 hour .mp4 (it's big and harder to seek fast) ---- the same 1 hour in HLS (.m3u8) with 1 segment per second (1.ts for 1 second with the m3u8 playlist). This reduce the buffer time and have seeking capability like no other format or codec I tested... take a look of one of my question => I added an answer : https://stackoverflow.com/questions/66837454/ffmpeg-x11grab-to-streamable-format – Jintor May 10 '21 at 21:51
  • @Alex: Sorry for the late reply. What does not work is that I want to know when the video is ended, so I can trigger Swiper to go to the next slide. So i'm able to start the video but I don't know when the video ends to trigger next slide. – Meules May 11 '21 at 09:53
  • @Jintor: The video itself works, I want to know when the video is ended so I can trigger swiper to go to the next slide. – Meules May 11 '21 at 09:54
  • Maybe take a look at those 2 links DURATION : https://www.w3schools.com/tags/av_prop_duration.asp // .onended : https://stackoverflow.com/questions/14517639/executing-function-at-end-of-html5-video – Jintor May 11 '21 at 17:44

0 Answers0