仕様解説
WebVTTを利用した動画字幕
5

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

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

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

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

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

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

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

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

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

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア