La barre de défilement de la 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.
Le bouton de défilement se déplace également au fur et à mesure 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 vidéo occupe toujours toute la largeur de la barre de contrôle. Il est possible d’habiller la barre de défilement vidéo. 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é par le 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 le remplissage. |
bas |
Position à partir de la bordure inférieure, y compris le remplissage. |
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 :
.s7video360viewer .s7videoscrubber .s7track
.s7video360viewer .s7videoscrubber .s7trackloaded
.s7video360viewer .s7videoscrubber .s7trackplayed
Propriétés CSS du suivi
hauteur |
Hauteur de la piste correspondante. |
arrière-plan-couleur |
Couleur de la piste correspondante. |
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. |
hauteur |
Hauteur du bouton. |
image d’arrière-plan |
Touchez l’illustration. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de 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 le texte d’affichage temporel. |
font-size |
Taille de police à utiliser pour le texte d’affichage temporel. |
color |
Couleur de police à utiliser pour le texte d’affichage temporel. |
width |
Largeur de la zone de bulle. |
hauteur |
Hauteur de la bulle. |
remplissage |
Marge intérieure de la zone de bulle. |
image d’arrière-plan |
Illustration à bulles. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir CSS Sprites . |
alignement de texte |
Alignement du texte sur la zone de bulle. |
L’info-bulle 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 10 pixels et positionnées à 10 pixels et 35 pixels à partir des bords supérieur et gauche de la barre de contrôle.
.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;
}