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 au défilement vidéo, de modifier sa hauteur et sa position verticale, par 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 :

.s7smartcropvideoviewer .s7videoscrubber
.s7smartcropvideoviewer .s7videoscrubber .s7videotime
.s7smartcropvideoviewer .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
Couleur 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 :

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

Propriétés CSS du suivi

height
Hauteur du suivi correspondant.
arrière-plan-couleur
Couleur du suivi correspondant.

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

.s7smartcropvideoviewer .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 Sprites CSS.

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 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
Couleur de police à utiliser pour le texte d’affichage de l’heure.
width
Largeur de la zone de bulle.
height
Hauteur de la bulle.
remplissage
Marge intérieure de la zone bulle.
background-image
Illustrations à bulles.
arrière-plan-position

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

Voir Sprites CSS.

alignement de texte
Alignement du texte avec la zone de bulle.

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 - 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. Enfin, faites-le positionner de 10 pixels et 35 pixels à partir 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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8