DocumentatieNaslaggids voor dynamische mediasviewers

Knop Bijschrift caption-button

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

Met deze knop schakelt u de weergave van een gesloten bijschrift in of uit. De eigenschap is niet zichtbaar als de parameter caption niet is opgegeven.

U kunt deze knop groter of kleiner maken en plaatsen ten opzichte van de besturingsbalk die de knop bevat, door CSS te gebruiken.

De vormgeving van deze knop wordt bepaald door de volgende CSS-klassenkiezer:

.s7interactivevideoviewer .s7closedcaptionbutton

CSS eigenschappen van de titelknoop

top
Positie vanaf de bovenrand, inclusief opvulling.
right
Positie vanaf de rechterrand, inclusief opvulling.
left
Positie vanaf de linkerrand, inclusief opvulling.
bottom
Positie vanaf de onderrand, inclusief opvulling.
width
De breedte van de knop Volledig scherm.
height
De hoogte van de knop Volledig scherm.
background-image
De weergegeven afbeelding voor een bepaalde knopstatus.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie CSS-sprites.

NOTE
Deze knop ondersteunt zowel de state - als selected -kenmerkkiezers, die kunnen worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden. Met name selected='true' komt overeen met de status wanneer bijschriften zichtbaar zijn en selected='false' wordt gebruikt wanneer bijschriften verborgen zijn.

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld section-e8caea0a303c425a8a637c2a47c06355

Een knop voor een gesloten bijschrift van 28 x 28 pixels instellen. De knoop moet vier pixel van de bovenkant en 68 pixel van de juiste rand van de controlebar worden geplaatst. En er moet een andere afbeelding worden weergegeven voor elk van de vier verschillende knoptoestanden, wanneer deze is geselecteerd of niet.

.s7interactivevideoviewer .s7closedcaptionbutton {
 position:absolute;
 top:4px;
 right:68px;
 width:28px;
 height:28px;
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='true'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_up.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='true'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='true'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='false'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='false'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='false'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8