キャプションのスタイリング
キャプションのデフォルトの外観は変更できるため、キャプションのスタイルを設定できます。キャプションのスタイルを設定する方法はいくつかあります。
WebVTTファイルにスタイル設定オプションを追加する
スタイルオプションは、WebVTT ファイルに直接適用でき、キャプションやテキストの位置や向きを変更できます。以下にいくつかの例を挙げます。
- 太字テキスト
<b>Lorem ipsum</b> - 斜体テキスト
<i>dolor sit amet</i> - 下線付きのテキスト
<u>consectetuer adipiscing</u>
キャプションの位置は Brightcove Player で管理されるため、スタイルを使用してキャプションの位置や向きを変更することはできません。インラインスタイルは、多くのスタイリングオプションを提供しません。より多様なスタイリングオプションについては、次のセクションで説明するように CSS ファイルを使用できます。
インラインスタイルの詳細については、このリンクを参照してください。
CSSファイルにカスタムクラスを作成する
カスタムクラスは、CSS ファイルの一部として作成し、WebVTT ファイル内の要素に適用することができます。たとえば、以下のクラスは、テキストの色を白、背景色を青に変更し、フォントを太字にします。
<style>
.captionstyle {
color:white;
background-color:blue;
font-weight:bold
}
</style>
その後、WebVTT ファイルを変更して、captionstyle新しいセレクタを適用できます。cプレフィックスは、使用されるスタイルがクラスセレクタであることを示すために使用されます（これは WebVTT 形式の標準です）。
WEBVTT 00: 00: 00.000-> 00: 00: 03.530 align: middle line: 84％00: 00: 03.530-> 00: 00: 06.510整列: 中央線: 90％<c.captionstyle>このビデオでは、ログインしてナビゲートする方法を学びます</c>00: 00: 06.510-> 00: 00: 09.550整列: 中央線: 84％<c.captionstyle>Video Cloud Studioの内部。</c>
キャプションファイルのスタイル設定オプションの詳細については、 W3C WebVTT仕様ドキュメントを参照するか、このリンクを参照してください。
CSS スタイルガイド
次の表に、Brightcove Player でのキャプションのスタイリングでサポートされる CSS プロパティとサポートされていない CSS プロパティを示します。
| CSS プロパティ | サポートされている | サポートされていません |
|---|---|---|
font-family |
✔ | |
font-size |
✔ | |
font-weight |
✔ | |
color |
✔ | |
background |
✔ | |
background-color |
✔ | |
opacity |
✔ | |
visibility |
✔ | |
text-decoration |
✔ | |
text-shadow |
✔ | |
width |
✔ | |
height |
✔ | |
line-height |
✔ | |
white-space |
✔ | |
word-wrap |
✔ | |
top |
✔ | |
left |
✔ | |
display |
✔ | |
direction |
✔ |
キャプションファイルのスタイル設定オプションの詳細については、 W3C WebVTT 仕様書、またはビデオ字幕と WebVTT を参照してください。
キャプションのユーザースタイル設定
iOS デバイスのユーザーの場合、キャプションのスタイル設定は iOS の設定で制御されます。設定にアクセスするには、設定 > 全般的 > アクセシビリティ > 字幕とキャプション > スタイル。ここでは、定義済みのスタイルを選択するか、新しいスタイルを作成できます。
デスクトップデバイスやAndroidデバイスの視聴者はキャプション設定メニューを使って、キャプションの外観を変更できます。
キャプション設定メニューをクリックすると、オーバーレイが表示され、以下のキャプションプロパティを設定できます。
- 前景の色と不透明度
- 背景色と不透明度
- ウィンドウの色と不透明度
- フォントサイズ
- 文字エッジスタイル
- フォントファミリー
キャプションをデフォルトのスタイル設定に戻すには、[デフォルト]をクリックします。
制限事項
キャプションは、次のデバイスタイプおよびオペレーティングシステムでサポートされています。
- iOS 10+
- アンドロイド 7+
- インターネットエクスプローラー 11+
- デスクトップ上の Edge、Chrome、Safari、Firefox の最新ブラウザー