L'élément video est l'une des fonctionnalités les plus remarquables de HTML5, car elle permet aux développeurs d'intégrer des vidéos directement dans des pages Web sans avoir besoin de plugins externes tels que Flash. A travers divers attributs, propriétés, méthodes et événements , l'élément video offre un contrôle total sur la lecture du contenu multimédia. Dans cet article, nous explorerons chacune de ces fonctionnalités en détail.
Attributs des éléments video
Attributs des éléments video Ils définissent leur comportement et leur apparence directement à partir du HTML. Tous les attributs les plus pertinents sont répertoriés ci-dessous :
- src: Spécifie l'URL du fichier video qu'il faut reproduire. Cet attribut est facultatif si des éléments sont utilisés 'source' à l'intérieur du 'video' .
- controls: affiche les commandes par défaut du navigateur pour la lecture, telles que le bouton de lecture, la barre de progression, le contrôle du volume, etc.
- autoplay: Indique que le video Il devrait commencer à jouer automatiquement dès que possible, dès qu'il sera suffisamment chargé.
- loop: Rend le video joue en boucle continue, recommençant à la fin.
- muted: Rend le video joue sans son.
- poster : Définit une image qui s'affiche pendant que le video ou jusqu'à ce que l'utilisateur démarre la lecture.
- preload: Suggère au navigateur comment il doit gérer le chargement du video. Vous pouvez prendre les valeurs :
auto (précharger tous les video), metadata (il suffit de précharger les métadonnées) ounone(ne préchargez rien).
- width et height : Spécifie les dimensions de la zone d'affichage du video en pixels.
- playsinline: Indique que le video doit être joué en ligne plutôt qu’en mode plein écran sur les appareils mobiles.
Propriétés des éléments video
Propriétés des éléments video vous permettent de manipuler le comportement de video via JavaScript. Les propriétés les plus importantes sont décrites ci-dessous :
- currentTime: Obtenez ou définissez la position de lecture actuelle du video , en quelques secondes. Utile pour accéder à un point spécifique du video .
- duration: Renvoie la durée totale du video en quelques secondes. Si la durée n'est pas disponible, renvoie NaN .
- paused: Indique si le video est actuellement en pause.
- ended: Indique si la lecture du video c'est fini.
- volume: Permet d'obtenir ou de régler le niveau de volume du video. La valeur varie entre 0,0 (silence) et 1,0 (volume maximum).
- muted: Détermine si le video est en sourdine. Peut être défini sur vrai ou faux.
- playbackRate: Contrôle la vitesse de lecture du video. Une valeur de 1,0 représente la vitesse normale, tandis que des valeurs inférieures la réduisent et des valeurs plus élevées l'augmentent.
- readyState: Renvoie l'état de charge du video. Les valeurs possibles sont :
0 (HAVE_NOTHING), 1 (HAVE_METADATA), 2 (HAVE_CURRENT_DATA),
3 (HAVE_FUTURE_DATA)et 4 (HAVE_ENOUGH_DATA).
- seeking: Indique si le videoest en train de chercher un nouveau poste d'élevage.
- buffered: Renvoie un objet TimeRanges qui indique les parties du video qui ont été mis en mémoire tampon.
- videoWidth et videoHeight: Renvoie la largeur et la hauteur du video , respectivement, en pixels.
Méthodes des éléments video
Méthodes des éléments video permettre aux développeurs de contrôler la lecture du video par programmation. Les méthodes les plus utilisées sont décrites ici :
- play() : Démarre la lecture du video. S'il video est en pause, cette méthode reprend la lecture.
- pause(): Pause la lecture du video. S'il videoIl est déjà en pause, cela n'a aucun effet.
- load(): Rechargez le video depuis son origine. Ceci est utile si vous devez recharger un video pour une raison quelconque.
- canPlayType(type): Renvoie une valeur qui indique si le navigateur peut lire un type spécifique de fichier. video. Les valeurs possibles sont :
"" (inconnu), "probably" (probablement reproductible) et "maybe" (peut-être reproductible).
- addTextTrack(kind, label, language): ajoute une nouvelle piste de texte (par exemple, des sous-titres) au video. Le paramètre kind pourrait être "subtitles", "captions", "descriptions", "chapters" soit "metadata".
Événements d'élément video
Événements d'élément video Ils sont essentiels pour répondre aux interactions des utilisateurs et aux changements d’état pendant la lecture. Voici les événements les plus courants :
- play: Se déclenche lorsque le video commence la lecture, soit par une action de l'utilisateur, soit par la méthode play() .
- pause: Déclenché lors de la lecture du video s'arrête. Cela peut se produire lorsque l'utilisateur interrompt le video ou lorsque la méthode est appelée pause().
- ended: Cela se produit lorsque le video atteint la fin de sa durée et arrête la lecture.
- timeupdate: Se déclenche périodiquement pendant la lecture de la chanson. video et la position de lecture actuelle change.
- volumechange: Se produit lorsque le volume du video ou la sourdine est activée/désactivée.
- loadeddata: Se déclenche lorsqu’une quantité suffisante de batterie a été chargée. video afin qu'il soit prêt à démarrer la lecture, mais avant qu'il ne soit complètement chargé.
- loadedmetadata: Se produit lorsque les métadonnées du video (par exemple, durée, dimensions et pistes de texte).
- canplay : Indique que le video peut commencer à jouer, mais n'est pas encore suffisamment chargé pour jouer complètement sans pauses.
- canplaythrough: Déclenché lorsque le navigateur estime que le video Il peut être joué dans son intégralité sans interruption.
- seeking: se produit lorsqu'une opération de recherche est lancée, c'est-à-dire lorsque l'utilisateur ou le script modifie la position de lecture.
- seeked: Déclenché lorsqu'une opération de recherche est terminée.
L'élément video offre une grande flexibilité et un grand contrôle pour la lecture de video sur le Web. En comprenant et en utilisant ses attributs, propriétés, méthodes et événements, vous pouvez créer des expériences multimédia riches adaptées aux besoins de vos utilisateurs. Explorez toutes les possibilités qu'il offre et tirez le meilleur parti de cet outil puissant !
Comentar: