Knappen Spela upp/Paus
Senast uppdaterad: 22 juli 2024
Skapat för:
- Utvecklare
- Användare
Knappen play/pause gör att videospelaren spelar upp eller pausar videoinnehållet när en användare klickar på det.
Du kan ändra storlek, skal och position på knappen, i förhållande till kontrollfältet som innehåller den, enligt CSS.
Följande CSS-klassväljare styr knappens utseende:
.s7interactivevideoviewer .s7playpausebutton
CSS-egenskaper för uppspelnings-/pausknappen
ö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 | Knappens bredd. |
height | Knappens höjd. |
background-image | Bilden som visas för ett visst knappläge. |
background-position |
Placera inuti en teckningssprite, om CSS-sprites används. Se CSS-fragment. |
Den här knappen stöder både attributväljarna
state
, selected
och replay
som kan användas för att tillämpa olika skal på olika knapplägen. selected='true'
motsvarar i synnerhet uppspelningsläget och selected='false'
motsvarar pausläget.Attributet
replay='true'
anges när videon har nått slutet och om du väljer knappen startas uppspelningen om från början.Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.
Exempel
Om du vill ställa in en uppspelnings-/pausknapp som är 32 x 32 pixlar och placerad sex pixlar från kontrollfältets övre och vänstra kant. Slutligen visas olika bilder för vart och ett av de fyra olika knapplägena när de är markerade eller inte markerade.
.s7interactivevideoviewer .s7playpausebutton {
top:6px;
left:6px;
width:32px;
height:32px;
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/playBtn_up.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/pauseBtn_disabled.png); }
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/replayBtn_up.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/replayBtn_over.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/replayBtn_down.png);
}
.s7interactivevideoviewer .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/replayBtn_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8