Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法

Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Video Text Tracks)ファイルというものを用意すると実装できる模様。以下にサンプルと実装方法をメモ。

サンプル

https://taitan916.info/sample/Video.js/text_track/

「再生開始～5秒後」「5秒後～10秒後」にそれぞれ異なる字幕が表示される筈。

リファレンス

Text Tracks

https://videojs.com/guides/text-tracks/

VTTファイルについて

https://developer.mozilla.org/ja/docs/Web/API/WebVTT_API

実装方法

VTTファイルの用意

リファレンスを参考に以下ファイルをtrack.vttというファイル名でアップロードした。

WEBVTT

00:00.100 --> 00:05.000
再生開始から5秒後までこの字幕が表示されます。

00:05.000 --> 00:10.000
再生開始5秒後から10行後まではこの字幕が表示されます。
改行も可能

Video.js側のソースコード

<div class="video_div">
    <video id="video" class="video-js"></video>
</div>

<script src="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video-js.min.css" rel="stylesheet">

<script>
const option = {
    autoplay: false, //自動再生
    loop: false, //ループ
    controls: true, //コントローラー表示
    preload: 'auto', //ビデオデータのダウンロードをすぐに開始するかどうか
    notSupportedMessage: '動画再生できません', //再生不可の際のメッセージ
    aspectRatio: '16:9',
    controlBar: {
        remainingTimeDisplay: {
            displayNegative: false, //残再生時間を正数で表示
        },
    },
};
const player = videojs('video', option);
player.src({
    type: 'video/mp4',
    src: '../test.mp4',
});

//字幕設定
player.addRemoteTextTrack({
    kind: 'captions',
    src: 'track.vtt',
    mode: 'showing',
    label: '日本語'
}, false);

</script>

参考サイト

https://stackoverflow.com/questions/32947215/dynamically-change-videojs-captions-with-addtexttrack