JavaScriptで video タグの動画のサムネイル画像を取得する方法

Google Chromeの拡張機能を制作する過程で、HTMLの video タグで再生される動画のサムネイル用の画像を取得する方法について備忘録的に投稿しておきます。

canvas に描画して取得

基本的には、これが王道のようです。

新しく canvas タグを追加して、取得したいフレーム（秒数）まで進めた video タグの内容を描画する方式です。

具体的には、こんな感じで video タグから画像を取得ができました。

async function getThumnbailFromVideo(video, time = 3) {
    const src = video.currentSrc || video.src;

    return new Promise((resolve, reject) => {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");

        if (!ctx) {
            reject(new Error("canvas context error"));
            return;
        }

        const originalTime = video.currentTime;
        const wasPaused = video.paused;

        const cleanup = () => {
            video.removeEventListener("seeked", onSeeked);
            video.removeEventListener("error", onError);
        };

        const onError = () => {
            cleanup();
            reject(video.error || new Error("video error"));
        };

        const onSeeked = () => {
            cleanup();

            try {
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;

                ctx.drawImage(video, 0, 0);

                const dataUrl = canvas.toDataURL("image/jpeg", 0.8);

                video.currentTime = originalTime;
                if (!wasPaused) video.play();

                resolve(dataUrl);
            } catch (e) {
                reject(e);
            }
        };

        video.pause();
        video.addEventListener("seeked", onSeeked);
        video.addEventListener("error", onError);

        video.currentTime = time;
    });
}

実際に使用する場合は、こんな感じで呼び出します。

const i = document.createElement("img");
const v = document.createElement("video");
v.src = ".../sample.mp4";

const thumbnail = await getThumnbailFromVideo(v, 120);
i.src = thumbnail;

実行すると、video タグの .src に設定された動画ファイルの、120秒の場面が JPEG 形式で取得され、別途用意した img タグに表示されます。

まとめ

今回は、HTMLの video タグで再生される動画のサムネイル用の画像を取得する方法について書きました。

JavaScriptで video タグに設定された動画ファイルを画像として取得するには canvas タグを使って取得が可能でした。

HTMLに追加した video タグに設定した動画からサムネイル画像を取得したい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただきありがとうございます。