DokumentationDynamic Media Viewer-Referenzhandbuch

Schaltfläche „Vollbild“ full-screen-button

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

Erstellt für:

  • Entwickler
  • Benutzende

Durch Klicken auf die Schaltfläche im Vollbildmodus wechselt der Smart-Crop-Video-Player in den Vollbildmodus oder verlässt ihn, wenn er angeklickt wird.

Sie können die Vollbildschaltfläche per CSS skalieren, ausrichten und positionieren, und zwar relativ zur Steuerleiste, in der sie enthalten ist.

Das Erscheinungsbild der Vollbildschaltfläche wird mit dem CSS-Klassenselektor gesteuert:

.s7smartcropvideoviewer .s7fullscreenbutton

CSS-Eigenschaften der Vollbildschaltflä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
Die Breite der Vollbildschaltfläche.
Höhe
Die Höhe der Vollbildschaltfläche.
Hintergrundbild-
Das angezeigte Bild für einen bestimmten Schaltflächenstatus.
Hintergrundposition

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

Siehe von CSS-Sprites.

NOTE
Diese Schaltfläche unterstützt sowohl den state- als auch den selected-Attributselektor, mit dem verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können. Insbesondere entspricht selected='true' dem „Vollbild“-Zustand und selected='false' dem „Normal“-Zustand.

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

Beispiel section-e8caea0a303c425a8a637c2a47c06355

So richten Sie eine Vollbildschaltfläche ein, die 32 x 32 Pixel groß ist und 6 Pixel vom oberen und rechten Rand der Steuerleiste entfernt positioniert ist. Zeigen Sie außerdem für jeden der vier verschiedenen Schaltflächenstatus ein anderes Bild an, wenn Sie ausgewählt sind oder nicht.

.s7smartcropvideoviewer . s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8