Scorrimento video

Lo scorrimento video è il dispositivo di scorrimento orizzontale che consente all'utente di cercare in modo dinamico qualsiasi 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 scuotere lo scrubber video. modifica l’altezza e la posizione verticale di CSS.

L’aspetto generale dello scorrimento video è controllato con il seguente selettore di classe CSS:

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

Proprietà CSS dello scorrimento video

top

Posizione dal bordo superiore, inclusa la spaziatura.

bottom

Posizione dal bordo inferiore, inclusa la spaziatura.

height

Altezza dello scorrimento video.

colore di sfondo

Colore dello scorrimento video.

I seguenti selettori di classe CSS tengono traccia degli indicatori di sfondo, riproduzione e caricamento:

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

Proprietà CSS del brano

altezza

Altezza del brano corrispondente.

colore di sfondo

Colore del brano corrispondente.

Il seguente selettore di classe CSS controlla la manopola:

.s7videoviewer .s7videoscrubber .s7knob

Proprietà CSS della manopola

top

Offset a manopola verticale.

width

Larghezza della manopola.

altezza

Altezza della manopola.

immagine di sfondo

Lavori d'arte.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Consulta Sprite CSS .

Il seguente selettore di classe CSS controlla la bolla temporale riprodotta:

.s7videoviewer .s7videoscrubber .s7videotime

Proprietà CSS della bolla temporale riprodotta

font-family

Famiglia di font da utilizzare per il testo di visualizzazione dell'ora.

font-size

Dimensione del font da utilizzare per il testo visualizzato in base all'ora.

color

Il colore del font da utilizzare per il testo visualizzato in base all'ora.

larghezza

Larghezza area bolla.

altezza

Altezza dell'area della bolla.

spaziatura interna

Spaziatura dell'area della bolla.

immagine di sfondo

Illustrazione a bolle.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Consulta Sprite CSS .

text-align

Allineamento del testo con l'area della bolla.

È possibile localizzare la descrizione comandi per lo scorrimento video. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio : per impostare un visualizzatore video con uno scorrimento video con colori di traccia personalizzati alti 10 pixel e posizionati 10 pixel e 35 pixel dai bordi superiore e sinistro della barra di controllo.

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

Quando si abilita il filtro video con il parametro navigation , le posizioni dei capitoli vengono visualizzate come marcatori sulla traccia di scorrimento video.

Il marcatore capitolo video è controllato dal seguente selettore di classe CSS:

 .s7videoviewer .s7videoscrubber .s7navigation

Proprietà CSS del marcatore capitolo video

larghezza

Larghezza del marcatore del capitolo video.

altezza

Altezza del marcatore del capitolo video.

immagine di sfondo

Grafica marcatore capitolo video.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Consulta Sprite CSS .

NOTA

Questo pulsante supporta sia il selettore di attributi state , che può essere utilizzato per applicare interfacce diverse a diversi stati del 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 da un puntatore del mouse o da un tocco.

Esempio : per impostare un marcatore capitolo video di 5 x 8 pixel e utilizzare immagini diverse per lo stato "predefinito" e "sopra".

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

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 classi CSS:

.s7videoviewer .s7videoscrubber .s7chapter

Proprietà CSS della bolla dei capitoli video

larghezza massima

Larghezza massima della bolla del capitolo video.

bottom

Offset verticale dalla traccia di scorrimento video.

Esempio : per impostare una bolla di capitolo video con una larghezza di 235 pixel e otto pixel verso l’alto dal fondo della traccia di scorrimento video.

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

La bolla dei capitoli video è costituita da un’intestazione e da un contenuto facoltativi. L'intestazione ha l'ora di inizio capitolo opzionale e il titolo del capitolo.

L’intestazione è controllata dal seguente selettore di classe CSS:

.s7videoviewer .s7videoscrubber .s7chapter .s7header

Proprietà CSS dell’intestazione della bolla dei capitoli video

altezza

Altezza intestazione bolla capitolo video.

spaziatura interna

Spaziatura interna per il testo di intestazione della bolla dei capitoli video.

colore di sfondo

Colore di sfondo dell'intestazione della bolla del capitolo video.

altezza riga

Altezza della riga di testo dell'intestazione del capitolo video.

Esempio : per impostare un'intestazione di bolla di un capitolo video alta 22 pixel, un'altezza di 22 pixel, un margine orizzontale di 12 pixel e uno sfondo grigio.

.s7videoviewer .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 classi CSS:

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

Proprietà CSS dell’ora di inizio del capitolo video

color

Colore testo.

font-weight

Spessore del carattere.

font-size

Dimensione del carattere.

font-family

Famiglia di caratteri.

margine destro

Spaziatura tra l'ora di inizio e il titolo del capitolo.

Esempio - Per impostare l'ora di inizio del capitolo utilizzando il font Verdana a dieci pixel grigio e ha una spaziatura di dieci pixel a destra.

.s7videoviewer .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:

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title

Proprietà CSS del titolo del capitolo video

color

Colore del testo del titolo del capitolo video.

font-weight

Spessore font titolo capitolo video.

font-size

Dimensione del carattere del titolo del capitolo video.

font-family

Famiglia di font del titolo del capitolo video.

Esempio - Per impostare un titolo del capitolo video che utilizza un carattere Verdana bianco, grassetto, di dieci pixel.

.s7videoviewer .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:

 .s7videoviewer .s7videoscrubber .s7chapter .s7description

Proprietà CSS della descrizione del capitolo video

color

Colore testo descrizione capitolo video.

colore di sfondo

Colore di sfondo della descrizione del capitolo video.

font-weight

Spessore font descrizione capitolo video.

font-size

Dimensione del carattere della descrizione del capitolo video.

font-family

Famiglia di font per descrizione capitolo video.

altezza riga

Altezza riga descrizione capitolo video.

spaziatura interna

Spaziatura interna descrizione capitolo video.

Esempio : per impostare la descrizione del capitolo video utilizzando un carattere Verdana grigio scuro, 11 pixel, con sfondo grigio chiaro; Altezza della riga di 5 pixel, spaziatura orizzontale di 12 pixel, spaziatura superiore di 12 pixel e spaziatura inferiore di 9 pixel.

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

Il connettore cuneo nella parte inferiore della bolla del capitolo è controllato dal seguente selettore di classe CSS:

 .s7videoviewer .s7videoscrubber .s7chapter .s7tail

Proprietà CSS del connettore wedge

colore bordo

Colore connettore cuneo.

Definito come <color> trasparente in modo che venga definito solo il colore del bordo superiore e che i bordi rimanenti siano lasciati trasparenti.

bordo-larghezza

Larghezza connettore cuneo.

Definito come <width> <width> 0 in modo che la stessa larghezza sia definita solo per i bordi superiore e orizzontale e la larghezza del bordo inferiore sia 0 .

margine

Definisce solo un margine inferiore negativo. Deve avere lo stesso valore di bordo-larghezza .

Esempio : per impostare un connettore cuneo grigio a sei pixel:

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

In questa pagina