Video scrubber video-scrubber
Lo scorrimento video è il controllo cursore orizzontale che consente a un utente di cercare dinamicamente qualsiasi posizione temporale all'interno del video attualmente in riproduzione.
Anche la "manopola" dello scorrimento si muove durante la riproduzione del video per indicare la posizione temporale corrente del video durante la riproduzione. Lo scorrimento video occupa sempre l'intera larghezza della barra di controllo. È possibile applicare lo skin al video scrubber e modificarne l’altezza e la posizione verticale, mediante CSS.
L’aspetto generale dello scorrimento dei video è controllato dal seguente selettore di classe CSS:
.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob
Proprietà CSS dello scorrimento video
I seguenti selettori di classi CSS tengono traccia degli indicatori di background, riproduzione e caricamento:
.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed
Proprietà CSS della traccia
Il seguente selettore di classe CSS controlla la manopola:
.s7interactivevideoviewer .s7videoscrubber .s7knob
Proprietà CSS della manopola
La seguente classe CSS selettore controlla l'indicatore del tempo riprodotto:
.s7interactivevideoviewer .s7videoscrubber .s7videotime
Proprietà CSS della bolla di tempo riprodotta
La descrizione comando dello scorrimento video può essere localizzata. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.
Esempio - Per impostare un visualizzatore video con uno scorrimento video e con colori di traccia personalizzati alti dieci pixel. Posizionalo a dieci pixel e 35 pixel dai bordi superiore e sinistro della barra di controllo.
.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;
}
Quando il marcatore capitolo video è attivato con il navigation parametro, le posizioni dei capitoli vengono visualizzate come marcatori nella parte superiore della traccia di scorrimento video.
Il marcatore del capitolo video è controllato dal seguente selettore di classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7navigation
Proprietà CSS del marcatore capitolo video
state selettore attributo, che potete utilizzare per applicare interfacce diverse a diversi stati pulsante. In particolare, selected='default' corrisponde allo stato predefinito del marcatore capitolo video e selected='over' viene utilizzato quando il marcatore capitolo video viene attivato con un gesto di passaggio del mouse o di tocco.Esempio : per impostare un marcatore capitolo video di 5 x 8 pixel e con grafica diversa per lo stato "Predefinito" e "Sopra".
.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");
}
Video fumetto del capitolo è posizionato sopra l'indicatore del capitolo video e mostra il titolo, l'ora di inizio e la descrizione di un determinato capitolo. È possibile controllare la larghezza massima della bolla e l'offset verticale rispetto alla traccia di scorrimento video. Il resto viene calcolato automaticamente dal componente.
Il fumetto del capitolo video è controllato dalla seguente classe CSS selettore:
.s7interactivevideoviewer .s7videoscrubber .s7chapter
Proprietà CSS del fumetto del capitolo video
Esempio - Per impostare una bolla di capitoli video larga 235 pixel e alta otto pixel dalla parte inferiore della traccia di scorrimento video.
.s7interactivevideoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}
La bolla dei capitoli video è composta da un’intestazione e da un contenuto opzionali. L’intestazione presenta l’ora di inizio del capitolo e il titolo del capitolo opzionali.
L’intestazione è controllata dal seguente selettore di classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header
Proprietà CSS dell'intestazione del fumetto del capitolo video
Esempio : per impostare un'intestazione a fumetto del capitolo video alta 22 pixel, un'altezza della linea di 22 pixel, un margine orizzontale di 12 pixel e uno sfondo grigio.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header {
height:22px;
padding:0 12px;
line-height:22px;
background-color: rgba(51, 51, 51, 0.8);
}
L'ora di inizio del capitolo video è controllata dalla seguente classe CSS selettore:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime
Proprietà CSS dell'ora di inizio del capitolo video
Esempio - Per impostare l'ora di inizio del capitolo utilizzando il tipo di carattere Verdana a dieci pixel di colore grigio e con dieci pixel di spaziatura interna a destra.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime {
color: #dddddd;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
padding-right: 10px;
}
Il titolo del capitolo video è controllato dal seguente selettore di classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title
Proprietà CSS del titolo del capitolo video
Esempio - Per impostare un titolo di capitolo video che utilizza un font Verdana bianco, grassetto e a dieci pixel.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title {
color: #ffffff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
}
La descrizione del capitolo video è controllata dalla seguente classe CSS selettore:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description
Proprietà CSS della descrizione del capitolo video
Esempio : per impostare la descrizione del capitolo video usando un font Verdana grigio scuro da 11 pixel, con sfondo grigio chiaro. Altezza linea di cinque pixel, spaziatura orizzontale di 12 pixel, spaziatura superiore di 12 pixel e spaziatura inferiore di nove pixel.
.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;
}
Il connettore wedge nella parte inferiore del fumetto del capitolo è controllato dalla seguente classe CSS selettore:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail
Proprietà CSS del connettore wedge
Esempio - Per impostare un connettore cuneo grigio da sei pixel:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}