Knop Afspelen/Pauzeren play-pause-button
De knop Afspelen/Pauzeren zorgt ervoor dat de videospeler de video-inhoud afspeelt of pauzeert wanneer de gebruiker deze selecteert.
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:
.s7mixedmediaviewer .s7playpausebutton
CSS-eigenschappen van de knop Afspelen/Onderbreken css-properties-of-the-play-pause-button
NOTE
Deze knop ondersteunt beide
state
, selected
, en replay
kenmerkkiezers, die kunnen worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden. Met name: selected='true'
komt overeen met de status “play” en selected='false'
komt overeen met de pauzestatus;replay='true'
Dit kenmerk 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 Lokalisatie van gebruikersinterface-elementen voor meer informatie .
Voorbeeld section-e8caea0a303c425a8a637c2a47c06355
Een knop Afspelen/Pauzeren van 32 x 32 pixels instellen en 6 pixels van de boven- en linkerrand van de besturingsbalk plaatsen. En ten slotte wordt voor elk van de vier verschillende knoptoestanden een andere afbeelding weergegeven wanneer deze is geselecteerd of niet.
.s7mixedmediaviewer .s7playpausebutton {
top:6px;
left:6px;
width:32px;
height:32px;
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/playBtn_up.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/pauseBtn_disabled.png); }
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/replayBtn_up.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/replayBtn_over.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/replayBtn_down.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/replayBtn_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8