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, 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 :

.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob

Propriétés CSS de la barre de défilement vidéo

top
Position à partir de la bordure supérieure, y compris la marge intérieure.
bottom
Position à partir de la bordure inférieure, y compris la marge intérieure.
height
Hauteur de la barre de défilement vidéo.
background-color
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 track

height
Hauteur du suivi correspondant.
background-color
Couleur du suivi correspondant.

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

.s7interactivevideoviewer .s7videoscrubber .s7knob

Propriétés CSS du bouton

top
Décalage vertical des boutons.
width
Largeur du bouton.
height
Hauteur du bouton.
background-image
Obtenir une illustration.
background-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 :

.s7interactivevideoviewer .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.
padding
Marge intérieure de la zone bulle.
background-image
Illustrations à bulles.
background-position

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

Voir Sprites CSS.

text-align
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 : configuration d’une visionneuse de vidéos avec défilement vidéo et couleurs de suivi personnalisées de dix pixels de haut. Positionnez-la à dix pixels et 35 pixels 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 marqueur de chapitre vidéo est activé avec le paramètre navigation , les emplacements de chapitre s’affichent sous la forme de marqueurs au-dessus du suivi de la barre 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.
height
Hauteur du marqueur du chapitre vidéo.
background-image
Illustration du marqueur du chapitre vidéo.
background-position

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

Voir Sprites CSS.

NOTE
Ce bouton prend en charge le sélecteur d’attributs state, que vous pouvez utiliser pour appliquer différents habillages à différents états de bouton. En particulier, selected='default' correspond à l’état par défaut du marqueur de chapitre vidéo et selected='over' est utilisé lorsque le marqueur de chapitre vidéo est activé par un mouvement de souris sur ou de toucher.

Exemple - Pour configurer un marqueur de chapitre vidéo de 5 x 8 pixels et utiliser des illustrations différentes pour l’état "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 positionné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 au suivi de la barre 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.
bottom
Décalage vertical à partir de la piste de défilement vidéo.

Exemple : configuration d’une bulle de chapitre vidéo de 235 pixels de large et de huit pixels en haut à partir du bas du suivi de la barre 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 l’heure de début et le titre facultatifs 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

height
Hauteur de l’en-tête de la bulle de chapitre vidéo.
padding
Marge intérieure du texte de l’en-tête de la bulle de chapitre vidéo.
background-color
Couleur d’arrière-plan de l’en-tête de la bulle de chapitre vidéo.
line-height
Hauteur de la ligne de texte de l’en-tête de la 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-weight
Poids de police.
font-size
Taille de police.
font-family
Famille de polices.
padding-right
Marge intérieure entre l’heure de début et le titre du chapitre.

Exemple - Pour configurer l’heure de début du chapitre à l’aide de la police Verdana grise de dix pixels et d’une marge intérieure de dix pixels à 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 de texte du titre du chapitre vidéo.
font-weight
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, gras et 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 description du chapitre vidéo.
background-color
Couleur d’arrière-plan de la description du chapitre vidéo.
font-weight
Poids de police de la description du chapitre vidéo.
font-size
Taille de police de la description du chapitre vidéo.
font-family
Famille de polices de description du chapitre vidéo.
line-height
Hauteur de ligne de description du chapitre vidéo.
padding
Marge intérieure de la description du chapitre vidéo.

Exemple - Pour configurer la description du chapitre vidéo à l’aide d’une police Verdana de 11 pixels de gris foncé, avec un arrière-plan gris clair. Hauteur de ligne de cinq pixels, remplissage horizontal de 12 pixels, remplissage supérieur de 12 pixels et remplissage inférieur de neuf 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 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 décalage.

Défini comme <color> transparent de sorte que seule la couleur de bordure supérieure soit définie et que les bordures restantes restent transparentes.

border-width

Largeur du connecteur de décalage.

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 de la bordure inférieure soit 0 .

margin
Définit une marge inférieure négative uniquement. Elle doit avoir la même valeur que border-width .

Exemple - Pour configurer un connecteur de décalage de six pixels gris :

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8