DokumentationReferenshandbok för Dynamic Media Viewers

helskärmsknapp full-screen-button

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Skapat för:

  • Utvecklare
  • Användare

Helskärmsknappen gör att videospelaren övergår till eller avslutar helskärmsläget när användaren klickar på den.

Du kan ändra storlek, skal och position för helskärmsknappen, i förhållande till kontrollfältet som innehåller den, enligt CSS.

Utseendet på helskärmsknappen styrs av CSS-klassväljaren:

.s7interactivevideoviewer .s7fullscreenbutton

CSS-egenskaper för helskärmsknappen

övre
Placera från den övre kanten, inklusive utfyllnad.
höger
Placera från den högra kanten, inklusive utfyllnad.
kvar
Placera från den vänstra kanten, inklusive utfyllnad.
nederkant
Placera från den nedre kanten, inklusive utfyllnad.
width
Helskärmsknappens bredd.
height
Helskärmsknappens höjd.
background-image
Den bild som visas för ett visst knappläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se CSS-fragment.

NOTE
Den här knappen stöder både attributväljarna state och selected som kan användas för att tillämpa olika skal på olika knapplägen. selected='true' motsvarar i synnerhet helskärmsläget och selected='false' motsvarar normalläget.

Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel section-e8caea0a303c425a8a637c2a47c06355

Om du vill ställa in en helskärmsknapp som är 32 x 32 pixlar och placerad 6 pixlar från kontrollfältets övre och högra kant. Du kan även visa olika bilder för vart och ett av de fyra olika knapplägena när du markerar dem eller inte markerar dem.

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