再生/一時停止ボタン play-pause-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 .s7playpausebutton

再生/一時停止ボタンのCSS プロパティ css-properties-of-the-play-pause-button

上位

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

右

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

さんがを残しました

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

下

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

幅

ボタンの幅。

の高さ

ボタンの高さ。

背景画像

特定のボタン状態に対して表示される画像。

background-position

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

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

NOTE

このボタンは、state、selectedおよびreplay属性セレクターの両方をサポートしており、異なるスキンを異なるボタンの状態に適用するために使用できます。特に、selected='true'は「再生」状態に対応し、selected='false'は「一時停止」状態に対応します。

属性セレクターreplay='true'は、ビデオが最後に達し、ボタンを選択すると最初から再生が再開されるときに設定されます。

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

例 section-e8caea0a303c425a8a637c2a47c06355

コントロールバーの上端と左端から6 ピクセル位置に32×32 ピクセルの再生/一時停止ボタンを設定する。最後に、選択または選択されていない4つの異なるボタンの状態ごとに異なる画像が表示されます。

.s7videoviewer .s7playpausebutton {
top:6px;
left:6px;
width:32px;
height:32px;
}
.s7videoviewer .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/playBtn_up.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7videoviewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7videoviewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7videoviewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}
.s7videoviewer .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/pauseBtn_disabled.png); }
}
.s7videoviewer .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/replayBtn_up.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/replayBtn_over.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/replayBtn_down.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/replayBtn_disabled.png);
}

recommendation-more-help

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