前回まではVideo.jsを使用したカスタマイズを行いました。

今回はJavaScriptを使って、オリジナルのプレーヤーを自作していきます。
自分の好きな所にボタンを置くことが出来るので、より自由にプレーヤーを作ることが出来ます。

再生・停止

まずは基本的な再生・停止ボタンを作っていきます。

HTML

<button id="play">再生する</button>
<button id="pause">停止する</button>

JavaScript

const btn_play = document.getElementById('play');
const btn_pause = document.getElementById('pause');
const video = document.querySelector('video');
// 再生ボタン
btn_play.addEventListener('click', e => {
video.play();
});
// 停止ボタン
btn_pause.addEventListener('click', e => {
video.pause();
});

動画を再生する場合は.play()メソッドを、停止する場合は.pause()メソッドを使用します。

秒送り／戻し

続いて、再生位置を指定した秒数だけ進めたり、戻すボタンを作成していきます。

HTML

<button id="back">10秒戻る</button>
<button id="forward">10秒進む</button>

JavaScript

const btn_back = document.getElementById('back');
const btn_forward = document.getElementById('forward');
// 10秒戻す
btn_back.addEventListener('click', e => {
video.currentTime -= 10;
});
// 10秒進める
btn_forward.addEventListener('click', e => {
video.currentTime += 10;
});

ここで出てくるcurrentTimeプロパティとは、現在の再生時間のことです。
再生時間に10秒プラスすることで秒送りをします。

ちなみに、video.currentTime = 0;とすることで再生位置を最初に戻すことが出来ます。

再生速度

動画の再生速度を変更するにはplaybackRateプロパティを追加します。

HTML

<button id="slow">スロー</button>
<button id="normal">通常</button>
<button id="fast">早送り</button>

JavaScript

const btn_slow = document.getElementById('slow');
const btn_normal = document.getElementById('normal');
const btn_fast = document.getElementById('fast');

// 再生速度を遅くする
btn_slow.addEventListener('click', e => {
video.playbackRate = 0.8;
});
// 再生速度を元に戻す
btn_normal.addEventListener('click', e => {
video.playbackRate = 1.0;
});
// 再生速度を早くする
btn_fast.addEventListener('click', e => {
video.playbackRate = 1.5;
});

再生を遅くするにはplaybackRateの値を0.1〜0.9の間で指定します。
逆に早くするには1.1以上の値を指定します。
再生速度を変更するボタンを実装する際には、元の再生速度に戻すボタンも設置するようにしましょう。

シークバー

最後にシークバーを作成していきます。
1. 動画の総再生時間を取得
2. 現在の再生時間を取得
3. 1に対して2がどのくらいの位置にあるのか算出

シークバー作成にあたって行う手順は上記の通りです。
これをtimeupdateイベントを使って、動画の再生中に合わせてリアルタイムで行います。

HTML

<div id="seekbar">
<div id="current"></div>
</div>

css

#seekbar {
width: 640px;
height: 5px;
background-color: gray;
}
#current {
width: 0;
height: 5px;
background-color: red;
}

JavaScript

const current = document.getElementById('current');

video.addEventListener('timeupdate', e => {
// 動画の総再生時間を取得
let time = video.duration;
// 現在の再生時間を取得
let current = video.currentTime;
// 再生時間の進捗割合をパーセントで算出
let timeRatio = (current/time)*100;
// 進捗割合に合わせてシークバーの長さを変化
current.style.width = timeRatio+'%';
});

基本的な機能の実装は以上となります。
あとはcssを使って好みのデザインにスタイリングしていけばOKです。

JavaScriptを使って更に便利な動画の機能を作成することも出来ます。
また機会があれば紹介していきたいです。