ビデオプレーヤー video-player
ビデオプレーヤーは、ビューア内でビデオコンテンツが表示される矩形の領域です。
再生中のビデオのサイズがビデオプレーヤーのサイズと一致しない場合、ビデオコンテンツはビデオプレーヤーの長方形の表示領域内に中央配置されます。
以下に示すCSSクラスセレクターで、ビデオプレーヤーの外観を制御します。
.s7interactivevideoviewer .s7videoplayer
ビデオプレーヤーのCSSプロパティ
システムでビデオを再生できない場合に表示されるエラーメッセージをローカライズできます。
ユーザインターフェイス要素のローカライゼーションを参照してください。
例 — サイズが512 x 288ピクセルのビデオプレーヤーを持つビデオビューアを設定するには、次のように記述します。
.s7interactivevideoviewer .s7videoplayer{
background-color: transparent;
}
クローズドキャプションは、ビデオプレーヤー内の内部コンテナに配置されます。 そのコンテナの位置は、サポートされているWebVTTの位置決め演算子で制御します。 キャプションテキスト自体はコンテナ内にあり、そのスタイルは以下のCSSクラスセレクターを使用して制御します。
.s7interactivevideoviewer .s7videoplayer .s7caption
クローズドキャプションのCSSプロパティ
例 section-5b82913ff3c44b7b8187969cb15e9560
14ピクセル、ライトグレー、Arial®のクローズドキャプションテキストを、半透明の黒の背景に設定するには、次のように記述します。
.s7interactivevideoviewer .s7videoplayer .s7caption {
background-color: rgba(0,0,0,0.75);
color: #e6e6e6;
font-weight: normal;
font-size: 14px;
font-family: Arial,Helvetica,sans-serif;
}
バッファリングアニメーションの外観は、以下のCSSクラスセレクターを使用して制御します。
.s7interactivevideoviewer .s7videoplayer .s7waiticon
待機アイコンのCSSプロパティ
CSSプロパティ
説明
width
アニメーションアイコンの幅。
height
アニメーションアイコンの高さ
margin-left
アニメーションアイコンの左余白。通常は、アイコンの幅の半分を引いた値。
margin-top
アニメーションアイコンの上余白(通常はアイコンの高さの半分を引いた値)。
background-image
ノブのアートワーク。
例 — 幅が101ピクセル、高さが29ピクセルのバッファリングアニメーションを設定するには、次のように記述します。
.s7interactivevideoviewer .s7videoplayer .s7waiticon {
width: 101px;
height: 29px;
margin-left: -50px;
margin-top: -15px;
background-image: url(images/sdk/busyicon.gif);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8