再生/一時停止ボタン

The play/pause button causes the video player to play or pause the video content when a user clicks it.

You can size, skin, and position the button, relative to the control bar that contains it, by CSS.

The following CSS class selector controls the appearance of the button:

.s7smartcropvideoviewer .s7playpausebutton

再生/一時停止ボタンの CSS プロパティ

トップ

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

右

Position from the right border, including padding.

左

Position from the left border, including padding.

下

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

width

ボタンの幅。

height

ボタンの高さ。

background-image

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

background-position

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

詳しくは、 CSS スプライト .

メモ

This button supports both the state, selected, and replay attribute selectors, which can be used to apply different skins to different button states. 特に selected='true' 「再生」状態に対応し、 selected='false' は「一時停止」の状態に対応します。

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

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

例

To set up a Play/Pause button that is 32 x 32 pixels. コントロールバーの上および左端から 6 ピクセルの位置に配置します。 最後に、選択時または未選択時の 4 つのボタン状態ごとに異なる画像を表示します。

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

このページ