Nettoyeur vidéo video-scrubber

La barre vidéo est la commande de curseur horizontal qui permet à un utilisateur de rechercher dynamiquement n’importe quelle position temporelle dans la vidéo en cours de lecture.

Le « bouton » de la barre de défilement se déplace également lors 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 prend toujours toute la largeur de la barre de contrôle. Il est possible d’appliquer une peau à la barre vidéo et de modifier sa hauteur et sa position verticale, par CSS.

L’aspect général de la barre vidéo est contrôlé par le sélecteur de classe CSS suivant :

.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob

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

Les sélecteurs de classe CSS suivants effectuent le suivi des indicateurs d’arrière-plan, de lecture et de chargement :

.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .s7videoscrubber .s7trackplayed

Propriétés CSS de la piste

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

.s7videoviewer .s7videoscrubber .s7knob

Propriétés CSS du bouton

Le sélecteur de classe CSS suivant contrôle la bulle de durée de lecture :

.s7videoviewer .s7videoscrubber .s7videotime

Propriétés CSS de la bulle de temps de lecture

L’info-bulle de la barre 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 une barre vidéo dotée de couleurs de piste personnalisées. La barre de défilement doit avoir une hauteur de dix pixels et être positionnée à dix pixels et 35 pixels des bords supérieur et gauche de la barre de commande.

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

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

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

 .s7videoviewer .s7videoscrubber .s7navigation

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

Exemple - Pour configurer un marqueur de chapitre vidéo de 5 x 8 pixels qui utilise des illustrations différentes pour les états « par défaut » et « dépassé ».

.s7videoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7videoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7videoviewer .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 de bulle maximale et le décalage vertical par rapport à la piste de nettoyage vidéo. Le reste est calculé automatiquement par le composant.

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

.s7videoviewer .s7videoscrubber .s7chapter

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

Exemple - Pour configurer une bulle de chapitre vidéo de 235 pixels de large et de huit pixels de haut par rapport au bas de la piste de nettoyage vidéo.

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

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

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

.s7videoviewer .s7videoscrubber .s7chapter .s7header

Propriétés CSS 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.

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

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

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

Exemple - Pour configurer l’heure de début du chapitre à l’aide de la police Verdana grise de dix pixels et dotée d’une marge intérieure de dix pixels à droite.

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

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title

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

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

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

 .s7videoviewer .s7videoscrubber .s7chapter .s7description

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

Exemple - Pour configurer la description d’un chapitre vidéo en utilisant une police Verdana gris foncé de 11 pixels, avec un arrière-plan gris clair. Enfin, utilise une hauteur de ligne de cinq pixels, une marge intérieure horizontale de 12 pixels, une marge intérieure supérieure de 12 pixels et une marge intérieure inférieure de neuf pixels.

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

 .s7videoviewer .s7videoscrubber .s7chapter .s7tail

Propriétés CSS du connecteur en coin

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

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