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:
.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob
CSS-egenskaper för videonavigeringslisten
Följande CSS-klassväljare spårar indikatorerna för bakgrund, uppspelning och inläsning:
.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .s7videoscrubber .s7trackplayed
Spårets CSS-egenskaper
Följande CSS-klassväljare styr ratten:
.s7videoviewer .s7videoscrubber .s7knob
CSS-egenskaper för ratten
Följande CSS-klassväljare styr den tid som spelas upp:
.s7videoviewer .s7videoscrubber .s7videotime
CSS-egenskaper för den tid som spelas upp
Verktygstipset för videospolning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.
Exempel - Så här ställer du in ett videovisningsprogram med en videonavigeringsfunktion med anpassade spårfärger. Rutningen måste vara tio pixlar hög och placerad tio pixlar och 35 pixlar från kontrollfältets övre och vänstra kant.
.s7videoviewer .s7videoscrubber {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7videoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7videoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7videoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
När videochaping är aktiverat med navigation
-parameter visas kapitelplaceringar som markörer ovanpå videonavigeringsspåret.
Videokapitelmarkören styrs av följande CSS-klassväljare:
.s7videoviewer .s7videoscrubber .s7navigation
CSS-egenskaper för videokapitelmarkören
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".
.s7videoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7videoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7videoviewer .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:
.s7videoviewer .s7videoscrubber .s7chapter
CSS-egenskaper för videokapitelbubblan
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.
.s7videoviewer .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:
.s7videoviewer .s7videoscrubber .s7chapter .s7header
CSS-egenskaper för videokapitelbubblans rubrik
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.
.s7videoviewer .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:
.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime
CSS-egenskaper för videokapitlets starttid
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.
.s7videoviewer .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:
.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title
CSS-egenskaper för videokapiteltiteln
Exempel - Om du vill ställa in en videokapiteltitel som använder ett vitt, fetstilt teckensnitt på tio pixlar.
.s7videoviewer .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:
.s7videoviewer .s7videoscrubber .s7chapter .s7description
CSS-egenskaper i videokapitelbeskrivningen
Exempel - Om du vill ställa in videokapitelbeskrivning med ett mörkgrått, 11 pixlar Verdana-teckensnitt, med ljusgrå bakgrund. Slutligen används fem pixlars radhöjd, 12 pixlars vågrät utfyllnad, 12 pixlars övre utfyllnad och 9 pixlars nedre utfyllnad.
.s7videoviewer .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:
.s7videoviewer .s7videoscrubber .s7chapter .s7tail
CSS-egenskaper för Edge-kopplingen
Exempel - Så här ställer du in en grå, sex pixlars kilkopplingskontakt:
.s7videoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}