カスタムフィールドでアップロードした動画ファイルの1フレーム目をposter画像にする方法

<table class="acms-admin-table-admin-edit cstm-admin-table-admin-edit">
	<tbody>
		<tr>
			<th>
				<span>動画</span>
			</th>
			<td>
				<div class="acms-admin-flex-column" id="swipelp-movwrapper">
					<div class="js-media-field" id="swipelp-moviewrapper">
						<div class="js-droparea" data-thumbnail="{swipelp_video@thumbnail}" data-type="file" data-thumbnail-type="{swipelp_video@type}" data-width="200px" data-height="200px"></div>
						<p class="js-text acms-admin-text-danger" style="display:none">許可されていないファイルのため挿入できません。</p>
						<div class="acms-admin-margin-top-mini">
							<button type="button" class="js-insert acms-admin-btn" data-type="file">メディアを選択</button>
						</div>
						<input type="hidden" name="swipelp_video" class="js-value" value="{swipelp_video}" />
						<input type="hidden" name="field[]" value="swipelp_video" />
						<input type="hidden" name="swipelp_video:extension" value="media" />
					</div>
				</div>

				<div class="acms-admin-flex-column cstm-movie-box">
					動画プレビュー<br>
					<video src="%{ARCHIVES_DIR}{swipelp_video@path}" controls
					mutedcontrolslist="nodownload"id="swipeli_video" class="acms-admin-img-responsive" width="200px"></video>
				</div>

				<div class="cstm-movie-box">
					ポスター画像は登録されています。<br>
					<div class="acms-admin-form-checkbox">
						<input type="checkbox" name="swipelp_video_image@edit" value="delete" id="input-checkbox-posterImg-delete" />
						<label for="input-checkbox-posterImg-delete">
							<i class="acms-admin-ico-checkbox"></i>
							ポスター画像を削除
						</label>
					</div>

					<img src="%{ARCHIVES_DIR}{swipelp_video_image@path}" class="js-img_resize_preview" alt="{swipelp_video_image@alt}" style="display:none" />
					<input type="hidden" name="swipelp_video_image@old" value="{swipelp_video_image@path}" />
				</div>
				<div class="cstm-movie-box">
					<a href="javascript:void(0);" onclick="generatePoster()" class="acms-admin-btn" style="width:200px;margin: 0.5em 0;padding:0.5em;">動画からポスター画像を生成</a><br>
					<div id="posterImageView">ポスター画像が登録されていません。<br>生成ボタンを押して画像を設定してください。</div>
					<div id="posterImageView-all" style="display:none">ポスター画像が設定されました。<br>エントリーを『保存』してください。</div>
				</div>
				<canvas id="canvas" style="display: none;"></canvas>
				<img id="posterImage" alt="Generated Poster" style="display: none; max-width: 200px;">
				<input type="file" name="swipelp_video_image" size="20" class="js-img_resize_input" id="swipelp_video_image_poster" style="display:none" />
				<input type="hidden" name="field[]" value="swipelp_video_image" />
				<input type="hidden" name="swipelp_video_image:extension" value="image" />
				<input type="hidden" name="swipelp_video_image@width" value="200" />
				<input type="hidden" name="swipelp_video_image@filename" value="" />
			</td>
		</tr>
	</tbody>
</table>

<script>
const video = document.getElementById('swipeli_video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const posterImage = document.getElementById('posterImage');
const hiddenInput = document.getElementById('swipelp_video_image_poster');
const posterImageView = document.getElementById("posterImageView");
const posterImageViewAll = document.getElementById("posterImageView-all");

function generatePoster() {
	// readyStateが1 (HAVE_METADATA) 未満の場合、メタデータが読み込まれていない
	if (video.readyState < HTMLMediaElement.HAVE_METADATA) {		
		// loadedmetadataイベントを一度だけ待ち、読み込み完了後にgeneratePosterを再実行
		video.addEventListener('loadedmetadata', generatePoster, { once: true });
		return;
	}
	
	// seekedイベントの二重登録を防ぐため、一度解除
	video.removeEventListener('seeked', onSeeked);
	
	// seekedイベント登録
	video.addEventListener('seeked', onSeeked, { once: true });
	
	// 1秒目にシーク
	video.currentTime = 1;
}

// seekedイベントの処理（修正版）
function onSeeked() {
	// 元の動画サイズ
	const originalWidth = video.videoWidth;
	const originalHeight = video.videoHeight;
	
	// 縮小後の幅を200pxに固定
	const targetWidth = 200;
	const scale = targetWidth / originalWidth;
	const targetHeight = originalHeight * scale;
	
	// キャンバスサイズを設定
	canvas.width = targetWidth;
	canvas.height = targetHeight;
	
	// 動画フレームを縮小して描画
	ctx.drawImage(video, 0, 0, targetWidth, targetHeight);
	
	// Blobとしてエクスポート（PNG形式）
	canvas.toBlob((blob) => {
		// Fileオブジェクトを作成（ファイル名を指定）
		const file = new File([blob], 'poster.png', { type: 'image/png' });
		
		// DataTransferを使用してFileListを作成
		const dataTransfer = new DataTransfer();
		dataTransfer.items.add(file);
		
		// input[type="file"]のfilesプロパティに設定
		hiddenInput.files = dataTransfer.files;
		
		// 変更イベントを発火
		hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
		
		// プレビュー表示（Blob URLを使用）
		const blobUrl = URL.createObjectURL(blob);
		posterImage.src = blobUrl;
		
		// メモリリーク防止
		setTimeout(() => URL.revokeObjectURL(blobUrl), 10000);
		
		// posterImage要素のスタイルを設定
		if (posterImageView) {
			posterImageView.style.display = "none";
		}
		
		// posterImage-all要素のスタイルを設定
		if (posterImageViewAll) {
			posterImageViewAll.style.display = "block";
		}
	}, 'image/png', 0.95);  // 品質を95%に設定
}
</script>

<!-- BEGIN_IF [{swipelp_video@type}/eq/file] -->
	<video src="%{MEDIA_ARCHIVES_DIR}{swipelp_video@path}"<!-- BEGIN_IF [{swipelp_video_image@path}/nem] --> poster="%{ARCHIVES_DIR}{swipelp_video_image@path}"<!-- END_IF --> preload="none" class="acms-top-0 acms-left-0 acms-z-0" width="100%" height="100%" loop autoplay muted playsinline></video>
<!-- END_IF -->