前回まで
[前回の動画再生まで] (https://qiita.com/nishidataishi/items/bd78551e44b6fbe4bbbf)でplyr.jsで動画を再生するところまではできました。
ここからはプレイヤーの肝であるコントロールバーのカスタマイズをしていきます。
前回の導入部分まではいくらでも記事があるのですが、ここからが本当に情報が少なかったです...
とにかく本家のIssuesに投稿したいところを「まず検索しろ！！同じこと何度も聞くんじゃねぇ！」という作者の言葉を胸に、一心不乱に検索して試行錯誤を繰り返します。
とりあえず色を変える
CSSを読み込ませるだけで全体的な色は変えられます。
フォルダ構成
html/
├ css/
│ ├ myplayer.css
│ └ plyr.css
├ js/
│ ├ jquery.min.js
│ ├ myplayer.js
│ └ plyr.min.js
├ index.html
└ test.mp4
index.html
<html>
<head>
<link rel="stylesheet" media="all" href="css/plyr.css">
<link rel="stylesheet" media="all" href="css/myplayer.css">
<script type="text/javascript" charset="UTF-8" src="js/jquery.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/plyr.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/myplayer.js"></script>
</head>
<body>
<video id="video_player" controls>
<source src="test.mp4" type="video/mp4" />
</video>
</body>
</html>
css/myplayer.css
.plyr--full-ui input[type=range] {
color: red; /* とりあえず赤くしてみる */
}
.plyr__control--overlaid {
background: rgba(255,0,0, .8); /* とりあえず赤くしてみる */
}
.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
background: red; /* とりあえず赤くしてみる */
}
.plyr__control.plyr__tab-focus {
box-shadow: 0 0 0 5px rgba(255,0,0, .5); /* とりあえず赤くしてみる */
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
background: red; /* とりあえず赤くしてみる */
}
.plyr--audio .plyr__control.plyr__tab-focus,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true] {
background: red; /* とりあえず赤くしてみる */
}
cssの「red」と「255,0,0」を書き換えるだけで
ボタンなどが赤くなります。
さらに、アイコンの色を変えたい場合は
css/myplayer.css
.plyr--full-ui input[type=range] {
color: red; /* とりあえず赤くしてみる */
}
.plyr__control--overlaid {
background: rgba(255,0,0, .8); /* とりあえず赤くしてみる */
}
.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
background: red; /* とりあえず赤くしてみる */
}
.plyr__control.plyr__tab-focus {
box-shadow: 0 0 0 5px rgba(255,0,0, .5); /* とりあえず赤くしてみる */
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
background: red; /* とりあえず赤くしてみる */
}
.plyr--audio .plyr__control.plyr__tab-focus,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true] {
background: red; /* とりあえず赤くしてみる */
}
.plyr__control {
color: yellow; /* アイコンを黄色くしてみる */
}
アイコンが黄色くなりました。
好みのボタンを表示する
plyr.jsではデフォルトのボタン以外に「10秒戻る」、「10秒進む」などのボタンを追加したり、「ピクチャーインピクチャーを隠す」などの細かい設定も可能となっています。
全てのボタン
controls: [
'play-large', // 再生前に表示される再生ボタン
'restart', // もう一度最初からのボタン
'rewind', // seektimeで指定した秒数戻るボタン
'play', // 再生、一時停止ボタン
'fast-forward', // seektimeで指定した秒数進むボタン
'progress', // プログレスバーの表示
'current-time', // 現在時間、残り時間の表示
'duration', // 動画全体の再生時間
'mute', // ミュート、ミュート解除ボタン
'volume', // 音量コントロール
'captions', // 字幕表示ボタン
'settings', // 設定メニュー（再生速度、画質選択）
'pip', // ピクチャーインピクチャー
'airplay', // AirPlay(MacのSafariのみ）
'download', // 指定したソースのダウンロードボタン
'fullscreen' // フルスクリーンボタン
];
controlは下記のようにセットアップに与えることで設定ができます。
js/myplayer.js
$(function() {
const control = [
'play-large', // 再生前に表示される再生ボタン
'restart', // もう一度最初からのボタン
'rewind', // seektimeで指定した秒数戻るボタン
'play', // 再生、一時停止ボタン
'fast-forward', // seektimeで指定した秒数進むボタン
'progress', // プログレスバーの表示
'current-time', // 現在時間、残り時間の表示
'duration', // 動画全体の再生時間
'mute', // ミュート、ミュート解除ボタン
'volume', // 音量コントロール
'captions', // 字幕表示ボタン
'settings', // 設定メニュー（再生速度、画質選択）
'pip', // ピクチャーインピクチャー
'airplay', // AirPlay(MacのSafariのみ）
'download', // 指定したソースのダウンロードボタン
'fullscreen' // フルスクリーンボタン
];
player = new Plyr('#video_player', { controls: control });
});
controlの中身をいじることでボタンの順番や表示するボタンを選択することもできます。
js/myplayer.js
$(function() {
const control = [
'play', // 再生、一時停止ボタン
'rewind', // seektimeで指定した秒数戻るボタン
'fast-forward', // seektimeで指定した秒数進むボタン
'progress', // プログレスバーの表示
'current-time', // 現在時間、残り時間の表示
'mute', // ミュート、ミュート解除ボタン
'volume', // 音量コントロール
'settings', // 設定メニュー（再生速度、画質選択）
'fullscreen' // フルスクリーンボタン
];
player = new Plyr('#video_player', {controls: control});
});
デフォルトの見た目を変えるだけなら、位置を変えたり、一つ一つの要素のCSSを指定することでなんとかなりますが、私の場合、このかっこいいプレイヤーを「オリジナルのボタンを追加したい」というオーダーによりカスタマイズするという[さらに過酷な道] (https://qiita.com/nishidataishi/items/59c9c2d4e7d2c439d52b)を進みます。
参考リンク：
cssに関しては下記の回答が本当に役に立ちました。
https://github.com/sampotts/plyr/issues/662#issuecomment-498825513
コントローラーの表示は下記の公式文書がわかりやすいが、これにたどり着くのが大変だった。
https://github.com/sampotts/plyr/blob/master/CONTROLS.md