Maître HTML5 audio balisage

Simplement dit, il ya deux éléments multimédias primaires pour HTML5, qui sont tous deux absurdement facile à utiliser. L'élément audio est nommé , et l'élément de vidéo est nommé . En HTML5, le navigateur détermine quels joueurs sont intégrés et sont donc utilisables. Vous devez planifier votre utilisation de l'audio et la vidéo en conséquence.

Voici une version simplifiée de ce balisage audio ressemble:

Ici, le src attribuer des points dans le fichier audio que vous souhaitez avoir joué arrière. Il indique l'emplacement de l'objet audio pour la lecture. L'emplacement doit être un URI valide (Uniform Resource Identifier) ​​qui, tout comme une URL, identifie où le navigateur devrait ressembler pour le fichier audio.

La contrôles l'entrée se trouve dans un certain nombre d'attributs de contrôle que vous pouvez utiliser pour gérer la lecture et le comportement audio, comme suit (présenté dans l'ordre alphabétique):

  • lecture automatique: Indique au navigateur de commencer à jouer audio dès que le fichier objet est chargé. La seule valeur juridique de cet attribut est lecture automatique, mais aucune valeur est strictement nécessaire en HTML5.

  • contrôles: Indique au navigateur d'afficher un widget de l'écran pour contrôler la lecture audio (généralement avec pause / play boutons, une barre de progression, et les contrôles de volume). Comme avec la lecture automatique, la seule valeur juridique de cet attribut est contrôles, mais aucune valeur est strictement nécessaire en HTML5.




  • boucle: Indique au navigateur de revenir au début et à continuer à jouer quand il arrive à la fin du fichier objet. Ici aussi, la seule valeur juridique de cet attribut est boucle, et aucune valeur est strictement nécessaire.

  • précharge: Indique au navigateur si elle doit précharger le fichier objet, et si oui, comment il doit être préchargé. Les valeurs possibles sont

  • aucun: Ne pas charger une partie du fichier audio chargement de la page

  • métadonnées: Charge uniquement les métadonnées audio lorsque la page des charges. Il établit également la lecture mais ne dispose pas encore de données chargées.

  • auto: Charge tout le fichier audio chargement de la page

La précharge attribut est ignoré si lecture automatique est présent.

La section Alternatives est très intéressant et très utile dans le soutien de navigateurs plus anciens. Page visiteurs voient, ou courent, le contenu à l'intérieur du balises uniquement si leur navigateur ne supporte pas l'élément audio (parce que leur navigateur ignore les balises qu'il ne reconnaît pas), mais les navigateurs HTML5 avertis sont assez intelligents pour sauter ces directions alternatives.

Ceci est où vous pouvez appeler des plug-ins pour les joueurs spécifiques et différents formats de fichier parce que vous savez que seuls les visiteurs qui ne peuvent pas utiliser le haut-HTML5 capacités de lecture audio va rencontrer ce balisage.

L'exemple ici profite de cela pour vous montrer comment appeler d'autres formats de fichiers dans le cas où votre format choisi ne peut pas être joué. Comme le montre, un navigateur qui n'a pas l'appui audio HTML5 va afficher le mot Alternatives Sur l'écran!

Voici quelques balises qui ne sera pas lire une .ogg fichier audio jusqu'à ce que l'utilisateur active le bouton de lecture sur les contrôles à l'écran, avec boucle continue aussi longtemps que la page reste à l'écran. Il fournit également WAV et MP3 alternatives pour les navigateurs plus anciens:

Par défaut, si vous omettez src attribuer à l'ouverture tag, la cible pour la première élément est joué dans un navigateur qui reconnaît le HTML5 élément. Cette configuration rend facile à empiler vos options de lecture dans la section Alternatives, en commençant par celui que vous voulez plus, et ainsi de suite.

Si les joueurs pour les trois formats ne sont pas disponibles, aucun son ne sera joué du tout. Dès que le navigateur trouve un joueur en fonction du type de fichier son (.ogg premier, .wav deuxième, .mp3 troisième), le navigateur utilise le lecteur pour jouer le son, puis le navigateur continue de traiter le reste du document HTML qui suit.

Cette figure montre ce que cette page dans un fichier HTML correctement construit avec du texte et des informations supplémentaires à l'écran ressemble à Chrome.

image0.jpg

» » » » Maître HTML5 audio balisage