概要
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 を使ってみました
かなり簡単に導入できるのとデフォルトのスタイルでも十分いい感じに表示されるのでとりあえず適用するだけでもいい感じになると思います
レスポンシブデザインにもなっているのでスマホでもきれいに表示されると思います
0 件のコメント:
コメントを投稿