Défilement vidéo

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 :

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

.s7interactivevideoviewer .s7videoscrubber .s7track 
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded 
.s7interactivevideoviewer .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 :

.s7interactivevideoviewer .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 :

.s7interactivevideoviewer .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.

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

Lorsque le chapitre vidéo est activé avec le paramètre navigation, les emplacements de chapitre s’affichent sous la forme de marqueurs au-dessus de la piste de défilement vidéo.

Le marqueur de chapitre vidéo est contrôlé par le sélecteur de classe CSS suivant :

.s7interactivevideoviewer .s7videoscrubber .s7navigation

Propriétés CSS du marqueur de chapitre vidéo

width	Largeur du marqueur de chapitre vidéo.
hauteur	Hauteur du marqueur de chapitre vidéo.
image d’arrière-plan	Illustration du marqueur de chapitre vidéo.
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 .

Exemple : pour configurer un marqueur de chapitre vidéo de 5 x 8 pixels et utiliser des illustrations différentes pour les états "par défaut" et "sur".

.s7interactivevideoviewer .s7videoscrubber .s7navigation { 
width:5px; 
height:8px; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] { 
background-image: url("images/v2/VideoScrubberDiamond.png"); 
} 
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] { 
background-image: url("images/v2/VideoScrubberDiamond_over.png"); 
}

La bulle de chapitre vidéo est placée au-dessus du marqueur de chapitre vidéo et affiche le titre, l’heure de début et la description d’un chapitre donné. Il est possible de contrôler la largeur maximale de la bulle et le décalage vertical par rapport à la piste de défilement vidéo. Le reste est calculé automatiquement par le composant.

La bulle de chapitre vidéo est contrôlée par le sélecteur de classe CSS suivant :

.s7interactivevideoviewer .s7videoscrubber .s7chapter

Propriétés CSS de la bulle de chapitre vidéo

max-width	Largeur maximale de la bulle de chapitre vidéo.
bas	Décalage vertical par rapport au suivi de la barre de défilement vidéo.

Exemple : pour configurer une bulle de chapitre vidéo de 235 pixels de large et de huit pixels de haut en bas de la piste de défilement vidéo.

.s7interactivevideoviewer .s7videoscrubber .s7chapter { 
max-width:235px; 
bottom:8px; 
}

La bulle de chapitre vidéo se compose d’un en-tête et d’un contenu facultatifs. L’en-tête comporte en option l’heure de début du chapitre et le titre du chapitre.

L’en-tête est contrôlé par le sélecteur de classe CSS suivant :

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

Propriétés CSS de l’en-tête de bulle de chapitre vidéo

hauteur	Hauteur de l’en-tête de bulle de chapitre vidéo.
remplissage	Marge intérieure du texte d’en-tête de bulle de chapitre vidéo.
arrière-plan-couleur	Couleur d’arrière-plan de l’en-tête de bulle de chapitre vidéo.
ligne-hauteur	Hauteur de la ligne de texte de l’en-tête de bulle de chapitre vidéo.

Exemple : pour configurer un en-tête de bulle de chapitre vidéo d’une hauteur de 22 pixels, une hauteur de ligne de 22 pixels, une marge horizontale de 12 pixels et un arrière-plan gris.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header { 
height:22px; 
padding:0 12px; 
line-height:22px; 
background-color: rgba(51, 51, 51, 0.8); 
}

L’heure de début du chapitre vidéo est contrôlée par le sélecteur de classe CSS suivant :

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

Propriétés CSS de l’heure de début du chapitre vidéo

color	Couleur du texte.
font-poids	Poids des polices.
font-size	Taille de police.
font-family	Famille de polices.
remplissage-droit	Marge intérieure entre l’heure du début et le titre du chapitre.

Exemple : pour configurer le début de chapitre en utilisant la police Verdana grise de dix pixels et dont le remplissage de dix pixels est à droite.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime { 
color: #dddddd; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
padding-right: 10px; 
}

Le titre du chapitre vidéo est contrôlé par le sélecteur de classe CSS suivant :

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title

Propriétés CSS du titre du chapitre vidéo

color	Couleur du texte du titre du chapitre vidéo.
font-poids	Poids de police du titre du chapitre vidéo.
font-size	Taille de police du titre du chapitre vidéo.
font-family	Famille de polices du titre du chapitre vidéo.

Exemple : pour configurer un titre de chapitre vidéo qui utilise une police Verdana blanche, en gras, de dix pixels.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title { 
color: #ffffff; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
font-weight: bold; 
}

La description du chapitre vidéo est contrôlée par le sélecteur de classe CSS suivant :

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description

Propriétés CSS de la description du chapitre vidéo

color	Couleur de texte de la description du chapitre vidéo.
arrière-plan-couleur	Couleur d’arrière-plan de la description du chapitre vidéo.
font-poids	Poids de police de description du chapitre vidéo.
font-size	Taille de police de la description du chapitre vidéo.
font-family	Famille de polices de description de chapitre vidéo.
ligne-hauteur	Hauteur de la ligne de description du chapitre vidéo.
remplissage	Marge intérieure de la description du chapitre vidéo.

Exemple : pour configurer la description du chapitre vidéo en utilisant une police Verdana de 11 pixels gris foncé, avec un arrière-plan gris clair ; Hauteur de ligne de 5 pixels, remplissage horizontal de 12 pixels, remplissage supérieur de 12 pixels et remplissage inférieur de 9 pixels.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description { 
color: #333333; 
background-color: rgba(221, 221, 221, 0.9); 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 11px; 
line-height: 15px; 
padding: 12px 12px 9px; 
}

Le connecteur de coin situé au bas de la bulle de chapitre est contrôlé par le sélecteur de classe CSS suivant :

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail

Propriétés CSS du connecteur de coin

border-color	Couleur du connecteur de coin. Défini comme <color> transparent de sorte que seule la couleur de bordure supérieure est définie et que les bordures restantes restent transparentes.
bordure-largeur	Largeur du connecteur de coin. Défini comme <width> <width> 0 de sorte que la même largeur soit définie pour les bordures supérieure et horizontale uniquement et que la largeur inférieure de la bordure soit 0 .
margin	Définit une marge inférieure négative uniquement. Il doit avoir la même valeur que celle de border-width .

Exemple - Pour configurer un connecteur de coin gris de six pixels :

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail { 
border-color: rgba(221, 221, 221, 0.9) transparent transparent; 
border-width: 6px 6px 0; 
margin: 0 0 0 -6px; 
}