JavaScriptで動画プレイヤーを自作する -後編-

2019.12.23

はじめに

JavaScriptで、一から動画プレイヤーを自作しました。

前編では動画の再生停止、速度調整、時間表示を実装しました。
今回はシークバーや音量バーなど、クリックした位置の座標を使用した機能の実装を解説します。

目次

【後編】
5.シークバーの実装
6.音量ボタンの実装
7.音量バー/音量表示の実装

実装の手順


5.シークバーの実装

[html]


[css]

#seekboxが動画全体の時間幅、.seekbarが現在の時間幅です。

#seekboxは常にwidth:100%のままで、現在の時間に応じて%を計算し、
.seekbarの幅が変化します。


[js]

UpdateSeekBar関数、onClickSeekBar関数で現在の再生位置を取得し、
前編「4.時間表示の実装」で解説したreTime関数で時:分:秒に変換して、
ShowSeekBar関数で表示しています。

【UpdateSeekBar関数】

イベントリスナに「timeupdate」を設定し、動画の再生位置(時間)が変化したときに
VideoのcurrentTimeプロパティで現在の時間を取得します。
それを全体の時間で割って、シークバーの表示に使用する%を求めて
変数iPerに代入し、ShowSeekBar関数に渡しています。

【参考】videoタグに使えるイベントハンドラのまとめ

【onClickSeekBar関数】

クリックした場所のX座標を取得し、変数ClickXに代入します。
X座標の取得にはいくつか方法がありますが、offsetXを使うことにより
seekboxの左端を起点としたX座標が取得できます。

【参考】クリックイベント発生の座標:offsetX/Y,clientX/Y,pageX/Y,screenX/Yの区別

【ShowSeekBar関数】

UpdateSeekBar関数、onClickSeekBar関数で求めた数値を引数で渡し、
シークバーの幅と現在の時間を表示します。




6.音量ボタンの実装

[html]


[css]


[js]

動画がミュート(消音状態)かどうかVideoのmutedプロパティで取得し、
ボタンの音量ON/OFF表示を切り替えています。
また、音量がある場合はshowVolumeBar関数に、
ミュートだった場合はshowVolumeBarMute関数を実行して
シークバーの表示を切り替えています。
showVolumeBar関数、showVolumeBarMute関数については
次の「7.音量バー/音量表示の実装」で解説します。




7.音量バー/音量表示の実装

[html]


[css]

仕組みは前述の「5.シークバーの実装」と同様です。
#volumeboxが全体の音量幅、.volumebarが現在の音量幅です。


[js]

音量バークリック時に変化がわかりやすいように、0.00~1.00で数値を出しています。
onClickVolumeBar関数で現在の音量を取得し、showVolumeBar関数で表示をしています。

【onClickVolumeBar関数】

クリック位置を取得して、音量を計算します。
ミュート(0.00)だった場合と、音量MAXだった場合は
一回onClickVolumeBtn関数を実行して、音量ボタンのON/OFF表示も切り替えます。
その後showVolumeBar関数またはshowVolumeBarMute関数を実行して表示を切り替えます。

【showVolumeBar関数】

現在の音量で最大音量を割り%を求め、音量バーと現在の音量の表示をします。

まとめ

以上で動画プレーヤーの機能実装解説は終了です。

前編では動画の再生停止、速度調整、時間表示、
後編ではシークバー、音量ボタン、音量バー/音量表示を実装しました。

これで基本的な機能は実装できたので、ここから更に機能を拡張したり、
色やデザインを自由にカスタマイズしてみてください。

今回使用したコード

[player.js]