Video - Splide Extension

This is an extension of the Splide slider library for playing videos of HTML video, YouTube and Vimeo. You must get Splide before using it.

• Demo and Document

Installation

NPM(Recommended)

1. Get the latest extension by NPM:

   $ npm install @splidejs/splide-extension-video

2. Link to the stylesheet:

   <link rel="stylesheet" href="node_modules/@splidejs/splide-extension-video/dist/css/splide-extension-video.min.css">

3. Mount the extension to the Splide.

   import Splide from '@splidejs/splide';
   import Video from '@splidejs/splide-extension-video';
   new Splide( '#splide' ).mount( { Video } );

CDN or Hosting Files

1. Visit jsDelivr and get the links of the latest files or download files from the dist library.
2. Import minified stylesheet and JavaScript files on your site:

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

3. Mount the extension to the Splide.

   new Splide( '#splide' ).mount( window.splide.Extensions );

HTML

Assign videos to slides by data attributes:

<div class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide" data-splide-html-video="path or url to the source file">
                <img src="thumbnail01.jpg">
            </li>
            <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU">
                <img src="thumbnail02.jpg">
            </li>
            <li class="splide__slide" data-splide-vimeo="https://vimeo.com/215334213">
                <img src="thumbnail03.jpg">
            </li>
        </ul>
    </div>
</div>

Available Options

Options

• autoplay: Whether to play the video automatically. This option is ignored when the Grid extension is active.
• disableOverlayUI: If true, the overlay UI including a play button is not rendered.
• hideControls: Hide the video control UI.
• loop: Loop the video.
• mute: Mute the video.
• volume: Volume(0.0-1.0).
• playerOptions: Options for each player.

Player Options

Each player accepts different options respectively. They can be changed through playerOptions. Be aware that individual options can overwrite options above.

playerOptions: {
  youtube: {
    cc_lang_pref: 'jpn',
  },
  vimeo: {
    byline: true,
  },
  htmlVideo: {
    playsinline: true,
  },
}

Visit these links for a documentation of each player.

• Youtube
• Vimeo
• HTML Video

License

Splide is released under the MIT license.
© 2020 Naotoshi Fujita