Trucsweb.com

Trucsweb.com

Multimédia

La vidéo Web

RDFFav

Vidéo HD et son HTML5

La grande innovation du HTML5, s’il en est une! L’intégration de vidéo de qualité HD.html3, vidéoVidéo HD et son HTML5

La lecture de vidéo a toujours causé des maux de tête aux webmestres. Le poids des fichiers mais surtout le manque de support des navigateurs. On peut parler de guerre des formats et sans doute un rapport à voir avec la plate-forme Macintosh et son format Quicktime versus Windows et RealPlaer par exemple puis Windows media Player. Et pourtant le MPEG4 était déjà la en 2000 (MPEG4, le MP3 du vidéo)! Pendant ce temps, Macromedia révolutionnait le marché avec Director et Flash. Un autre plug-in mais cette fois installé à son apogée sur plus de 95% des navigateurs. Personne n’aurait pu arrêter ce virage, si ce n’est du portable, le ipad! Et ironiquement Apple a acheté Flash sans jamais rendre ses appareils compatibles! Par la bande un petit joueur en a profité assez longtemps pour doubler tout ce beau monde et devenir la seule référence. Et j’ai nommé YouTube. Eh oui grâce au Flash!

Enfin cette ère de misère est terminée ;-) et c’est là la grande innovation du HTML5, s’il en est une! L’intégration de vidéo de qualité HD et la balise <video> capable de combiner plusieurs sources et différents formats de vidéo. L’idée toute simple consista à placer un en dessous de autres les codes avec les différents format. Le MP4 en haut, suivit du WebM, Ogg et finalement un format Flash pour les plus anciens navigateurs. Le navigateur utilise tout simplement le premier compatible. Le format Flash est en fait un lecteur MP4 en flashs qui ouvre la vidéo en format MP4. On peut aussi y ajouter une description ou du sous-titrage avec la balise <track>. Un grand avantage et de pouvoir manipuler et contrôler la vidéo en Javascript.

Contrôles
  • Jouer (Play
  • Pause
  • Atteindre (Seeking)
  • Volume
  • Basculer en plein écran (Fullscreen toggle)
  • Sous-titres / légendes (Captions/Subtitles)
  • Piste (Track)
Balise « <video> »

C’est tout simple, un navigateur compatible ouvrira la vidéo sinon le message « Votre navigateur ne supporte pas la vidéo HTML5 » s’affichera.

<video width="320" height="240" src="movie.mp4" controls>
Votre navigateur ne supporte pas la vidéo HTML5
</video>

Attribut de la balise <video>
Attribut Valeur Description
autoplay autoplay Spécifie à la lecture de démarrer automatiquement ou non.
controls controls Spécifie d’afficher ou non la barre de contrôle.
height pixels Spécifie la largeur de la vidéo.
loop loop Spécifie de recommencer la lecture à la fin du vidéo.
muted muted Spécifie de couper le son.
poster URL Spécifie l’adresse d’une image affichée avant le début de la lecture.
preload auto
metadata
none
Spécifie de charger en mémoire la vidéo au chargement de la page.
src URL Spécifie l’adresse de la vidéo.
width pixels Spécifie la largeur de la vidéo.
Format de vidéo

Tout navigateur compatible avec le format MP4 pourra voir la vidéo. C’est-à-dire tous les navigateurs sauf Opera! Le format WebM, compatible Opera, est aussi une bonne idée, mais incompatible avec Safari ni Internet Explorer! Alors voilà l’idée d’ajouter des sources différentes par format. Voilà les formats disponibles.

Format de fichier Type de média
MP4 video/mp4
WebM video/webm
Ogg video/ogg
Balise « <source> » et « <audio> »

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
Votre navigateur ne supporte pas le son HTML5
</video>

ou

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas la vidéo HTML5
</audio>

Attribut de la balise <source>
Attribute Value Description
media media_query Spécifie le type de ressources
src URL Spécifie l’adresse du fichier
type media_type Spécifie le type de fichier

Compatibilité

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari. Internet Explorer 8 et les versions antérieures ne supportent pas la balise <video>.

Fichier Flash

Une animation Flash permet d’étendre la compatibilité aux plus anciens navigateurs, placer le code après la dernière balise <source>. Noter la balise <object> et <embed> pour la compatibilité cette fois Netscape / Internet Explorer...

<div id="easyhtml5video">
  <video controls="controls" autoplay="autoplay" poster="image.jpg" onclick="if(/Android/.test(navigator.userAgent))this.play();" height="256" width="604">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
    <object type="application/x-shockwave-flash" data="video.swf" style="position:relative;" height="256" width="604">
        <param name="movie" value="flashfox.swf">
        <param name="allowFullScreen" value="true">
        <param name="flashVars" value="autoplay=true&controls=true&fullScreenEnabled=true&loop=false&poster=image.jpg&src=happyfit2.mp4">
        <embed src="flashfox.swf" style="position:relative;" flashvars="autoplay=true&controls=true&fullScreenEnabled=true&loop=false&poster=image.jpg&src=happyfit2.mp4" allowfullscreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" height="256" width="604">
        <img alt="happyfit2" src="image.jpg" style="position:absolute;left:0;" title="Video playback is not supported by your browser" height="256" width="604">
    </object>

  </video>
</div>

La ligne Javascript onclick="if(/Android/.test(navigator.userAgent))this.play();" permet aux utilisateurs Android de cliquer sur la vidéo pour débuter la lecture.

Lire le tutoriel sur le logiciel « Easy HTML5 Video » pour plus d’information sur la conversion et l’intégration de vidéo HTML5.
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

9/10 sur 1 revues.
       Visites : 12301 - Pages vues : 13548
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@