Javascriptを使って動画のサムネイル（ポスター画像）を自動生成

ホームページ内に動画を掲載する場合、youtube等のサービスを利用する場合は問題ないのですが、公開条件等によって既存のサービスが使用できない時に、canvasとjavascriptを使用して表示時に動画のサムネイル（ポスター画像）を自動で生成した方法をメモ

HTML

<video id="myVideo" onclick="this.play();" controls="" controlslist="nodownload" playsinline>
<source src="video.mp4" type="video/mp4">
</video>
<canvas id="myCanvas" style="display:none;"></canvas>

javascript

document.addEventListener("DOMContentLoaded", function() {
	var video = document.getElementById("myVideo");
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	
	// 動画データが読み込まれた後に実行
	video.addEventListener("loadeddata", function() {
		// video の幅と高さを canvas に合わせる
		canvas.width = video.videoWidth;
		canvas.height = video.videoHeight;

		// 0.5秒後のフレームを取得
		video.currentTime = 0.5;
	});

	// 指定フレームが読み込まれたら canvas に描画
	video.addEventListener("seeked", function() {
		ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
		// canvas を画像データに変換してポスターに設定
		var posterDataUrl = canvas.toDataURL("image/jpeg");
		video.setAttribute("poster", posterDataUrl);
	});
});

尚、iOSでは機能制限があるようなので、読み込み時の自動取得は不可。
再生ボタンクリック時に取得はできますが、本来の目的とは異なるため個別にポスター画像を用意するか、動画の登録時に自動生成したものを保存して使用する方法が良さそうです。