Curseur de progression vidéo video-scrubber

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

Le « bouton » du curseur se déplace également pendant la lecture de la vidéo pour indiquer la position temporelle actuelle de la vidéo pendant la lecture. Le curseur de progression vidéo occupe toujours toute la largeur de la barre de contrôle. Il est possible d’habiller le laveur vidéo et de modifier sa hauteur et sa position verticale à l’aide de CSS.

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

.s7mixedmediaviewer .s7videoscrubber
.s7mixedmediaviewer .s7videoscrubber .s7videotime
.s7mixedmediaviewer .s7videoscrubber .s7knob

Propriétés CSS du curseur de progression vidéo

Les sélecteurs de classes CSS suivants suivent les indicateurs d’arrière-plan, de lecture et de chargement :

.s7mixedmediaviewer .s7videoscrubber .s7track
.s7mixedmediaviewer .s7videoscrubber .s7trackloaded
.s7mixedmediaviewer .s7videoscrubber .s7trackplayed

Propriétés CSS de la piste

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

.s7mixedmediaviewer .s7videoscrubber .s7knob

Propriétés CSS du bouton

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

.s7mixedmediaviewer .s7videoscrubber .s7videotime

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

L’info-bulle de défilement vidéo peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple section-e8caea0a303c425a8a637c2a47c06355

Configurez une visionneuse de supports variés avec un curseur vidéo avec des couleurs de piste personnalisées d’une hauteur de 10 pixels et positionné à 10 pixels et 35 pixels des bords supérieur et gauche de la barre de contrôle.

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