ビデオプレーヤー
最終更新日: 2024年7月22日
作成対象:
- 開発者
- ユーザー
ビデオプレーヤーは、ビューア内でビデオコンテンツが表示される長方形の領域です。
再生中のビデオのサイズがビデオプレーヤーのサイズと一致しない場合、ビデオコンテンツはビデオプレーヤーの長方形表示領域の中央に配置されます。
次の CSS クラスセレクターは、ビデオプレーヤーの外観を制御します。
.s7mixedmediaviewer .s7videoplayer
ビデオプレーヤーの CSS プロパティ
の背景色の | ビデオプレーヤーの背景色。 |
システムがビデオを再生できない場合に表示されるエラーメッセージは、ローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – ビデオプレーヤーを透明にするには:
.s7mixedmediaviewer .s7videoplayer {
background-color: transparent;
}
キャプションは、ビデオプレーヤーの内部コンテナに配置されます。 そのコンテナの位置は、サポートされる WebVTT 位置決め演算子で制御されます。 キャプションテキスト自体はそのコンテナ内にあります。そのスタイルは、次の CSS クラスセレクターで制御されます。
.s7mixedmediaviewer .s7videoplayer .s7caption
キャプションの CSS プロパティ
CSS プロパティ | 説明 |
---|---|
の背景色の | キャプションテキストの背景。 |
color | キャプションのテキストの色。 |
フォントの太さの | フォントの線幅。 |
font-size | フォントサイズ。 |
フォントファミリーの | フォントファミリー。 |
例 – キャプションテキストを半透明の黒い背景で 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 プロパティ
CSS プロパティ | 説明 |
---|---|
幅 | アニメーションアイコンの幅。 |
高さ | アニメーション アイコンの高さ。 |
margin-left | アニメーションアイコンの左余白。通常は、アイコンの幅の半分を引きます。 |
margin-top | アニメーション アイコン上余白(通常はアイコンの高さの半分を引いた値) |
background-image | ノブ アートワーク。 |
例 – 幅 101 ピクセル、高さ 29 ピクセルのバッファリングアニメーションを設定するには:
.s7mixedmediaviewer .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