Preview de HTML 5
écrit par Dominic Martineau le décembre 8, 2007
HTML 5 introduira une tonne de nouveaux éléments.
Structure
Normalement, la structure d’un site comprend une entête, un pied de page, une navigation et des colonnes. Sous HTML4, il est nécessaire d’utiliser l’élément div pour représenter ces blocs.
<body>
<div id=”header”>…</div>
<div id=”menu”>…</div>
<div id=”content”>…</div>
<div id=”sidebar”>…</div>
<div id=”footer”>…</div>
</body>
HTML5 a adressé ce problème en créant les nouveaux éléments suivants:
<body>
<header>…</header>
<nav>…</nav>
<article>
<section>…</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>
Vidéo et Audio
Depuis l’avènement des sites comme Youtube, Metacafe, MySpace et Revver, les “players” vidéo et audio sont de plus en plus répandus. Présentement, ils sont tous conçus en flash puisque cette technologie est “embedable” facilement et permet de designer les players aux couleurs de son site.
Afin qu’il soit encore plus facile d’embeder une vidéo ou de l’audio, HTML5 introduira les éléments <video> et <audio>, ainsi qu’un API DOM pour contrôler le playback.
<video src=”video.mov” controls poster=”poster.jpg” width=”320″ height=”240″ autoplay></video>
L’attribut controls est un boolean qui indique si l’UI par défaut doit être montré ou non.
L’attribut poster est utilisé pour déterminer l’image qui sera affichée avant le démarrage du vidéo.
Pour les développeurs qui aimeraient créer leur propre UI, il est possible de créer ses propres boutons et d’utiliser un API en DOM très simple.
<video id=”video” src=”video.mov” poster=”poster.jpg” width=”320″ height=”240″></video>
<script type=”text/javascript”>
var video = document.getElementById(’video’);
</script>
<button onclick=”video.play()”>Play</button>
<button onclick=”video.pause()”>Pause</button>
Références
