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 :

?View Code JAVASCRIPT
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.

?View Code JAVASCRIPT
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 !

Vous avez aimé ce billet ? Partagez-le avec votre réseau :

  • Print this article!
  • Digg
  • Facebook
  • blogmarks
  • del.icio.us
  • LinkedIn
  • Reddit
  • Scoopeo
  • Yahoo! Bookmarks
  • Twitthis
  • Wikio FR
  • Netvibes
  • Technorati