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

top
Posizione dal bordo superiore, inclusa la spaziatura.
bottom
Posizione dal bordo inferiore, inclusa la spaziatura.
height
Altezza dello scorrimento video.
background-color
Colore 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

height
Altezza del brano corrispondente.
background-color
Colore del brano corrispondente.

Il seguente selettore di classe CSS controlla la manopola:

.s7interactivevideoviewer .s7videoscrubber .s7knob

Proprietà CSS della manopola

top
Offset manopola verticale.
width
Larghezza manopola.
height
Altezza manopola.
background-image
Grafica a manopola.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS.

Il seguente selettore di classe CSS controlla la bolla del tempo riprodotto:

.s7interactivevideoviewer .s7videoscrubber .s7videotime

Proprietà CSS dell’indicatore di riproduzione

font-family
Famiglia di font da utilizzare per il testo visualizzato nel tempo.
font-size
Dimensione font da utilizzare per il testo visualizzato nel tempo.
color
Colore del carattere da utilizzare per il testo visualizzato nel tempo.
width
Larghezza area bolle.
height
Altezza area bolle.
riempimento
Spaziatura interna area bolle.
background-image
Illustrazione di bolle.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS.

text-align
Allineamento del testo con l'area a bolle.

La descrizione comando dello scorrimento video può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio : per impostare un visualizzatore video con uno scorrimento video e con colori del brano 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 il marcatore del capitolo video è attivato con navigation Le posizioni dei capitoli vengono visualizzate come marcatori 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

width
Larghezza marcatore capitolo video.
height
Altezza marcatore capitolo video.
background-image
Illustrazione del marcatore del capitolo video.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS.

NOTE
Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi. 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 il mouse o con un movimento tattile.

Esempio : per impostare un marcatore capitolo video di 5 x 8 pixel che utilizza immagini diverse per lo stato "default" e "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");
}

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

max-width
Larghezza massima della bolla del capitolo video.
bottom
Offset verticale dalla traccia di scorrimento video.

Esempio - Per impostare una bolla di capitolo video larga 235 pixel e alta 8 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 a bolla del capitolo video

height
Altezza intestazione bolla capitolo video.
riempimento
Spaziatura interna per il testo dell’intestazione della bolla del capitolo video.
background-color
Colore di sfondo intestazione bolla capitolo video.
line-height
Altezza riga testo intestazione capitolo video.

Esempio : per impostare un'intestazione a bolla di 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 dal seguente selettore di classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

Proprietà CSS dell’ora di inizio del capitolo video

color
Colore testo.
font-weight
Spessore font.
font-size
Dimensione font.
font-family
Famiglia di caratteri.
padding-right
Spaziatura tra l'ora di inizio e il titolo del capitolo.

Esempio - Per impostare l'ora di inizio del capitolo utilizzando il carattere Verdana grigio da dieci pixel e con dieci pixel di spaziatura verso 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

color
Colore testo titolo capitolo video.
font-weight
Spessore font titolo capitolo video.
font-size
Dimensione font titolo capitolo video.
font-family
Famiglia di font per il titolo del capitolo video.

Esempio : per impostare un titolo del 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

color
Colore testo descrizione capitolo video.
background-color
Colore di sfondo della descrizione del capitolo video.
font-weight
Spessore font descrizione capitolo video.
font-size
Dimensione font descrizione capitolo video.
font-family
Famiglia di font per la descrizione del capitolo video.
line-height
Altezza riga descrizione capitolo video.
riempimento
Spaziatura interna descrizione capitolo video.

Esempio : per impostare la descrizione del capitolo video utilizzando un carattere Verdana 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

border-color

Colore connettore cuneo.

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

border-width

Larghezza connettore cuneo.

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

margine
Definisce solo un margine inferiore negativo. Deve avere lo stesso valore di border-width .

Esempio - Per impostare un connettore cuneo grigio a 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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8