2020年8月29日土曜日

Plyr 超入門

概要
環境
Getting Started
スタイルを適用する
プレイヤーのオプションを適用する
video を使う方法
最後に
参考サイト

概要

plyr は HTML5 の audio タグや video タグを簡単にスタイリッシュに見せることができる Javascript のライブラリです
今回は簡単な使い方を紹介したいと思います

環境

macOS 10.15.6
Chrome 85.0.4183.83

Getting Started

とりあえず動かしてみましょう
まずは audio タグを使って HTML5 を書きます

<html>
<head>
  <title>Test Plyr</title>
</head>
<body>
  <audio id="player" controls>
    <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mp3" />
  </audio>
</body>
</html>

これだけだと以下のようにブラウザデフォルトのプレイヤーが表示されます

これに Plyr を適用してみます
方法は簡単で Plyr の js と css を設定するだけです

<html>
<head>
  <title>Test Plyr</title>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
</head>
<body bgcolor="#504B4A">
  <audio id="player" controls>
    <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mp3" />
  </audio>
  <script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
  <script>
    const player = new Plyr('#player');
  </script>
</body>
</html>

これだけで以下のように Plyr が適用されてスタイリッシュなプレイヤーが表示されます

スタイルを適用する

plyr にはスタイル用のオプションがいくつか用意されています
例えば --plyr-color-main を使うと再生された部分やボリュームの色を変更することができます
スタイルのオプションは css を記載するだけです

<html>
<head>
  <title>Test Plyr</title>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
  <style type="text/css">
  .plyr {
    --plyr-color-main:#000000;
  }
  </style>
</head>
<body bgcolor="#504B4A">
  <audio id="player" controls>
    <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mp3" />
  </audio>
  <script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
  <script>
    const player = new Plyr('#player');
  </script>
</body>
</html>

.plyr クラスは自動で生成される HTML のクラスになります
以下のような感じで色が変わっているのが確認できると思います

プレイヤーのオプションを適用する

Javascript を使ってプレイヤーのオプションを指定することでカスタマイズすることができます
例えばデフォルトでミュートの状態にする場合は muted オプションを使います
生成した Plyr オブジェクトに対してオプションを指定します

<html>
<head>
  <title>Test Plyr</title>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
  <style type="text/css">
  .plyr {
    --plyr-color-main:#000000;
  }
  </style>
</head>
<body bgcolor="#504B4A">
  <audio id="player" controls>
    <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mp3" />
  </audio>
  <script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
  <script>
    const player = new Plyr('#player');
    player.on('ready', () => { 
      player.muted = true
    });
  </script>
</body>
</html>

またプレイヤーが ready の状態になったときに muted = true にする必要があるので注意が必要です

video を使う方法

基本的には audio と同じです
代わりに video タグを使うだけです
スタイルやオプションの指定方法も同じです

<html>
<head>
  <title>Test Plyr</title>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
</head>
<body bgcolor="#504B4A">
  <video id="player" playsinline controls data-poster="/path/to/poster.jpg">
    <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4" />
    <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
  </video>
  <script>
    const player = new Plyr('#player');
  </script>
</body>
</html>

最後に

Plyr を使ってみました
かなり簡単に導入できるのとデフォルトのスタイルでも十分いい感じに表示されるのでとりあえず適用するだけでもいい感じになると思います
レスポンシブデザインにもなっているのでスマホでもきれいに表示されると思います

参考サイト

https://github.com/sampotts/plyr

hawksnowlog