Auto interval on vimeo video's

[basvandertogt]

I have a carousel with images and vimeo videos.

const main = new Splide('#page-header-carousel', {
  type: 'fade',
  rewind: true,
  pagination: false,
  arrows: false,
  autoplay: true,
  interval: 10000,
  speed: 2000,
  pauseOnHover: false,
  pauseOnFocus: true,
  resetProgress: false,
  video: {
    autoplay: true,
    disableOverlayUI: true,
    hideControls: true,
    loop: false,
    mute: true,
    playerOptions: {
      vimeo: {
        background: true
      },
    },
  },
});

The interval is working properly but i want that the interval for the vimeo videos has the duration length of the desired video. Anybody know how to accomplish this?

I tried it by update the options but that's not working/allowed:

main.on('video:play', function (player) {
  const slide = player.slide;
  const iframe = slide.querySelector('iframe');

  if (iframe) {
    const player = new Player(iframe);

    player.getDuration().then(function (duration) {
      console.log('video duration: ' + duration);
      // not working
      main.options = {
        interval: duration * 1000
      };
    }).catch(function (error) {
      console.log('no duration fetched');
    });
  } else {
    console.log('no iframe');
  }
});

[NaotoshiFujita]

Using video duration as the Splide interval does not work well because of buffering time, etc.

I would:

1. Disable autoplay of Splide (but keep enabling video: { autoplay: true })
2. Listen to the video:ended event
3. Move the carousel to the next slide by Splide#go() when the event is fired (rewind it manually if necessary)

[rachelcsimmons-cda]

@NaotoshiFujita Do you have an example of this? Also, how do you force a vimeo video to rewind?