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>

基本的な使い方

まずは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',
  ],
});

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

まとめ

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