8juil09
Compléments d’informations sur la balise « video » de HTML 5
De récents événements m’invitent à mettre à jour mon précédent billet sur les nouvelles balises d’HTML 5.
La balise « video » permet, je vous le rappelle, l’inclusion de vidéos dans une page html sans faire appel à un plugin navigateur (Flash, Silverlight).
Un format universel ?
Le W3C, qui est en charge de la normalisation du web, ne fournira pas de spécifications concernant les codecs des balises audio et video de HTML 5. Le grands acteurs que sont Apple, Mozilla, Youtube ou Microsoft n’ont pas réussi à s’entendre sur un codec. Tout ceci est expliqué chez M.Nitot.
En attendant un consensus sur le format dominant, on peut toujours utiliser la balise « source » pour couvrir tous les formats vidéos et intégrer du Flash (par exemple) pour les navigateurs ne supportant pas cette fonctionnalité :
1 2 3 | <video src="video.ogv" id="myVideo" controls> <object data="flvplayer.swf" type="application/x-shockwave-flash"><param value="flvplayer.swf" name="movie"/></object> </video> |
Contrôler la vidéo avec Javascript
Dans mon précédent article sur la balise vidéo, je n’ai pas parlé du contrôle des événements via Javascript. En effet, le working draft d’HTML 5, autrement dit le brouillon en cours d’écriture de la prochaine version d’HTML, prévoit un accès via le DOM pour contrôler une vidéo ou tout autre élément « media ». Quelques exemples :
1 2 | var myVideo = document.getElementById("myVideo"); myVideo.play(); |
Tout un tas d’événements sont prévus tels que play, pause, end, seeked, volumechange, etc.
1 2 | myVideo.addEventListener("seeked", function() { myVideo.play(); }, true); myVideo.currentTime = 10.0; |
Les développeurs vont-ils se lancer dès maintenant dans l’intégration des nouveautés de HTML 5 ?
En tout cas, à Nethik, on suit le sujet de près !
Pour en savoir plus:
- Exemples de manipulation de la balise video sur le blog de Mozilla Hacks
- Les événements sur les éléments media sur le working draftde HTML 5
On parle de nous