HTMLの <video> タグで再生している動画に合わせて、文字起こしスクリプト（字幕やテキスト）を完全に同調させて表示するには、主に2つのアプローチがあります。1つは標準機能だけでシンプルに実装する方法、もう1つはJavaScriptを使ってリッチなWeb UI（議事録のような文字起こし連携）を作る方法です。
方法1：<track> タグを使う（標準機能で最も簡単）
HTML5の <video> タグの標準機能である <track> タグを使用し、WebVTT（.vtt） 形式のファイルを読み込ませる方法です。動画の上に字幕として自動的に同調表示されます。
<video controls width="600">
<source src="video.mp4" type="video/mp4">
<!-- 文字起こし（字幕）ファイルを指定 -->
<track src="transcript.vtt" kind="subtitles" srclang="ja" label="日本語" default>
</video>WebVTT（.vtt）ファイルの書き方例
WEBVTT
00:00:01.000 --> 00:00:04.500
こんにちは、本日の講義を開始します。
00:00:05.000 --> 00:00:09.000
今日のテーマは、HTML5のビデオタグについてです。- ※音声認識ツールなどで出力されたWebVTTファイルに、AIの誤認識懸念を示すカラータグ（例:
<c.yellow>テキスト</c>）などが含まれている場合でも、ブラウザ側でそのまま、またはCSSで装飾して読み込ませることができます。
方法2：JavaScriptで「動画の横に文字起こしを表示」する
「YouTubeの文字起こし機能」や「オンライン会議の議事録システム」のように、動画の横にスクリプト一覧を表示し、再生に合わせて現在の発言をハイライトする場合は、JavaScriptの timeupdate イベントを使用します。
実装のアイデアとコード例
文字起こしの各段落（テキスト）に「開始時間（秒）」をデータ属性として持たせておき、動画の再生位置と比較してクラスを切り替えます。
1. HTML構造
<div class="container" style="display: flex; gap: 20px;">
<!-- ビデオプレイヤー -->
<video id="my-video" controls width="400">
<source src="video.mp4" type="video/mp4">
</video>
<!-- 文字起こしスクリプト表示エリア -->
<div id="transcript-area">
<p class="script-line" data-start="0.0">こんにちは、本日の講義を開始します。</p>
<p class="script-line" data-start="5.0">今日のテーマは、HTML5のビデオタグについてです。</p>
<p class="script-line" data-start="10.0">具体的にスクリプトと同調させる方法を解説します。</p>
</div>
</div>2. JavaScript処理
const video = document.getElementById('my-video');
const lines = document.querySelectorAll('.script-line');
video.addEventListener('timeupdate', () => {
const currentTime = video.currentTime; // 現在の再生時間（秒）
lines.forEach((line, index) => {
const startTime = parseFloat(line.getAttribute('data-start'));
const nextLine = lines[index + 1];
const endTime = nextLine ? parseFloat(nextLine.getAttribute('data-start')) : Infinity;
// 現在の再生時間が、その行の開始〜次の行の開始の間にある場合
if (currentTime >= startTime && currentTime < endTime) {
line.classList.add('highlight'); // 現在の発言をハイライト
// 必要に応じて、アクティブな行までスクリプトエリアを自動スクロール
line.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
} else {
line.classList.remove('highlight');
}
});
});
// オプション：文字起こしをクリックしたら、その発言の時間にジャンプさせる
lines.forEach(line => {
line.addEventListener('click', () => {
const startTime = parseFloat(line.getAttribute('data-start'));
video.currentTime = startTime;
video.play();
});
});3. CSS（ハイライト用）
.script-line {
padding: 5px;
cursor: pointer;
color: #666;
transition: background-color 0.3s;
}
.script-line.highlight {
background-color: #fffde7;
color: #000;
font-weight: bold;
}どちらの方法を選ぶべき？
- 動画プレイヤーの中にシンプルに字幕を出したいだけ👉 方法1（
<track>タグ） が手軽でおすすめです。スマートフォンなどの全画面再生でもブラウザ標準の字幕として機能します。 - 学習コンテンツ、議事録システム、インタビュー動画のように、テキスト全体を見せながら連動させたい👉 方法2（JavaScript連携） が最適です。テキスト側をクリックして「動画の特定のシーンにジャンプ（タイムスタンプ機能）」させることも簡単に実装できるため、ユーザーの利便性が劇的に向上します。
コメント