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 videonavigeringsprogrammet

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

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

CSS-egenskaper för spåret

Följande CSS-klassväljare styr ratten:

.s7interactivevideoviewer .s7videoscrubber .s7knob

CSS-egenskaper för ratten

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

.s7interactivevideoviewer .s7videoscrubber .s7videotime

CSS-egenskaper för bubblan för uppspelning

Verktygstipset för videospolning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - Om du vill ställa in ett videovisningsprogram med en videonavigeringsfunktion 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 parametern navigation 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

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

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

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

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

Exempel - Om du vill ange kapitelstarttid med det grå teckensnittet 10 pixlar Verdana och har utfyllnaden 10 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 videokapitelrubriken

Exempel - Om du vill ställa in en videokapitelrubrik som använder ett vitt, fetstilt teckensnitt med tio pixlar Verdana.

.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

Exempel - Om du vill ställa in kapitelbeskrivning för video 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 Connector

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;
}