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

2019.12.23

はじめに

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

ブラウザ上で動画を再生したいとき、YouTube動画を埋め込むことが多いと思います。
しかし、デザイン上の調整やカスタマイズがあまりできないため、
自由にカスタマイズがしやすい動画プレイヤーを制作しました。

前編、後編に分けて制作手順を解説します。

どんな人に読んでほしいか

JavaScriptを学びはじめたばかりの人

目次

【前編】
1.動画の実装
2.再生/停止ボタンの実装
3.速度ボタンの実装
4.時間表示の実装

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

実装の手順


1.動画の実装

[html]


[css]


[js]


videoタグのsrcは、html上に設定するのではなく、
jsでshowVideo関数をつくり後から設定します。

後ほど解説する「4.時間表示の実装」で
イベントハンドラ「loadeddata(現在の動画のロードが完了したとき)」を使用して
メタデータを取得するためです。

最初からvideoタグにsrcを設定しておくと、
「loadeddata」を読み込む前に動画が読み込まれてしまいメタデータが取得できないことが多々発生したため、
イベントリスナに「loadeddata」を設定した後に、showVideo関数で読み込みます。

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




2.再生/停止ボタンの実装

[html]


[css]


[js]


「isPlay」というフラグで、true=再生状態、false=停止状態として管理しています。
「▶」をplay、「||」をpauseボタンとし、
playボタンをクリックすると動画が再生されてpauseボタンに切り替わり、
pauseボタンをクリックすると動画が停止しplayボタンに切り替わります。




3.速度ボタンの実装


[html]


[css]


[js]


htmlに速度ボタンにはすべて同じクラスを付け、データ属性「data-rate」をつくり
それぞれの速度値を設定しておきます。

cssでは、デフォルト値である「1倍速」を、
あらかじめクリックした状態(黒字白文字)にしておきます。

.rateBtnのクリックイベントが発動したら、onClickRateBtn関数を呼びます。
その際に、クリックされたボタンを引数に渡します。
例えば、0.5倍速ボタンをクリックすると、
「data-rate=”0.5″」が設定されたボタンが引数に渡されます。

【onClickRateBtn関数】

.rateBtnのクリックイベント時に渡された引数を、targetという変数で受け取ります。
変数rateにdata-rateを代入し、VideoのplaybackRate(動画の速度)プロパティを変更します。
例えば、0.5倍速ボタンをクリックすると、
「data-rate=”0.5″」がplaybackRateに渡されます。

そして、すべての.rateBtnのcssを非選択の状態(白地黒文字)にし、
次にクリックされた.rateBtnのみをクリックした状態(黒字白文字)にします。

【参考】データ属性の使用




4.時間表示の実装

[html]


[css]


[js]



動画の全体の時間と現在の時間を表示します。

初回ロード時はshowDuration関数で全体の時間を取得し、
動画再生中はUpdateSeekBar関数で現在の時間を取得しています。
(UpdateSeekBar関数は、 後編「5.シークバーの実装」で説明します。)

動画の時間はミリ秒単位で取得されるので、表示用に時:分:秒に変換する必要があります。
例えば、今回使用した動画のdurationは「109.365986」と取得されるので、「00:01:49」に変換しています。
その計算を担うのがreTime関数です。

【showDuration関数】

イベントリスナ「loadeddata」に設定し、初回ロードが完了時に動画全体の時間を取得します。
取得した時間をreTime関数で変換し、表示します。

【reTime関数】

showDuration関数やUpdateSeekBar関数などで取得した値を、timeという変数で受け取ります。
timeを連想配列CalTimeに時:分:秒へ変換し格納します。
ミリ秒を3600で割ると時間、60で割ると分、60で割った余りが秒になります。
その後、for in 構文で時:分:秒の値を「1→01」のように2桁表示に変換し、returnでCalTimeに再格納しています。

【参考】桁指定して四捨五入・切り上げ・切り捨て
【参考】連想配列(Dictionary)の取得/追加/ソートまとめ
【参考】JavaScriptのfor-in文でオブジェクトの繰り返しを極める!
【参考】javascriptで数字を2桁で表示する方法

まとめ

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