ビデオプレーヤー video-player

ビデオプレーヤーは、ビューア内でビデオコンテンツが表示される長方形の領域です。

再生中のビデオのサイズがビデオプレーヤーのサイズと一致しない場合、ビデオコンテンツはビデオプレーヤーの長方形表示領域の中央に配置されます。

次の CSS クラスセレクターは、ビデオプレーヤーの外観を制御します。

.s7videoviewer .s7videoplayer

ビデオプレーヤーの CSS プロパティ

システムがビデオを再生できない場合に表示されるエラーメッセージをローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。

例 – ビデオプレーヤーのサイズが 512 x 288 ピクセルに設定されたビデオビューアを設定するには

.s7videoviewer .s7videoplayer{
background-color: transparent;
}

クローズドキャプションは、ビデオプレーヤーの内部コンテナに配置されます。 そのコンテナの位置は、サポートされる WebVTT 位置決め演算子で制御されます。 キャプションテキスト自体はそのコンテナ内にあり、そのスタイルは次の CSS クラスセレクターで制御されます。

. s7videoviewer .s7 videoplayer .s7caption

クローズドキャプションの CSS プロパティ

例 – クローズドキャプションのテキストを 14 ピクセル、薄いグレー、Arial® の半透明の黒い背景に設定する場合：

.s7videoviewer .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 クラスセレクターで制御します。

.s7videoviewer .s7videoplayer .s7waiticon

待機アイコンの CSS プロパティ

例 – 幅 101 ピクセル、高さ 29 ピクセルのバッファリングアニメーションを設定するには：

.s7videoviewer .s7videoplayer .s7waiticon {
 width: 101px;
 height: 29px;
 margin-left: -50px;
 margin-top: -15px;
 background-image: url(images/sdk/busyicon.gif);
}