HTML5 - Multimédia intégré

Dans HTML5 les éléments vidéo et audio ont de nombreux facteurs en commun, donc l'objet HTMLMediaElement définit les caractéristiques fondamentales de chacun dans le SOLEIL.
Les éléments audio sont représentés par l'objet HTMLAudioElement, cet objet ne représente aucune augmentation des fonctionnalités du HTMLMediaElement, de l'autre côté nous avons l'objet HTMLVideoElement représentant les éléments vidéo et le contraire de l'objet HTMLAudioElement ceci s'il suppose des caractéristiques supplémentaires sur le HTMLMediaElement.
L'élément audio
L'élément l'audio nous permet d'intégrer du contenu audio dans nos documents HTML, c'est nouveau dans HTML5 et peut contenir les attributs suivants : lecture automatique, préchargement, commandes, boucle, mise en sourdine, src.
Voyons un exemple de code expliquant comment inclure un élément audio dans nos documents :

 Exemple Le contenu audio ne peut pas être lu 

Nous remarquons que nous avons une étiquette, où nous définissons l'attribut les contrôles afin que nous puissions avoir les boutons qui nous permettent de manipuler la lecture du fichier, avec src nous indiquons le chemin vers le fichier audio et enfin lecture automatique, être présent indique que le fichier doit être lu lorsque le document est chargé.
Comme on peut le voir, c'est quelque chose d'assez simple à gérer, voyons dans l'image suivante à quoi cela ressemblerait dans notre navigateur :

Obtenir des informations multimédia
Comme nous l'avions mentionné au début, avec l'objet HTMLMediaElement nous avons regroupé les caractéristiques audio et vidéo communes, et que dans le cas de la vidéo certaines caractéristiques supplémentaires ont été augmentées.
Les informations que nous pouvons obtenir avec cet objet sont les suivantes :

• lecture automatique Il nous indique si la reproduction automatique du fichier est activée ou non.
• canPlayType() nous indique si le navigateur est capable de reproduire le fichier indiqué.
• CurrentSrc vous permet de connaître la source actuelle du fichier.
• les contrôles permet de connaître ou d'établir la présence ou non des commandes de lecture sur le fichier.
• par défautMuet indique ou définit si le fichier doit démarrer avec le volume complètement silencieux.
• boucle indique ou définit si le fichier doit être bouclé.
• en sourdine baisser le volume du fichier
• précharger indique ou définit le fichier à charger avant de jouer lorsque la page se charge.
• src indique ou définit le chemin d'accès au fichier multimédia.
• le volume règle ou indique le volume de la lecture du fichier.

Comme nous l'avons indiqué, l'élément vidéo a quelques caractéristiques supplémentaires, voyons ce qu'elles sont ci-dessous :

• la taille indique ou définit la hauteur.
• affiche indique ou définit la valeur de l'attribut poster avec lequel nous pouvons placer une image de couverture pour la vidéo
• vidéoHauteur indique ou définit la hauteur de la vidéo.
• vidéoLargeur indique ou définit la largeur de la vidéo
• largeur indique ou définit la largeur.

Dans le code suivant, nous verrons comment nous pouvons obtenir des informations à partir de ces éléments et comment nous pouvons les afficher dans notre document pour le voir dans le navigateur :

 Exemple La vidéo ne peut pas être affichée 
 
Biens
Valeur

 

 

Pour finir ce tutoriel, voyons ce que le navigateur nous montre avec ce code :

AGRANDIR

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif