Question 337350 in Html Question posted in
Some basic documentation can be found here.

How can I use html5 videos in splidejs slider?

How can I use the "splidejs" slider with the “splide-extension-video” with the following requirements?

  1. The slider moves automatically after a certain time (works)
  2. The current visible video always starts from the beginning (does not work). Currently it stops when changing and then resumes at the last position.

The problem is that the preview image appears first before the video. But if the video doesn’t start from the beginning, it doesn’t fit together anymore. You can either deactivate the still image somehow (?) or always play the video from the beginning (?).

const splide = new Splide( '.splide', {
  width: '100%',
  arrows: false,
  type : 'loop',
  autoplay: true,
  interval: 4000,
  perPage : 1,
  speed : 2000,
  video: {
    autoplay: true,
    loop : true,
    mute : true,
    hideControls: true,
    disableOverlayUI: true,
    playerOptions: { htmlVideo: {} },
  }
} );

splide.mount(window.splide.Extensions);

Thanks…

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    How do you manage to activate autoplay again after manually switching to another slide by pressing the pagination button and after leaving the slider area? Currently autoplay:play event is not further called, the last one is autoplay:pause. I just want it to automatically switch to the next video after the interval time after a manual switch.

    Thanks...


  2. 0

    Since you are referring to html5 video, mediaElement.currentTime = 0; is what you need, probably on the event of move of the slider. Yes, it’s a little crude, but it works.

    const splide = new Splide('.splide', {
  width: '100%',
  arrows: true,
  type: 'loop',
  autoplay: true,
  interval: 4000,
  perPage: 1,
  speed: 2000,
  video: {
    autoplay: true,
    loop: true,
    mute: true,
    hideControls: false,
    disableOverlayUI: true,
    playerOptions: {
      htmlVideo: {}
    },
  }
});

splide.on('move', function() {
  document.querySelectorAll('.splide video').forEach(function(video) {
    video.currentTime = 0
  })
});

splide.mount(window.splide.Extensions);
    img {
  width: 100%;
}
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">

<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide-extension-video.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide-extension-video.min.css">


<section class="splide" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide" data-splide-html-video="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
        <img src="https://picsum.photos/200/50">
      </li>
      <li class="splide__slide" data-splide-html-video="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
        <img src="https://picsum.photos/200/50">
      </li>
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search