DocumentatieNaslaggids voor dynamische mediasviewers

Knop Afspelen/Pauzeren play-pause-button

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

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

Met de knop Afspelen/Pauzeren wordt de video-inhoud afgespeeld of gepauzeerd wanneer de gebruiker erop klikt.

U kunt de grootte, de huid, en de positie van de knoop, met betrekking tot de controlebar die het bevat, door CSS rangschikken.

De volgende CSS-klassenkiezer bepaalt de vormgeving van de knop:

.s7video360viewer .s7playpausebutton

CSS-eigenschappen van de knop Afspelen/Onderbreken css-properties-of-the-play-pause-button

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
Breedte van de knop.
height
Hoogte van de knop.
background-image
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

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

Zie CSS-sprites.

NOTE
Deze knop ondersteunt zowel de state -, selected - als replay -kenmerkkiezers, die kunnen worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden. selected='true' komt met name overeen met de status “play” en selected='false' komt overeen met de status “pause”;
De kenmerkenkiezer replay='true' wordt ingesteld wanneer de video het einde heeft bereikt en wanneer u de knop selecteert, wordt het afspelen vanaf het begin opnieuw gestart.

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

Voorbeeld - aan opstelling een spel/pauzeknoop die 32 x 32 pixel is. Laat het zes pixels van de boven- en linkerrand van de besturingsbalk staan. En ten slotte wordt voor elk van de vier verschillende knoptoestanden een andere afbeelding weergegeven wanneer deze is geselecteerd of niet.

.s7video360viewer .s7playpausebutton {
top:6px;
left:6px;
width:32px;
height:32px;
}
.s7video360viewer .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/playBtn_up.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7video360viewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7video360viewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7video360viewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}
.s7video360viewer .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/pauseBtn_disabled.png); }
}
.s7video360viewer .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/replayBtn_up.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/replayBtn_over.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/replayBtn_down.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/replayBtn_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8