「キャプション」ボタン caption-button

最終更新日： 2025年10月14日

トピック：
{"id":"a01bfd36-4ab8-4bf8-9dc0-5b45b890552e"}

作成対象：

{"id":"d378ca77-2da1-4f39-ad92-1917fe974a38"}
{"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

このボタンは、クローズドキャプション表示のオンとオフを切り替えます。キャプションパラメーターが指定されていない場合は表示されません。

CSSを使用して、このボタンを含むコントロールバーに対して、このボタンのサイズ、スキン、位置を調整できます。

このボタンの外観は、次のCSS クラスセレクターで制御されます。

.s7videoviewer .s7closedcaptionbutton

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

上位

パディングを含む上部境界線からの位置。

右

パディングを含む右端からの位置。

さんがを残しました

パディングを含む左端からの位置。

下

パディングを含む下部境界線からの位置。

幅

フルスクリーンボタンの幅。

の高さ

フルスクリーンボタンの高さ。

背景画像

特定のボタン状態の表示画像。

background-position

CSS スプライトを使用する場合は、アートワークスプライト内に配置します。

CSS スプライトを参照してください。

NOTE

このボタンは、stateとselectedの両方の属性セレクターをサポートしており、異なるスキンを異なるボタンの状態に適用するために使用できます。特に、selected='true'はキャプションが表示されている状態に対応し、selected='false'はキャプションが非表示の状態に使用されます。

ボタンツールのヒントはローカライズできます。詳しくは、ユーザーインターフェイス要素のローカライゼーションを参照してください。

例 section-e8caea0a303c425a8a637c2a47c06355

コントロールバーの上端から4 ピクセル、右端から68 ピクセルに位置する28×28 ピクセルのクローズドキャプションボタンを設定する。最後に、選択または選択されていない4つの異なるボタンの状態ごとに異なる画像が表示されます。

.s7videoviewer .s7closedcaptionbutton {
 position:absolute;
 top:4px;
 right:68px;
 width:28px;
 height:28px;
}
.s7videoviewer .s7closedcaptionbutton[selected='true'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_up.png);
}
.s7videoviewer .s7closedcaptionbutton[selected='true'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7videoviewer .s7closedcaptionbutton[selected='true'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7videoviewer .s7closedcaptionbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7videoviewer .s7closedcaptionbutton[selected='false'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7videoviewer .s7closedcaptionbutton[selected='false'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7videoviewer .s7closedcaptionbutton[selected='false'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7videoviewer .s7closedcaptionbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}

recommendation-more-help

dynamic-media-developer-resources-help-aem-viewers-ref