Défilement vidéo video-scrubber
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. Il est possible d’appliquer un habillage à la barre de défilement vidéo et de modifier sa hauteur et sa position verticale à l’aide de CSS.
L’aspect général de la barre de défilement vidéo est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7videoscrubber
.s7mixedmediaviewer .s7videoscrubber .s7videotime
.s7mixedmediaviewer .s7videoscrubber .s7knob
Propriétés CSS de la barre de défilement vidéo
Les sélecteurs de classe CSS suivants effectuent le suivi des indicateurs d’arrière-plan, de lecture et de chargement :
.s7mixedmediaviewer .s7videoscrubber .s7track
.s7mixedmediaviewer .s7videoscrubber .s7trackloaded
.s7mixedmediaviewer .s7videoscrubber .s7trackplayed
Propriétés CSS du track
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 de lecture :
.s7mixedmediaviewer .s7videoscrubber .s7videotime
Propriétés CSS de la bulle de durée de lecture
L’info-bulle de la barre de défilement vidéo peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Exemple section-e8caea0a303c425a8a637c2a47c06355
Configurez une visionneuse de médias mixtes avec un défilement vidéo avec des couleurs de suivi personnalisées de 10 pixels de haut et positionnées de 10 et 35 pixels à partir 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;
}