概要

は、HTML、YouTube、Vimeoの動画をスライドに割り当て、個別に再生できるようにし、スライダーが移動すると再生中の動画を停止するなどの機能を提供する拡張機能です。
  • Sample Video 01
  • Sample Video 02
  • Sample Video 03
  • Sample Video 04

以下のように、スライドの一部に動画を適用することもできます。

  • Sample Video 01

    Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu.

  • Sample Video 02

    Viderer nonumes ius eu, ad habeo labore vis. Id nam nihil altera scripserit, esse commodo suscipit ei eam.

  • Sample Video 03

    Quo harum altera incorrupte ea, eos viris constituto ex. Quo harum altera incorrupte ea, eos viris constituto ex.

  • Sample Video 04

    Commodo denique honestatis duo et, an eum noluisse vituperatoribus, ad lorem nonumy tempor ius ad lorem nonumy.

インストール

NPM

最新版をNPMから取得します。

$ npm install @splidejs/splide-extension-video

CSSとモジュールを読み込み、Splideを初期化する際にVideoエクステンションをmount()メソッドに渡してください。

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

CSSをロードできる環境にない場合は、ファイルをHTMLからリンクしても構いません。

CDNまたはホスティング

jsDelivrから最新ファイルへのURLを取得するか、あるいはこのディレクトリからファイルをダウンロードし、<link>および<script>タグを用いてCSSとスクリプトをインポートしてください。

<link rel="stylesheet" href="path-to-the-css/splide-extension-video.min.css">
<script src="path-to-the-script/splide-extension-video.min.js"></script>
HTML

Splideを初期化する際、window.splide.Extensionsを渡せば準備完了です。

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

使用方法

動画をスライドに割り当てるには、data-splide-html-video, data-splide-youtubeまたはdata-splide-vimeo属性を使用します。属性の値には、動画へのパス・URLか、または動画のIDを指定します。

<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide" data-splide-html-video="path or URL to the video">
<img src="preview01.jpg">
</li>
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU">
<img src="preview02.jpg">
</li>
<li class="splide__slide" data-splide-vimeo="https://vimeo.com/215334213">
<img src="preview03.jpg">
</li>
</ul>
</div>
</div>
HTML

スライドの一部に動画を適用するには、コンテナを利用してください。

<li class="splide__slide" data-splide-html-video="path or URL to the video">
<div class="splide__slide__container">
<img src="preview01.jpg">
</div>
<div>
その他のコンテンツ
</div>
</li>
HTML

オプション

Splideのoptionsvideoオブジェクトを渡すことで、エクステンションのオプションを変更することができます。

new Splide( '.splide', {
video: {
loop : true,
mute : true,
playerOptions: {
youtube: { ... },
},
}
} );
JavaScript

autoplay

autoplay: boolean = false

自動再生を有効にします。trueを設定した場合、アクティブなスライドの動画が自動的に再生されるようになります。

type: boolean default: false


disableOverlayUI

disableOverlayUI: boolean = false

動画の上に表示される再生ボタンを非表示にします。


hideControls

hideControls: boolean = false

各種動画プレイヤのUIを非表示にします。どのUIが非表示になるかは、それぞれの仕様次第です。


loop

loop: boolean = false

動画をループ再生します。


mute

mute: boolean = false

動画をミュート(音量0)状態にします。

type: boolean default: false


volume

volume: number = 0.2

動画のボリュームを0.01.0の範囲で設定します。


playerOptions

playerOptions: { youtube?: YT.PlayerVars, vimeo?: VimeoOptions, htmlVideo?: HTMLVideoOptions }

各種プレイヤのオプションを調整します。

Splideは与えられたオプションをそのままプレイヤに渡します。各設定が動画に対してどのような影響を与えるか、そのすべて確認しているわけではありません。

{
playerOptions: {
youtube: {},
vimeo: {},
htmlVideo: {},
}
}
JavaScript

HTMLVideoOptions

htmlVideoオプションとして、以下のプロパティを設定することができます。

  • autoplay
  • controls
  • crossOrigin
  • currentTime
  • disablePictureInPicture
  • disableRemotePlayback
  • height
  • loop
  • muted
  • playbackRate
  • playsInline
  • poster
  • preload
  • width
  • volume

詳細に関しては、を参照してください。

メソッド

pause()

pause(): void

動画を一時停止する。

disable()

disable( disabled: boolean ): void

再生ボタンを無効にし、クリックできないようにします。このメソッドはボタン自体を非表示にはしませんが、is-video-disabledクラスをルート要素に対して付与します。

// ボタンを無効にする
splide.Components.Video.disable( true );
// ボタンを有効にする
splide.Components.Video.disable( false );
JavaScript

イベント

video:play

動画が再生されたときに発生します。

このイベントは、必ずしも再生ボタンが押された直後に発生するとは限りません。再生可能になるバッファが十分たまったタイミングで発生します。


video:pause

動画が一時停止されたときに発生します。


video:ended

動画が終わったときに発生します。

クラス

このエクステンションは、いくつかの要素に対してクラスを追加します。

クラス説明
.is-playing動画再生中、ルート要素に対して付加される
.splide--has-videoルート要素に付加される
.splide__slide--has-video動画が割り当てられたスライド要素に付加される
.splide__slide__container--has-video動画が割り当てられたコンテナ要素に付加される

i18n

再生ボタンには、"Play Video"というaria-labelがつけられます。このテキストは i18nオプションのplayVideoプロパティを通して変更することができます。