HTML5のvideoタグで1フレーム進む・戻るを実装する方法

こんにちは、macoです。

本記事では、HTML5のvideoタグで、1フレームずつ進むボタンと戻るボタンを実装する方法を解説します。

コード付きで解説するので、そのままコピペするだけで確認できると思います。

注意

この記事を公開した時点では、videoタグから動画のフレームレートを取得する方法がありません。
そのため、コード内のフレームレートは30fpsとして計算しています。
30fps以外の動画の場合でも動作はしますが、厳密な1フレームごとの移動ではないことにご注意ください。

HTML

HTMLは次の通りです。

<video id="mov" src="./video.mp4" controls></video>
<button id="prev-frame">戻る</button>
<button id="next-frame">進む</button>

JavaScript

JavaScriptは次の通りです。

var video = document.getElementById('mov');
var prevFrame = document.getElementById('prev-frame');
var nextFrame = document.getElementById('next-frame');
var frameRate = 1/30;

video.onloadedmetadata = function(){
    //next
    nextFrame.addEventListener('click',function(){
        console.log('pushed next');
        video.currentTime = Math.min(video.duration, video.currentTime+frameRate);
    });

    //prev
    prevFrame.addEventListener('click',function(){
        console.log('pushed prev');
        video.currentTime = Math.max(0, video.currentTime-frameRate);
    });
}

onloadedmetadata・・・動画がロードされてから処理を実行

Math.max()・・・引数に与えた数の中で、最大の値を返す

Math.min()・・・引数に与えた数の中で、最小の値を返す

Math.max()とMath.min()で、それぞれ動画の再生時間以上に進むことと、0秒未満に戻ることを防いでいます。