Plyrを使ったら、動画プレイヤーのブラウザ差異に悩まなくなった話

はじめに

<video> タグを使ってみたものの、Chrome・Safari・Firefoxでコントロールバーの見た目がバラバラで困った経験はありませんか。ブラウザ標準のメディアコントロールはデザインをカスタマイズしづらく、モバイルとデスクトップでも挙動が微妙に異なります。さらにYouTubeやVimeoの動画を埋め込むとなると、それぞれ別のUIになってしまい、サイト全体の統一感が損なわれてしまいます。

こうした悩みを一気に解決してくれるのが、軽量なメディアプレイヤーライブラリ「Plyr」です。

とはいえ、説明を読むより実際に触ってみたほうが早いと思います。再生・一時停止・音量・速度をその場で操作できるサンプルを用意しているので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞ まずはサンプルを確認 ＜＜＜

Plyrとは

Plyrは、HTML5のvideo・audioに加えて、YouTubeやVimeoの動画も同じ見た目・同じAPIで扱えるようにするオープンソースのメディアプレイヤーライブラリです。マークアップベースでカスタマイズでき、アクセシビリティにも配慮された設計になっているため、公開サイトからWebアプリまで幅広く利用されています。

主な特徴

• 統一されたUI - HTML5、YouTube、Vimeoのいずれを使っても同じデザインのコントロールバーになり、ブラウザごとの見た目の違いを気にしなくて済みます
• アクセシビリティ対応 - キーボード操作やスクリーンリーダー、VTTキャプションに対応しており、誰にとっても使いやすいプレイヤーを作れます
• 軽量かつカスタマイズ可能 - 依存ライブラリなしで動作し、CSS変数やマークアップの調整でデザインを柔軟に変更できます
• ストリーミング対応 - HLS.jsやDash.jsと組み合わせることで、ライブ配信やアダプティブストリーミングにも対応できます

インストール

npmを使う場合は以下のコマンドでインストールできます。

npm install plyr

CDNから読み込む場合は、CSSとJSを1行ずつ追加するだけで利用開始できます。

<link rel="stylesheet" href="https://cdn.plyr.io/3.8.4/plyr.css" />
<script src="https://cdn.plyr.io/3.8.4/plyr.js"></script>

Plyrのサンプルを動かす

Plyrはnew Plyr(selector)で初期化するだけで、HTML5の<video>をカスタムUIのプレイヤーに変換します。生成されたplayerインスタンスからは、player.play() / player.pause()で再生制御、player.volumeで音量の取得・変更（0〜1の範囲）、player.speedで再生速度の取得・変更ができます。以下のサンプルでは、再生・一時停止ボタン、音量スライダー、速度セレクタからこの3つのAPIをそれぞれ呼び出せるようにしています。

要点だけを抜き出すと、次のようになります。

import Plyr from 'plyr'

const player = new Plyr('#player')

// 再生・一時停止
player.play()
player.pause()

// 音量は0〜1の範囲で指定
player.volume = 0.5

// 再生速度を1.5倍速に変更
player.speed = 1.5

// イベントを監視
player.on('play', () => console.log('再生開始'))
player.on('ratechange', () => console.log('速度変更'))

実際に動かせるものが下です。動画はMozilla（MDN）がロイヤリティフリーの学習素材として公開している「flower.mp4」を読み込んでいます。音量スライダーを動かすとその場でplayer.volumeが書き換わって音量が変化し、速度セレクタを切り替えるとplayer.speedが更新されて再生速度が即座に変わります。

音量スライダーを0にするとplayer.volume = 0が実行されてミュート相当になり、速度セレクタで「2x」を選ぶとplayer.speed = 2によって動画が倍速で再生されます。HTML5、YouTube、Vimeoのどのソースであっても、こうしたプロパティ操作だけで同じように制御できるのがPlyrの強みです。

基本的な使い方

まずはHTML5の<video>タグを用意します。

<video id="player" playsinline controls data-poster="/poster.jpg">
  <source src="/video.mp4" type="video/mp4" />
  <source src="/video.webm" type="video/webm" />
</video>

続けて、対象の要素を指定してPlyrを初期化するだけで、統一されたUIのプレイヤーに置き換わります。

import Plyr from 'plyr';

const player = new Plyr('#player');

CDN経由で読み込んだ場合はグローバルのPlyrをそのまま使えます。

<script>
  const player = new Plyr('#player');
</script>

YouTube動画を埋め込みたい場合も、videoタグのdata属性を変えるだけで同じプレイヤーUIになります。

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
    allowfullscreen
    allow="autoplay"
  ></iframe>
</div>

<script>
  const player = new Plyr('#player');
</script>

実践的なユースケース

複数のプレイヤーをまとめて初期化したり、イベントを監視して再生状況に応じた処理を行いたい場合は、以下のように書けます。

import Plyr from 'plyr';

// ページ内の複数プレイヤーを一括初期化
const players = Array.from(document.querySelectorAll('.js-player')).map(
  (element) => new Plyr(element)
);

// 再生開始をトリガーに任意の処理を実行する例
const player = new Plyr('#player');

player.on('play', () => {
  console.log('再生を開始しました');
});

player.on('ended', () => {
  console.log('再生が終了しました');
});

コントロールバーに表示するボタンも、オプションで自由に絞り込めます。たとえば音声コンテンツ用にシンプルな構成にしたい場合は次のようにします。

const audioPlayer = new Plyr('#audio-player', {
  controls: [
    'play-large',
    'play',
    'progress',
    'current-time',
    'mute',
    'volume',
  ],
});

Plyrで音声プレイヤーをカスタムコントロールにする

実際に上記のcontrolsオプションを使った音声プレイヤーを動かせるサンプルが以下です。配列で渡した項目（play-large / play / progress / current-time / mute / volume）だけが表示され、動画用のフルサイズのコントロールバーとは異なる、ポッドキャストのようなコンパクトな音声プレイヤーになります。

controls配列から項目を減らせば、その分だけボタンが画面から消えます。たとえばcurrent-timeを外すと再生時間の表示だけがなくなり、play-largeを外すと中央の大きな再生ボタンがなくなります。装飾を抑えたコントロールにしたい音声ガイドやポッドキャストサイトで役立つ機能です。

商品紹介動画やチュートリアル動画をサイトに埋め込む際、この統一APIのおかげでHTML5動画とYouTube動画を切り替えても再生制御コードを書き換える必要がなく、保守性が大きく向上します。

まとめ

Plyrを使うことで、ブラウザやメディアソースの違いを意識せず、統一感のあるメディアプレイヤーを手軽に実装できます。アクセシビリティやカスタマイズ性にも優れているため、コーポレートサイトのプロモーション動画から、ポッドキャストの音声配信まで幅広い用途で活躍してくれるはずです。まずは手元の<video>タグをPlyrで置き換えるところから試してみてください。