前回までは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を使って更に便利な動画の機能を作成することも出来ます。
また機会があれば紹介していきたいです。
