Schaltfläche "Video im Vollbildmodus"

Über die Schaltfläche "Vollbild"gelangt der Viewer in den Vollbildmodus oder beendet ihn, wenn er vom Benutzer ausgewählt wurde. Sie wird verwendet, wenn der Viewer Videos anzeigt und in der Steuerleiste positioniert ist. Diese Schaltfläche wird nicht angezeigt, wenn der Viewer im Popup-Modus arbeitet und das System den nativen Vollbildmodus nicht unterstützt.

Sie können die Vollbildschaltfläche in Bezug auf die sie enthaltende Steuerleiste durch CSS anpassen, gestalten und positionieren.

Das Erscheinungsbild der Schaltfläche im Vollbildmodus wird mit der CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7fullscreenbutton

CSS-Eigenschaften der Schaltfläche "Vollbild"

Anfang

Position vom oberen Rand, einschließlich Abstand.

rechts

Position vom rechten Rand, einschließlich Abstand.

links

Position vom linken Rand, einschließlich Abstand.

unten

Position vom unteren Rand, einschließlich Abstand.

width

Die Breite der Schaltfläche im Vollbildmodus.

height

Die Höhe der Schaltfläche im Vollbildmodus.

background-image

Das angezeigte Bild für einen gegebenen Schaltflächenstatus.

background-position

Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt beide state und selected -Attributselektoren, die verwendet werden können, um verschiedene Skins auf unterschiedliche Schaltflächenzustände anzuwenden. Insbesondere selected='true' entspricht dem Status "Vollbild"und selected='false' entspricht dem Status “normal”.

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

Beispiel

So richten Sie eine Vollbildschaltfläche von 32 x 32 Pixel ein und positionieren 6 Pixel von der oberen und rechten Kante der Steuerleiste. Zeigen Sie außerdem ein anderes Bild für jeden der vier Schaltflächenstatus an, wenn diese ausgewählt sind oder nicht ausgewählt sind.

.s7mixedmediaviewer . s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}

Auf dieser Seite