12周年記念パーティ開催! 2024/5/10(金) 19:00

WebVTTを利用した動画字幕

全5回

WebVTTは時系列に沿ったテキスト表示に利用されるデータフォーマットです。WebVTTを利用すれば、video要素を利用した動画に字幕を付けることができます。

最終回 JavaScriptで操作する 応用編

WebVTTのオブジェクトやメソッドをJavaScriptで利用すると、WebVTT形式ファイルを使わずに字幕を表示したり、動画だけでなく音声の再生タイミングに合わせて、テキストを表示することもできます。

第4回 JavaScriptで操作する 基礎編

「JavaScriptを使用し、動画が特定の位置まで再生したら何かを実行する」といったデモ作成を通じて、どういったことができるのかを解説していきます。今回はキューテキストなどにアクセスする基本を紹介します。

第3回 track要素と属性

WebVTT形式ファイルを利用するためには、必ずtrack要素に読み込む必要があります。この記事では、track要素の属性と、その属性値を解説します。track要素の仕様を押さえて、適切な意味付けをしましょう。

第2回 字幕の装飾

動画に字幕を付けられるWebVTTには、字幕の位置や大きさ、文字の方向、サイズ、色、表示のタイミングなど、さまざまな指定ができます。この記事ではそれらの指定について詳しく解説します。

第1回 WebVTTの基本仕様

WebVTTは時系列に沿ったテキスト表示に利用されるデータフォーマットです。WebVTTを利用すれば、video要素を利用した動画に字幕を付けることができます。今回はWebVTTの仕様をじっくり解説します。