Video

動画

概要

Videoエクステンションは、HTML、YouTube、Vimeoの動画をスライドに割り当て、個別に再生できるようにし、スライダーが移動すると再生中の動画を停止するなどの機能を提供する拡張機能です。

また、コンテナを使用すれば、以下のようにスライドの一部に動画を適用できます。

Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu.
Viderer nonumes ius eu, ad habeo labore vis. Id nam nihil altera scripserit, esse commodo suscipit ei eam.
Quo harum altera incorrupte ea, eos viris constituto ex. Quo harum altera incorrupte ea, eos viris constituto ex.
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

$ 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

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 } );

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

<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>

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

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

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

使用方法

動画をスライドに割り当てるには、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

<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>

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

<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>

オプション

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

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

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

`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.0～1.0の範囲で設定します。

`host`

host: string

YouTubeプレイヤのhostを指定します（^0.8.0）。例えば、プライバシー強化モードを有効にするには、次のようにします。

new Splide( '.splide', {
  video: {
    host: 'https://www.youtube-nocookie.com',
  },
} );
JavaScript

new Splide( '.splide', {
  video: {
    host: 'https://www.youtube-nocookie.com',
  },
} );

`playerOptions`

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

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

`youtube`	`YT.PlayerVars`	このページを参照
`vimeo`	`VimeoOptions`	このページを参照
`htmlVideo`	`HTMLVideoOptions`	下記参照

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

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

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

`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

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


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

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

イベント

`video:play`

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

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

`player`	`Player`	`Player`クラスのインスタンス

`video:pause`

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

`player`	`Player`	`Player`クラスのインスタンス

`video:ended`

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

`player`	`Player`	`Player`クラスのインスタンス

クラス

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

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

i18n

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