Video

動画

v3用のドキュメントを参照しています

概要

Videoエクステンションは、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

YouTubeのURLはv=クエリパラメータを含んでいる必要があります。埋め込み用のURLや短縮URLでは動作しません。

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

<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を設定した場合、アクティブなスライドの動画が自動的に再生されるようになります。

HTMLの動画を自動再生する場合、muteオプションを有効しておく必要があります。いくつかのブラウザでは、彼らが定める方針により、ユーザの許可なく音声付きの動画を流すことを許可していないためです。

type: boolean default: false


disableOverlayUI

disableOverlayUI: boolean = false

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


hideControls

hideControls: boolean = false

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

Vimeoは無料ユーザに対してUIの非表示を許可しておらず、PROユーザに限定された機能です。


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 }

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

youtubeYT.PlayerVars

このページを参照

vimeoVimeoOptions

このページを参照

htmlVideoHTMLVideoOptions

下記参照

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

このメソッドは、各種プレイヤのUIを無効にするものではありません。

イベント

video:play

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

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

playerPlayer

Playerクラスのインスタンス


video:pause

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

playerPlayer

Playerクラスのインスタンス


video:ended

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

playerPlayer

Playerクラスのインスタンス

クラス

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

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

i18n

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