DokumentationDynamic Media Viewers-Referenzhandbuch

Taste PLAY/PAUSE play-pause-button

Last update: Mon Dec 23 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Entwickler
  • Benutzende

Durch Klicken auf die Schaltfläche „Wiedergabe/Pause“ wird der Video-Player wiedergegeben oder der Videoinhalt angehalten, wenn ein Benutzer darauf klickt.

Sie können die Größe, das Design und die Position der Schaltfläche in Bezug auf die Steuerleiste, die sie enthält, per CSS festlegen.

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Schaltfläche:

.s7interactivevideoviewer .s7playpausebutton

CSS-Eigenschaften der Wiedergabe-/Pause-Schaltfläche css-properties-of-the-play-pause-button

Top-
Position ab dem oberen Rahmen, einschließlich Auffüllung.
rechte
Position vom rechten Rand aus, einschließlich Abstand.
linker
Position vom linken Rand aus, einschließlich Auffüllung.
untere
Position ab dem unteren Rand, einschließlich Abstand.
Breite
Breite der Schaltfläche.
Höhe
Höhe der Schaltfläche.
Hintergrundbild-
Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.
Hintergrundposition

Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.

Siehe von CSS-Sprites.

NOTE
Diese Schaltfläche unterstützt sowohl die state-, selected- als auch replay-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können. Insbesondere entspricht selected='true' dem „Play“-Zustand und selected='false' dem „Pause“-Zustand;
Das Attribut replay='true' wird festgelegt, wenn das Video das Ende erreicht hat und durch Klicken auf die Schaltfläche die Wiedergabe von vorne beginnt.

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel section-e8caea0a303c425a8a637c2a47c06355

So richten Sie eine Wiedergabe-/Pause-Schaltfläche ein, die 32 x 32 Pixel groß ist und sechs Pixel vom oberen und linken Rand der Steuerleiste entfernt positioniert ist. Und schließlich zeigt es ein anderes Bild für jeden der vier verschiedenen Schaltflächenstatus an, wenn ausgewählt oder nicht ausgewählt.

.s7interactivevideoviewer .s7playpausebutton {
top:6px;
left:6px;
width:32px;
height:32px;
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/playBtn_up.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/pauseBtn_disabled.png); }
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/replayBtn_up.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/replayBtn_over.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/replayBtn_down.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/replayBtn_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8