DokumentationReferenshandbok för Dynamic Media Viewer

Knappen Spela upp/Paus play-pause-button

Last update: Mon May 22 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Developer
  • User

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 css-properties-of-the-play-pause-button

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
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.

NOTE
Den här knappen har stöd för båda state, selectedoch replay attributväljare, som kan användas för att tillämpa olika skal på olika knapplägen. I synnerhet selected='true' motsvarar"play"-läget och selected='false' motsvarar läget “paus”,
Attribut replay='true' anges när videon har nått slutet och knappen startar om uppspelningen från början.

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

Exempel section-e8caea0a303c425a8a637c2a47c06355

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