Widely available すべての主要ブラウザで対応済み。安心して使用可能。

WebVTT cue settings

align は VTTCue インターフェイスのプロパティで、このテキストボックス内のテキストの行すべての配置を表します。

メディア

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
align
23
79
31
6
25
8
line

line は VTTCue インターフェイスのプロパティで、この WebVTT キューのキュー行を表します。
23
79
31
6
25
8
position

position は VTTCue インターフェイスのプロパティで、キューの行内での字下げを表します。
23
79
31
6
25
8
size

size は VTTCue インターフェイスのプロパティで、キューの大きさを動画の大きさのパーセント値で表します。
23
79
31
6
25
8
snapToLines

snapToLines は VTTCue インターフェイスのプロパティで、 VTTCue.line プロパティが行の数を表す整数であるか、動画の大きさに対するパーセント値であるかを示す論理値 (Boolean) です。
23
79
31
6
25
8
vertical

vertical は VTTCue インターフェイスのプロパティで、このキューの書字方向を表す文字列です。
23
79
31
6
25
8
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue = new VTTCue(0, 0.9, "Hildy!");
cue.align = "start";
console.log(cue.align);

track.addCue(cue);

実務での使いどころ

  • WebVTT cue settings の活用

    align は VTTCue インターフェイスのプロパティで、このテキストボックス内のテキストの行すべての配置を表します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク