Scorrimento video video-scrubber
Lo scorrimento video è il dispositivo di scorrimento orizzontale che consente all’utente di cercare dinamicamente una posizione temporale all’interno del video attualmente in riproduzione.
La "manopola" di scorrimento si sposta anche 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 sfondo, riproduzione e caricamento:
.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed
Proprietà CSS del brano
Il seguente selettore di classe CSS controlla la manopola:
.s7interactivevideoviewer .s7videoscrubber .s7knob
Proprietà CSS della manopola
Il seguente selettore di classe CSS controlla la bolla del tempo riprodotto:
.s7interactivevideoviewer .s7videoscrubber .s7videotime
Proprietà CSS dell'indicatore del tempo riprodotto
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. Posizionarlo a dieci pixel e a 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 l'indicatore del capitolo video è abilitato con il parametro navigation, le posizioni dei capitoli vengono visualizzate come indicatori sopra la 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, che è possibile utilizzare per applicare interfacce diverse a diversi stati di pulsante. In particolare, selected='default' corrisponde allo stato predefinito del marcatore del capitolo video e selected='over' viene utilizzato quando il marcatore del capitolo video viene attivato con un passaggio del mouse o un movimento di contatto.Esempio - Per impostare un marcatore di capitolo video di 5 x 8 pixel e utilizzare un'immagine 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");
}
La bolla dei capitoli video è posizionata sopra il marcatore dei capitoli 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.
La bolla dei capitoli video è controllata dal seguente selettore di classe CSS:
.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 bolla di capitolo video alta 22 pixel, con un'altezza di 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 dal seguente selettore di classe CSS:
.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 dal seguente selettore di classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description
Proprietà CSS della descrizione del capitolo video
Esempio - Per impostare la descrizione del capitolo video utilizzando un carattere Verdana di colore grigio scuro da 11 pixel con uno sfondo grigio chiaro. Altezza delle linee 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 a cuneo all’interno della parte inferiore della bolla del capitolo è controllato dal seguente selettore di classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail
Proprietà CSS del connettore cuneo
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;
}