Nettoyeur vidéo video-scrubber

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

Le « bouton » de la barre de défilement se déplace également lors de la lecture de la vidéo pour indiquer la position temporelle actuelle de la vidéo pendant la lecture. La barre de défilement prend toujours toute la largeur de la barre de contrôle. Il est possible d’appliquer une peau à la barre vidéo, de modifier sa hauteur et sa position verticale à l’aide de CSS.

L’aspect général de la barre vidéo est contrôlé par le sélecteur de classe CSS suivant :

.s7smartcropvideoviewer .s7videoscrubber
.s7smartcropvideoviewer .s7videoscrubber .s7videotime
.s7smartcropvideoviewer .s7videoscrubber .s7knob

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

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

.s7smartcropvideoviewer .s7videoscrubber .s7track
.s7smartcropvideoviewer .s7videoscrubber .s7trackloaded
.s7smartcropvideoviewer .s7videoscrubber .s7trackplayed

Propriétés CSS de la piste

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

.s7smartcropvideoviewer .s7videoscrubber .s7knob

Propriétés CSS du bouton

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

.s7smartcropvideoviewer .s7videoscrubber .s7videotime

Propriétés CSS de la bulle de temps de lecture

L’info-bulle de la barre vidéo peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple - Pour configurer une visionneuse de vidéos avec une barre vidéo dotée de couleurs de piste personnalisées qui fait dix pixels de haut. Enfin, faites-le positionner à 10 pixels et 35 pixels des bords supérieur et gauche de la barre de contrôle.

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