Videoskrubber video-scrubber

Videonavigeringen är den vågräta skjutreglaget som gör att en användare dynamiskt kan söka till valfri tidsposition i den video som spelas upp.

Rubbens 'knob' rör sig också när videon spelas upp för att ange videons aktuella tidsposition under uppspelningen. Videonavigeringslisten har alltid hela kontrollfältets bredd. Det går att skapa skal för videospolaren och ändra dess höjd och lodräta position med CSS.

Videonavigeringens allmänna utseende styrs med följande CSS-klassväljare:

.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob

CSS-egenskaper för videonavigeringslisten

top
Placera från den övre kanten, inklusive utfyllnad.
nederkant
Placera från den nedre kanten, inklusive utfyllnad.
height
Höjden på videobandspelaren.
background-color
Färgen på videobandspelaren.

Följande CSS-klassväljare spårar indikatorerna för bakgrund, uppspelning och inläsning:

.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed

Spårets CSS-egenskaper

height
Höjden på motsvarande spår.
background-color
Färgen på motsvarande spår.

Följande CSS-klassväljare styr ratten:

.s7interactivevideoviewer .s7videoscrubber .s7knob

CSS-egenskaper för ratten

top
Lodrät rattförskjutning.
width
Bredd på ratten.
height
Höjd på ratten.
background-image
Knacka teckningar.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se CSS-fragment.

Följande CSS-klassväljare styr den tid som spelas upp:

.s7interactivevideoviewer .s7videoscrubber .s7videotime

CSS-egenskaper för den tid som spelas upp

font-family
Den teckensnittsfamilj som ska användas för visningstexten.
font-size
Den teckensnittsstorlek som ska användas för visningstexten.
färg
Teckenfärgen som ska användas för visningstexten.
width
Bredd på bubbelområde.
height
Bubbelområdets höjd.
utfyllnad
Utfyllnad för bubbelområde.
background-image
Bubbelteckningar.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se CSS-fragment.

textjustering
Textens justering mot bubbelområdet.

Verktygstipset för videospolning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.

Exempel - Om du vill ställa in ett videovisningsprogram med en videobub och anpassade spårfärger som är tio pixlar höga. Placera den tio pixlar och 35 pixlar från kontrollfältets övre och vänstra kant.

.s7interactivevideoviewer .s7videoscrubber  {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7interactivevideoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}

När videokapitelmarkören är aktiverad med navigation -parameter visas kapitelplaceringar som markörer ovanpå videonavigeringsspåret.

Videokapitelmarkören styrs av följande CSS-klassväljare:

.s7interactivevideoviewer .s7videoscrubber .s7navigation

CSS-egenskaper för videokapitelmarkören

width
Bredd på videokapitelmarkör.
height
Höjd på videokapitelmarkör.
background-image
Grafik för videokapitelmarkörer.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se CSS-fragment.

NOTE
Den här knappen har stöd för state attributväljaren, som du kan använda för att använda olika skal på olika knapplägen. I synnerhet selected='default' motsvarar standardläget för kapitelmarkör för video och selected='over' används när videokapitelmarkören aktiveras av en muspekare eller en pekgest.

Exempel - Om du vill ställa in en videokapitelmarkör som är 5 x 8 pixlar och använder olika teckningar för läget"default" och"over".

.s7interactivevideoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] {
background-image: url("images/v2/VideoScrubberDiamond_over.png");
}

Videokassubben placeras ovanpå videokapitelmarkören och visar titeln, starttiden och beskrivningen för ett visst kapitel. Det går att styra maximal bubbelbredd och lodrät förskjutning i förhållande till videonavigeringsspåret. Resten beräknas automatiskt av komponenten.

Videokassubblan styrs av följande CSS-klassväljare:

.s7interactivevideoviewer .s7videoscrubber .s7chapter

CSS-egenskaper för videokapitelbubblan

max-width
Högsta bredd för videokapitelbubblan.
nederkant
Lodrät förskjutning från videonavigeringsspåret.

Exempel - Om du vill ställa in en videokapitelbubbla som är 235 pixlar bred och har åtta pixlar uppåt från videonavigeringsspårets nederkant.

.s7interactivevideoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}

Videokassubben består av ett valfritt sidhuvud och -innehåll. Rubriken har den valfria kapitelstarttiden och kapiteltiteln.

Rubriken styrs av följande CSS-klassväljare:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

CSS-egenskaper för videokapitelbubblans rubrik

height
Höjd på videokapitelbubblans sidhuvud.
utfyllnad
Inre utfyllnad för videokapitelsidhuvudstext.
background-color
Bakgrundsfärg för videokapitelbubblans sidhuvud.
line-height
Höjd på textrad för videokapitelbubblor.

Exempel - Om du vill ställa in ett videokapitelbubbelhuvud som är 22 pixlar högt, en radhöjd på 22 pixlar, en vågrät marginal på 12 pixlar och en grå bakgrund.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header {
height:22px;
padding:0 12px;
line-height:22px;
background-color: rgba(51, 51, 51, 0.8);
}

Starttiden för videokapitlet styrs av följande CSS-klassväljare:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

CSS-egenskaper för videokapitlets starttid

färg
Textfärg.
font-weight
Teckenbredd.
font-size
Teckenstorlek.
font-family
Teckensnittsfamilj.
utfyllnad höger
Utfyllnad mellan starttid och kapitelrubrik.

Exempel - För att ställa in kapitelns starttid med teckensnittet Verdana på tio gråa pixlar och med utfyllnaden på tio pixlar till höger.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime {
color: #dddddd;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
padding-right: 10px;
}

Videoklippets titel styrs av följande CSS-klassväljare:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title

CSS-egenskaper för videokapiteltiteln

färg
Textfärg för videokapitelrubrik.
font-weight
Teckensnittsbredd för videokapitelrubrik.
font-size
Teckensnittsstorlek för videokapitelrubrik.
font-family
Teckensnittsfamilj för videokapitelrubriker.

Exempel - Om du vill ställa in en videokapiteltitel som använder ett vitt, fetstilt teckensnitt på tio pixlar.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title {
color: #ffffff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
}

Beskrivningen av videokapitlet styrs av följande CSS-klassväljare:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description

CSS-egenskaper i videokapitelbeskrivningen

färg
Textfärg för videokapitelbeskrivning.
background-color
Bakgrundsfärg i videokapitelbeskrivning.
font-weight
Teckensnittsbredd för videokapitelbeskrivning.
font-size
Teckensnittsstorlek för beskrivning av videokapitel.
font-family
Teckensnittsfamilj för videokapitelbeskrivning.
line-height
Radhöjd för videokapitelbeskrivning.
utfyllnad
Inre utfyllnad för videokapitelbeskrivning.

Exempel - Om du vill ställa in videokapitelbeskrivning med ett mörkgrått, 11 pixlar Verdana-teckensnitt, med ljusgrå bakgrund. En höjd på fem pixlar, vågrät utfyllnad på 12 pixlar, övre utfyllnad på 12 pixlar och nedre utfyllnad på nio pixlar.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description {
color: #333333;
background-color: rgba(221, 221, 221, 0.9);
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 15px;
padding: 12px 12px 9px;
}

Kassaanslutningen längst ned i kapitelbubblan styrs av följande CSS-klassväljare:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail

CSS-egenskaper för Edge-kopplingen

border-color

Konnektionens färg.

Definierad som <color> transparent så att bara den övre kantlinjefärgen definieras och de återstående kantlinjerna förblir genomskinliga.

border-width

Bredd på kantkoppling.

Definierad som <width> <width> 0 så att samma bredd bara definieras för den övre och den vågräta kantlinjen och den nedre kantens bredd är 0 .

marginal
Definierar endast en negativ nedre marginal. Det ska ha samma värde som border-width .

Exempel - Så här ställer du in en grå, sex pixlars kilkopplingskontakt:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8