埋込みYouTube動画に字幕をつける -

自作文字起しツールが一通り完成し、いくつかの動画の字幕起しで実際に使っています。

だいじな情報を提供してくれる動画、興味深い内容の動画の字幕を作成していると、拡散願いの目的で字幕を公開したくなります。 YouTubeの埋込み動画に外部で字幕がつけられるJavascriptを見つけたので試してみます。

なじみの旅館、湯田川温泉「つかさや」の若女将さんの動画があったので、これに字幕をつけてみます。

字幕データの形式の一つであるSRTファイルを読み込むためには、"subtitles-parser“が別途必要でした。

オリジナルだと画面内にテキストが表示されますが、筆者の好みで画面の外に出るようにしました。
".youtube-external-subtitle"というクラスのスタイルに{ margin-top: 92px; }を追加するといい感じ。

※　2021-05-18 やっぱり字幕らしく画面の中に表示します。

<div class="youtube">
<iframe id="ytvideo" width="560" height="315" src="https://www.youtube.com/embed/7GALIu9LbTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<script src="/js/youtube.external.subtitle.min.js"></script>
<!--style>
  .youtube-external-subtitle { margin-top: 92px; }
</style-->
<script src="/js/subtitles.parser.min.js"></script>
<script>
  var loadSRT = function(url, callback) {
    var httpRequest = new XMLHttpRequest();

    httpRequest.onreadystatechange = function() {
      if (httpRequest.readyState === XMLHttpRequest.DONE) {
        var subtitles = parser.fromSrt(httpRequest.responseText, true);

        for (var i in subtitles) {
          subtitles[i] = {
            start : subtitles[i].startTime / 1000,
            end   : subtitles[i].endTime / 1000,
            text  : subtitles[i].text
          };
        }

        callback(subtitles);
      }
    };

    httpRequest.open('GET', url, true);
    httpRequest.send(null);
  };

  loadSRT('/asset/2020/09-08/Input.srt', function(subtitles) {
    var youtubeExternalSubtitle = new YoutubeExternalSubtitle.Subtitle(document.getElementById('ytvideo'), subtitles);
  });
</script>
</div>

△

字幕

埋込みYouTube動画に字幕をつける

YouTube External Subtitle Javascript

関連記事