Pour ceux qui pensent déjà personnaliser leur lecteur vidéo qui utilise l’élément video de HTML 5, j’ai fait un petit Flash+Javascript qui reprend l’API défini dans la documentation.

Introduction

HTML 5 introduit de nouveaux éléments dont l’élément video qui permet d’afficher un média de type vidéo sur une page HTML. Certains navigateurs modernes commencent à l’implémenter même si les spécifications ne sont pas encore figées.

Ces navigateurs peuvent donc afficher des vidéos ainsi que leur contrôleur. La documentation indique qu’il y a une API qui permet de manipuler la vidéo sans utiliser le contrôleur par défaut.

L’idée, c’est de fournir un lecteur vidéo en flash compatible avec cette API afin de réutiliser un contrôleur personnalisé destiné au départ à l’élément video. Celà permet de faire une amélioration progressive entre le Flash et le HTML 5, tout en gardant le même design de contrôleur qui va bien avec le site.

Exemple

Voici un exemple de page qui affiche une vidéo avec l’élément video si le navigateur le supporte, sinon un Flash, voire un texte alternatif s’il n’a aucun des deux : http://resources.neolao.com/flash/components/flv_player_html5

En lisant la documentation, j’ai tout de suite compris qu’un Flash ne suffirait pas. Il me fallait aussi un objet Javascript qui implémente des méthodes comme addEventListener ou des setters comme currentTime. En effet, le dialogue entre le Flash et Javascript est limité par des appels de méthodes et des arguments de type String, Number, Boolean, Array ou Object.

Conclusion

La seule difficulté, c’était de simuler un setter parce que je ne pouvais pas l’utiliser à cause d’Internet Explorer, encore lui … Sinon c’est plutôt simple et la documentation est assez claire.

Je n’ai pas terminé de reproduire tous les comportements, il me reste quelques évènements et des propriétés à remplir.