Taste PLAY/PAUSE
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:
.s7video360viewer .s7playpausebutton
CSS-Eigenschaften der Wiedergabe-/Pause-Schaltfläche
| 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. |
NOTEstate-, 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;replay='true' wird festgelegt, wenn das Video das Ende erreicht hat und wenn Sie auf die Schaltfläche klicken, wird die Wiedergabe von vorne gestartet.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel - Zum Einrichten einer Wiedergabe-/Pause-Schaltfläche mit 32 x 32 Pixel. Positionieren Sie sie sechs Pixel vom oberen und linken Rand der Steuerleiste. Und schließlich zeigt ein anderes Bild für jeden der vier verschiedenen Schaltflächenstatus an, wenn ausgewählt oder nicht ausgewählt.
.s7video360viewer .s7playpausebutton {
top:6px;
left:6px;
width:32px;
height:32px;
}
.s7video360viewer .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/playBtn_up.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7video360viewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7video360viewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7video360viewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}
.s7video360viewer .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/pauseBtn_disabled.png); }
}
.s7video360viewer .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/replayBtn_up.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/replayBtn_over.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/replayBtn_down.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/replayBtn_disabled.png);
}