Défilement vidéo

La barre de défilement vidéo est la commande de curseur horizontale qui permet à un utilisateur de rechercher dynamiquement n’importe quelle position temporelle dans la vidéo en cours de lecture.

La barre de défilement se déplace également au fur et à mesure que la vidéo est lue pour indiquer la position de l’heure actuelle de la vidéo pendant la lecture. La barre de défilement vidéo prend toujours toute la largeur de la barre de contrôle. It is possible to skin the video scrubber. Modifier sa hauteur et sa position verticale, par CSS.

L’aspect général du défilement vidéo est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7video360viewer .s7videoscrubber 
.s7video360viewer .s7videoscrubber .s7videotime 
.s7video360viewer .s7videoscrubber .s7knob

Propriétés CSS de la barre de défilement vidéo

haut

Position à partir de la bordure supérieure, y compris la marge intérieure.

bas

Position à partir de la bordure inférieure, y compris la marge intérieure.

height

Hauteur de la barre de défilement vidéo.

arrière-plan-couleur

The color of the video scrubber.

Les sélecteurs de classe CSS suivants effectuent le suivi des indicateurs d’arrière-plan, de lecture et de chargement :

.s7video360viewer .s7videoscrubber .s7track 
.s7video360viewer .s7videoscrubber .s7trackloaded 
.s7video360viewer .s7videoscrubber .s7trackplayed

Propriétés CSS du suivi

height

Hauteur du suivi correspondant.

arrière-plan-couleur

The color of the corresponding track.

Le sélecteur de classe CSS suivant contrôle le bouton :

.s7video360viewer .s7videoscrubber .s7knob

Propriétés CSS du bouton

haut

Décalage vertical des boutons.

width

Largeur du bouton.

height

Hauteur du bouton.

background-image

Obtenir une illustration.

arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir CSS Sprites .

Le sélecteur de classe CSS suivant contrôle la bulle de durée de lecture :

.s7video360viewer .s7videoscrubber .s7videotime

Propriétés CSS de la bulle de durée de lecture

font-family

Famille de polices à utiliser pour l’affichage du texte temporel.

font-size

Taille de police à utiliser pour le texte d’affichage temporel.

color

The font color to use for the time display text.

width

Bubble area width.

height

Hauteur de la bulle.

remplissage

Marge intérieure de la zone bulle.

background-image

Illustrations à bulles.

background-position

Position inside artwork sprite, if CSS sprites are used.

Voir CSS Sprites .

alignement de texte

Alignement du texte avec la zone de bulle.

The video scrubber tool tip can be localized. See Localization of user interface elements for more information.

Exemple : pour configurer une visionneuse de vidéos avec un défilement vidéo avec des couleurs de suivi personnalisées de dix pixels de haut. And, position it ten pixels and 35 pixels from the top and left edges of the control bar.

.s7video360viewer .s7videoscrubber  { 
top:10px; 
left:35px; 
height:10px; 
background-color:#AAAAAA; 
} 
.s7video360viewer .s7videoscrubber .s7track { 
height:10px; 
background-color:#444444; 
} 
.s7video360viewer .s7videoscrubber .s7trackloaded { 
height:10px; 
background-color:#666666; 
} 
.s7video360viewer .s7videoscrubber .s7trackplayed { 
height:10px; 
background-color:#888888; 
}

Sur cette page