Une application HTML5 pour afficher les vidéos 5 minutes pour comprendre IE9

Avec Stanislas Quastana, nous avons créé une série de vidéos appelée “5 min pour comprendre” permettant d’illustrer assez rapidement quelques nouveautés autour d’Internet Explorer 9. Nous les avons publiées ici sur le blog IE France : La série 5 minutes pour comprendre IE9: la liste complète . Ces vidéos sont visibles au format Silverlight Smooth Streaming et/ou avec la balise vidéo HTML5 au format h264.

Certains d’entre vous m’ont indiqué qu’ils auraient aimé avoir également une version WebM. Je me suis donc amusé à ré-encoder les vidéos au format WebM en utilisant l’utilitaire gratuit Miro Video Converter.

Ensuite, je voulais afficher l’ensemble de manière plus sympathique donc je suis reparti de la démo IMDb Video Panorama de notre site IE Test Drive.

Cette démo met en avant les capacités de votre navigateur à afficher de manière fluide les animations et à afficher une vidéo en utilisant la balise HTML5 <video>. Par contre, comme la démo n’utilisait et ne testait que le support du codec h264, j’ai légèrement modifié le code pour également supporter le format WebM. En effet, pour rappel, h264 est supporté via HTML5 par IE9, Safari et Chrome même si Google a annoncé l’abandon de son support à terme dans son navigateur. WebM de son côté est supporté nativement par Chrome, Firefox, Opera et par IE9 via l’installation du codec par Google. Vous pouvez d’ailleurs le voir en démonstration dans IE9 ici : Video Format Support

En résumé donc, si vous souhaitez pouvoir afficher de la vidéo nativement via HTML5 sur l’ensemble des navigateurs actuels, il faut au moins faire du double encodage en h264 et en WebM.

Au final, cela donne le résultat suivant :

Vous pouvez également afficher l’ensemble en plein écran à part depuis ce lien : 5min IE9 Video Panorama

David

Comments

• Anonymous
  July 20, 2011
  Juste pour information un sens interdit ne ressemble à ça, l'icone bleu ressemble plus à un panneau de zone de stationnement !