DokumentationReferenshandbok för Dynamic Media Viewer

helskärmsknapp full-screen-button

Last update: Fri Nov 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Developer
  • User

Helskärmsknappen gör att videospelaren Smart Crop (smart beskärning) går in i eller avslutar helskärmsläget när en användare 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:

.s7smartcropvideoviewer .s7fullscreenbutton

CSS-egenskaper för helskärmsknappen

top
Placera från den övre kanten, inklusive utfyllnad.
höger
Placera från den högra kanten, inklusive utfyllnad.
vänster
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 har stöd för båda state och selected attributväljare, som kan användas för att tillämpa olika skal på olika knapplägen. Särskilt gäller följande: selected='true' motsvarar läget"helskärm" och selected='false' motsvarar läget “normal”.

Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.

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.

.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