Vue d'ensemble: Composants

Produit (s)
Lecteur Brightcove
Video Cloud
Les rôles)
Développeur de joueur
Les sujets)
Architecture

Le lecteur Brightcove est construit sur une architecture de composants d'interface utilisateur simple et personnalisée. Cette rubrique fournit un aperçu des composants et de leur structure.

Ceci est un document de synthèse. Pour plus d'informations sur la modification des composants, consultez la Personnaliser l'apparence du lecteur document.

Composants étiquetés

Vous trouverez ci-dessous des captures d'écran du lecteur, du chargement du lecteur et de la lecture d'une vidéo, avec les composants étiquetés.

Sur le chargement du joueur et le vol stationnaire

composants en charge

Pendant la lecture

lecture de composants

Pour plus d'informations sur les sélecteurs CSS pour ces composants, consultez le Personnaliser l'apparence du lecteur document Sélecteurs de composants .

Structure hiérarchique

 

La structure de composant hiérarchique par défaut du lecteur est la suivante:

Joueur PosterImage TextTrackDisplay DockText DockTitle DockDescription DockShelf LoadingSpinner BigPlayButton ControlBar PlayToggle VolumePanelHorizontal MuteToggle VolumeControl VolumeBar VolumeLevel CurrentTimeDisplay TimeDivider DurationDisplay ProgressControl ProgressHolder SeekBar LoadProgressBar PlayProgressBar SeekHandle LiveControl RemainingTimeDisplay Spacer PlaybackRate ChaptersButton DescriptionsButton SubtitlesCaptionsButton AudioTrackButton FullscreenToggle ErrorDisplayModal ModalDialog InfoModal

Vous pouvez également voir la structure des composants en consultant le Éléments onglet des outils de développement d'un navigateur. Vous voyez les éléments dans la capture d'écran ci-dessous. Par exemple, mis en évidence en jaune sont les éléments enfants de ControlBar.

éléments dans les outils de développement

Définitions

Les définitions des composants clés sont données dans le tableau suivant:

Composant Description
PosterImage L'image affichée jusqu'à la lecture de la vidéo
TextTrackDisplay Texte affiché en tant que piste distincte utilisée pour les légendes et sous-titres (au format WebVTT)
ChargementSpinner La roue de lecture animée qui s'affiche jusqu'à ce que la vidéo soit chargée
BigPlayButton Le bouton de lecture affiché dans la zone du bouton au moment du chargement
ControlBar Le conteneur pour toutes les commandes du lecteur principal
PlayToggle Le bouton de lecture qui alterne entre lecture et pause
MuteToggle Le bouton pour basculer entre audio coupé et non
Contrôle du volume Barre de curseur pour contrôler le niveau du volume
VolumeLevel Affiche le niveau de volume actuel en survolant la barre de volume
VolumeHandle Affiche la position actuelle du niveau de volume et peut être déplacé pour ajuster le niveau de volume
CurrentTimeDisplay Durée actuelle de la vidéo lue affichée en mm: ss
TimeDivider La barre oblique '/' séparant la durée actuelle et la durée de la vidéo
DuréeAffiche La durée totale de la vidéo
ProgressControl Le composant qui contient les barres de recherche, de progression de la charge et de progression du jeu
Barre de recherche Barre de média qui devient active à la réception de l'événement où le média a été récupéré
LoadProgressBar Indique la progression de la vidéo récupérée
PlayProgressBar Indique la progression de la vidéo en cours de lecture
SeekHandle Affiche la position actuelle de la tête de lecture pendant la lecture et peut être déplacée pour ajuster la tête de lecture
LiveControl Affiche le mot VIVRE Si vous diffusez un flux en direct
RestainingTimeDisplay Affiche la durée de la vidéo à jouer
Spacer Élément inséré dans la barre de contrôle en particulier pour ajouter des icônes
PlaybackRate Affiche le taux de lecture
ChaptersButton Bouton pour afficher les chapitres
CaptionsButton Basculer pour afficher le formulaire de paramètres de légende
FullScreenToggle Bouton pour basculer l'affichage plein écran
LégendesSettings Formulaire pour afficher et modifier les paramètres de légende
DockText Conteneur pour le titre et la description
DockTitle Titre de la vidéo
DockDescription Brève description de la vidéo
DockShelf Utilisé par le plugin de médias sociaux

Information de classe

La classe de lecteur et toutes les classes de contrôle héritent de la classe Component ou d'une sous-classe de Component.

videojs.Control = videojs.Component.extend (); videojs.Button = videojs.Control.extend (); videojs.PlayToggle = videojs.Button.extend ();

L'architecture du composant UI facilite l'ajout de composants enfants à un composant parent et la création d'une interface utilisateur complète, comme les contrôles du lecteur Video.js. Lorsque vous ajoutez un composant enfant, il insère l'élément de cet enfant dans l'élément du parent et vous permet de manipuler l'élément selon les besoins, comme illustré ici:

myButton = myPlayer.controlBar.addChild ('Button'); myButton.addClass ('bc-download-button'); myButton.on ('click', function () {...})