Autoplay video from beginning every time?

[jaybonthius]

On my page, I have a bunch of splide__track's, each with a sequence of videos. When the user moves to a new splide__slide, I want the video on that slide to autoplay from the beginning of the video, even when returning to a slide after the first time. Simply setting my <video> tag with autoplay is not sufficient. Any ideas?

Here's how I'm mounting my slides (suggestions appreciated!)

var elms = document.getElementsByClassName('splide');
        for (var i = 0; i < elms.length; i++) {
            new Splide(elms[i], {
                speed: 0,
                drag: false,
                pagination: false,
            }).mount();
            .on('move', function () {
               <--do some stuff here to make the video autoplay from the beginning?-->
            });
        }

Edit: I'm not using the video extension because with that particular extension, there is an extremely small (but noticeable) flicker when switching videos. For my use case (a sequence of math animations), flicker is not acceptable, and so I am just manually placing the videos in each slide:

<li class="splide__slide">
    <video src="/path/to/video-1.mp4">
</li>
<li class="splide__slide">
    <video src="/path/to/video-2.mp4">
</li>
<li class="splide__slide">
    <video src="/path/to/video-3.mp4">
</li>

[NaotoshiFujita]

Why don't you use the currentTime property? You can seek a video to 0 and play it from the beginning.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

The active event is useful to get the current slide, instead of the move event.
https://splidejs.com/guides/events/#active

[jaybonthius]

@NaotoshiFujita Thank you for your reply—I'll make sure to use the active event. Could you help me figure out how to select the video element of the slide that was moved? I think I can figure out how to tell it to play and set the current time to 0, but I'm having a hard time selecting the video. In all the examples, each splide is initialized manually, but mine are in a loop and for some reason that's throwing me off.

[NaotoshiFujita]

Didn't test it, but like this:

var elms = document.getElementsByClassName( 'splide' );

for ( var i = 0; i < elms.length; i++ ) {
  var splide = new Splide( elms[ i ], {} );
  
  splide.on( 'active', function ( Slide ) {
    var slide = Slide.slide;
    console.log( slide ); // slide element

    var video = slide.querySelector( 'video' );

    if ( video ) {
      console.log( video ); // video element
    }
  } );

  splide.mount();
}

[jaybonthius]

@NaotoshiFujita You ROCK, that worked perfectly. Thank you so much for your help.

[rachelcsimmons-cda]

@NaotoshiFujita Any idea how to do this with a Vimeo video?