Videoscrubber video-scrubber

De videoscrubber is de horizontale schuifregelaar waarmee een gebruiker dynamisch naar een willekeurige tijdpositie in de video kan zoeken die momenteel wordt afgespeeld.

De scrubber 'knob' beweegt zich ook terwijl de video speelt om op de huidige tijdpositie van de video tijdens playback te wijzen. De videoscrubber neemt altijd de volledige breedte van de controlebar. Het is mogelijk de skin van de videoscrubber te wijzigen en de hoogte en verticale positie ervan te wijzigen met CSS.

De algemene weergave van de videoscrubber wordt beheerd met de volgende CSS-klassenkiezer:

.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob

CSS eigenschappen van de videoscrubber

De volgende CSS-klassekiezers volgen de indicatoren voor achtergrond, afspelen en laden:

.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .s7videoscrubber .s7trackplayed

CSS eigenschappen van het spoor

De volgende CSS-klassenkiezer bestuurt de knop:

.s7videoviewer .s7videoscrubber .s7knob

CSS eigenschappen van de knoop

De volgende CSS-klassenkiezer bestuurt de zeepbel waarin de tijd wordt afgespeeld:

.s7videoviewer .s7videoscrubber .s7videotime

CSS eigenschappen van de tijd speelde bel

De knopinfo voor het gereedschap Video scrubber kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld - aan opstelling een videokijker met een videoscrubber met de kleuren van het douanespoor. De scrubber moet tien pixels hoog zijn en moet zich tien pixels en 35 pixels van de boven- en linkerrand van de besturingsbalk bevinden.

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

Wanneer videochaptering is ingeschakeld met de parameter navigation , worden hoofdstuklocaties als markeringen boven op de videoscrubbertrack weergegeven.

De markering van het videohoofdstuk wordt beheerd door de volgende CSS-klassenkiezer:

 .s7videoviewer .s7videoscrubber .s7navigation

CSS eigenschappen van de teller van het videohoofdstuk

Voorbeeld - aan opstelling is een videokoofdenteller die 5 x 8 pixel is en verschillende kunst voor het "gebrek"en "over"staat gebruikt.

.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");
}

De zeepbel van het videohoofdstuk wordt geplaatst bovenop de videokoparkeerteken en toont de titel, begintijd, en beschrijving voor een bepaald hoofdstuk. U kunt de maximale breedte en verticale verschuiving ten opzichte van de videoscrubbertrack instellen. De rest wordt automatisch door de component berekend.

De ballon van het videohoofdstuk wordt gecontroleerd door de volgende CSS klassenselecteur:

.s7videoviewer .s7videoscrubber .s7chapter

CSS eigenschappen van de bel van het videohoofdstuk

Voorbeeld - aan opstelling een video hoofdstukballon die 235 pixel breed is en acht pixel omhoog van de bodem van het videoscrubberspoor is.

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

De hoofdstukballon van de video bestaat uit een facultatieve kopbal en inhoud. De kopbal heeft de facultatieve hoofdstukbegintijd en hoofdstuktitel.

De header wordt bestuurd door de volgende CSS-klassenkiezer:

.s7videoviewer .s7videoscrubber .s7chapter .s7header

CSS eigenschappen van de video hoofdstukborrelkopbal

Voorbeeld - aan opstelling een video hoofdstukborstelkopbal die 22 hoge pixel, een hoogte van de 22 pixellijn, een 12 pixel horizontale marge, en een grijze achtergrond is.

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

De begintijd van het videohoofdstuk wordt bepaald door de volgende CSS-klassenkiezer:

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

CSS-eigenschappen van de begintijd van het videohoofdstuk

Voorbeeld - aan de begintijd van het opstellingshoofdstuk gebruikend grijs tien pixel de doopvont van Verdana en heeft tien pixel het opvullen aan het recht.

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

De titel van het videohoofdstuk wordt bestuurd door de volgende CSS-klassenkiezer:

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title

CSS eigenschappen van de titel van het videohoofdstuk

Voorbeeld - aan opstelling een titel van het videohoofdstuk die een wit, gewaagd, tien pixelVerdana doopvont gebruikt.

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

De beschrijving van het videohoofdstuk wordt beheerd door de volgende CSS-klassenkiezer:

 .s7videoviewer .s7videoscrubber .s7chapter .s7description

CSS eigenschappen van de beschrijving van het videohoofdstuk

Voorbeeld - aan de beschrijving van het opstellingshoofdstuk gebruikend een donkergrijze, 11 pixel Verdana doopvont, met een lichtgrijze achtergrond. Tot slot gebruikt u vijf pixels voor lijnhoogte, twaalf pixels voor horizontale opvulling, twaalf pixels voor opvulling boven en negen pixels voor opvulling onder.

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

De vastzetconnector onder aan de hoofdstukballon wordt bestuurd door de volgende CSS-klassenkiezer:

 .s7videoviewer .s7videoscrubber .s7chapter .s7tail

CSS eigenschappen van de wig schakelaar

Voorbeeld - aan opstelling een grijze, zes schakelaar van het pixelwig:

.s7videoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}