Cet article a fait l'objet d'une traduction automatique.

HTML5

Utilisation du multimédia dans HTML5

Jason Beres

 

À moins que vous avez été vivant sur une île à distance pour l'année dernière, vous avez probablement entendu buzz et battage autour de HTML5. Non, HTML5 sera DURCISSEMENT pas la plupart des maladies, ni terminera faim du monde, mais il s'apprête à remodeler le paysage des applications Internet rich. Avec battage par rapport à la nouvelle norme HTML, il est important de mettre la discussion précédente plus lisibles. Voici les faits importants, que vous devez savoir sur cette nouvelle spécification HTML :

• HTML5 est la nouvelle version de la spécification depuis 1999, le Web a beaucoup changé depuis.
• HTML5 sera la nouvelle norme pour HTML, XHTML et le modèle DOM HTML.
• HTML5 offre un moyen standard de lecture du média : une clé tirent profit car il n'a pas de norme pour la lecture du média dans une page Web sans un plug-in de navigateur et aucune garantie que chaque navigateur prendrait en charge le plug-in.
• HTML5 est toujours un travail en cours, mais les navigateurs plus modernes ont une prise en charge de la balise HTML5.

Lorsque Silverlight 1.0 a été livré en 2007, Microsoft a annoncé sa lecture audio et vidéo que les principales fonctionnalités et un très bon motif voir Silverlight comme alternative à Flash, qui est pris en charge dans une version ou un autre sur 95 pour cent des navigateurs dans le monde entier. À ce jour, Silverlight prend en charge environ 75 pour cent des navigateurs dans le monde entier, ou environ trois chaque quatre ordinateurs. Mais si vous envisagez de lire le média et que vous ne souhaitez pas la chandelle ou la dépendance d'un plug-in, HTML5 est la réponse.

Pour voir la différence entre l'utilisation de la balise video HTML5 et la balise object traditionnel pour lire le média, prenons l'exemple de Figure 1.

Figure 1 HTML vidéo balise vs. la balise Object pour lire le média

<section>
    <h1>Using the HTML5 Video tag to play video</h1>
    <video src="video1.mp4" >
    </video>
</section>
<section>
    <h1>Using the Object tag to play media using the Flash plug-in</h1> 
    <object type="application/x-shockwave-flash"
               data="player.swf" width="290" height="24">
        <param name="movie" value="player.swf">
    </object>
</section>

Qu'est l'enjeu ? Les deux exemples sont simples et faciles à mettre en œuvre. Mais le point important ici est que, étant donné que le <video> balise est une norme, il n'y aura aucune question à laquelle il doit être utilisé pour lire le média. Il est inutile de deviner si un navigateur a une certaine version d'un plug-in particulier installée pour lire les fichiers multimédias. La partie standard est ce qui a été absent du HTML.

Prise en charge des Formats multimédias dans HTML5

Pour utiliser des médias dans votre application HTML5 suivante, vous devez savoir quels formats sont pris en charge. HTML5 prend en charge AAC, MP3 et Ogg Vorbis audio Ogg Theora, WebM et MPEG-4 pour la vidéo.

Même si HTML5 prend en charge ces formats multimédias, toutefois, pas chaque navigateur prend en charge chaque format. Figure 2 indique les navigateurs actuels et les formats de médias qu'ils prennent en charge.

Figure 2 Media Support in navigateurs actuels

À l'aide de la balise de vidéo

Pour lire une vidéo dans une page HTML5, utilisez simplement <video> balise, comme illustré ici :

<video src="video.mp4" controls />

L'attribut src (http://www.w3.org/TR/html5/video.html\#the-source-element) définit l'ou les noms de la vidéo à lire et dicte de commutateur booléenne du contrôle si la lecture par défaut contrôle affiche.Vous pouvez également utiliser deux autres propriétés booléennes — exécution automatique et boucle — lorsque vous configurez la balise video.Figure 3 répertorie chaque attribut de propriété et sa valeur.

Figure 3 propriétés de balise de vidéo

Attribut	Valeur	Description
Audio	Muet	Définit l'état par défaut de l'audio.Actuellement, seuls muet est autorisée.
Lecture automatique	Lecture automatique	Le cas échéant, la vidéo démarre la lecture dès qu'il est prêt.
Contrôles	Contrôles	Ajoute des contrôles de lecture, Pause et Volume.
Height	Pixels	Définit la hauteur du lecteur vidéo.
Loop	Loop	Le cas échéant, la vidéo recommence à nouveau chaque fois qu'elle se termine.
Poster	url	Spécifie l'URL d'une image représentant la vidéo.
Preload	Preload	Le cas échéant, la vidéo est chargée au moment du chargement de page et est prête à s'exécuter.Il est ignoré si l'exécution automatique est présent.
Src	url	URL de la vidéo à lire.
Width	Pixels	Définit la largeur du lecteur vidéo.

Le code suivant illustre un certain nombre de propriétés de clé sur le lecteur vidéo dans un scénario courant inclut la définition de la hauteur et la largeur, propriétés lecture automatique, boucle et les contrôles qui afficheront la lire, suspendre et de contrôle de volume ainsi que d'un message d'erreur de secours.

<video src="video.mp4" width="320" height="240" autoplay controls loop>
    Your browser does not support the video tag.
</video>

Vous pouvez également définir la typeusing MIME spécifique l'attribut type et le codec dans l'élément source. Ces exemples utilisent l'attribut type pour définir le type MIME et le codage du média :

<!-- H.264 Constrained baseline profile video (main and extended video compatible)
  level 3 and Low-Complexity AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity
  AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

Vous pouvez définir des propriétés au format HTML ou JavaScript. Le code suivant montre comment définir la propriété booléenne contrôles HTML et JavaScript.

<!-- 3 ways to show the controls -->
<video controls>
<video controls="">
<video controls="controls">
// 2 ways to show controls in JavaScript
video.controls = true;
video.setAttribute
       ('controls',
        'controls');

Lorsque vous ne savez pas si un navigateur va afficher la page, vous avez besoin d'un mécanisme de secours pour lire les fichiers multimédias. Il vous suffit les formats vidéo, rendu de votre vidéo dans la liste et le navigateur joue le premier qu'il prend en charge. Vous pouvez également ajouter du texte en dernier recours pour informer l'utilisateur que le navigateur utilisé ne prend en charge native HTML5 lecture de la vidéo. Le code suivant inclut plusieurs sources vidéo ainsi qu'un message de secours n'indiquant aucune prise en charge HTML5.

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <p>This browser does not support HTML5 video</p>
</video>

Si vous souhaitez vous assurer que votre vidéo est lu, vous pouvez inclure la balise object pour lire une version Flash ainsi, comme suit :

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <object data="videoplayer.swf">
        <param name="flashvars" value="video1.mp4">
        HTML5 Video and Flash are not supported
    </object>
</video>

Vous pouvez également utiliser JavaScript pour vérifier si un format vidéo est prise en charge en vérifiant la propriété canPlayType, comme suit :

var video = document.getElementsByTagName('video')[0];
if (video.canPlayType)
   { // video tag supported
if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))
      { // it may be able to play}
        else
      {// the codecs or container are not supported
        fallback(video);
  }
}

Si vous voulez faire quelque chose plus expressif que le texte de secours simple, vous pouvez utiliser l'écouteur d'événements onerror pour passer de l'erreur :

<video src="video.mp4"
       onerror="fallback(this)">
       video not supported
</video>

À l'aide de la propriété fichier de comptabilisation, vous pouvez spécifier l'URL d'une image à afficher à la place de la vidéo sur le formulaire. Généralement vous affichez une liste de vidéos ou d'une seule vidéo sur un formulaire, afin d'avoir un moyen facile d'afficher un aperçu de la vidéo sous la forme d'une image offre une meilleure expérience utilisateur. Voici la propriété affiches en action :

<video src="video1.mp4" poster="preview.jpg" </video>

Enfin, en utilisant un peu de JavaScript et HTML de base, vous pouvez créer un lecteur vidéo plus interactif. Figure 4 montre comment ajouter un lecteur vidéo à un formulaire avec JavaScript et comment répondre aux entrées d'utilisateur dans le contrôle.

Figure 4 Interagissant avec la vidéo dans JavaScript

var video = document.createElement('video');
video.src = 'video1.mp4';
video.controls = true;
document.body.appendChild(video);
var video = new Video();
video.src = 'video1.mp4';
var video = new Video('video1.mp4')
<script>
    var video = document.getElementsByTagName('video')[0];
</script>
<input type="button" value="Play" onclick="video.play()">
<input type="button" value="Pause" onclick="video.pause()">

Pour une liste complète des événements et des fonctions de lecture de vidéo, consultez cette section de la spécification à http://www.w3.org/TR/html5/video.html\#playing-the-media-resource.

À l'aide de la balise Audio

À l'aide de la balise audio est très semblable à l'aide de la balise video : passer d'un ou plusieurs fichiers audio pour le contrôle et le premier d'entre eux le navigateur prend en charge est lu.

<audio src="audio.ogg" controls>
 Your browser does not support the audio element.
</audio>

Figure 5 répertorie les propriétés disponibles dans la balise audio. Le contrôle n'a pas besoin d'afficher comme un lecteur vidéo, afin que les propriétés telles que height, width et affiches ne sont pas incluses.

Propriétés de la balise figure 5 Audio

Attribut	Valeur	Description
Lecture automatique	exécution automatique	Le cas échéant, l'audio démarre la lecture dès qu'il est prêt.
Contrôles	contrôles	Contrôles, comme un bouton de lecture sont affichées.
Loop	boucle	Le cas échéant, l'audio démarre à nouveau (boucle) lorsqu'il atteint la fin.
Preload	précharger	Le cas échéant, l'audio est chargé au moment du chargement de page et est prête à s'exécuter. Il est ignoré si l'exécution automatique est présent.
Src	url	L'URL du fichier audio à lire.

Comme avec la balise vidéo, vous pouvez transmettre plusieurs fichiers à la balise audio et celle qu'il est pris en charge sera lu. Vous pouvez également utiliser un message de secours lorsque le navigateur ne prend pas en charge la balise audio, comme suit :

<audio controls autoplay>
   <source src="audio1.ogg" type="audio/ogg" />
   <source src="audio1.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

Résumé

HTML5 est le nouveau standard pour le Web, et selon les navigateurs que vous ciblez, commencer à utiliser parmi les nouvelles balises, telles que les données audio et vidéo, dès maintenant. Soyez prudent lorsque vous utilisez HTML5, toutefois, parce que pas chaque navigateur prend en charge les nouvelles balises, et même s'il en existe, il ne peut-être pas en charge le format de chaque média. Si vous utilisez un navigateur moderne qui ne prend pas en charge HTML5, vous devez toujours faire le travail supplémentaire pour traiter vos médias dans tous les formats pour garantir la réussite de l'utilisateur. Voici des ressources Web intéressantes, qui fournissent des informations de prise en charge du navigateur ainsi que toutes les informations nécessaires garantir la réussite de media HTML5 :

• http://www.w3.org/TR/html5/Video.HTML
• http://dev.w3.org/html5/spec/Overview.HTML
• http://w3schools.com/html5/default.asp
• http://html5test.com/
• http://caniuse.com/

Jason Beres est vice-président directeur de gestion de produits, communautaire et chez Infragistics et spearheads innovantes orienté vers le client, fonctions et fonctionnalités dans l'ensemble de tous les produits Infragistics. Jason est un Microsoft.NET MVP et est un membre actif de la.NET communautaire. Il participe à des dizaines d'événements et des conférences dans le monde entier chaque année. Il est l'auteur de huit livres portant sur des sujets allant de Visual Basic et C# à SQL Server et Silverlight ; ses dernières est professionnel Silverlight 4 (Wrox 2010). Vous pouvez le contacter Jason à jasonb@infragistics.com ou sur twitter @ jasonberes.