ビデオプレーヤー video-player

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

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

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

.s7mixedmediaviewer .s7videoplayer

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

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

例 – ビデオプレーヤーを透明にするには：

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

キャプションはビデオプレーヤー内の内部コンテナに入れられます。 そのコンテナの位置は、サポートされているWebVTT ポジショニングオペレーターによって制御されます。 キャプションテキスト自体はそのコンテナ内にあります。そのスタイルは、次のCSS クラスセレクターで制御されます。

.s7mixedmediaviewer .s7videoplayer .s7caption

キャプションのCSS プロパティ

例 – 半透明の黒い背景にキャプションテキストを14 ピクセルの薄いグレーのArial®に設定するには、次の手順を実行します。

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

.s7mixedmediaviewer .s7videoplayer .s7waiticon

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

例 – バッファリングアニメーションを幅101 ピクセル、高さ29 ピクセルに設定するには、次の手順を実行します。

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