Lecteur Flash compatible avec l'API video de HTML 5
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/c...
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.
Commentaires
1. Le dimanche, juin 7 2009, 19:15 par ekameleon
très bonne idée :) merci pour ce lecteur.
2. Le dimanche, juin 7 2009, 19:24 par Nicolas F.
Belle initiative !
3. Le mardi, juin 9 2009, 19:54 par MarvinLeRouge
Très joli coup neolao. Reste à voir ce qu'il adviendra de html5 :)
4. Le mardi, août 30 2011, 16:48 par Seb R.
Cela marche nickel. Merci beaucoup !!
J'aimerai savoir s'il existe une fonction pour le fullscreen
5. Le mardi, août 30 2011, 16:51 par neolao
On ne peut pas activer le fullscreen via javascript. C'est une protection de Flash.
Il faut au moins avoir le focus puis cliquer dessus pour activer son fullscreen.
6. Le jeudi, mars 15 2012, 11:30 par gselles
Bonjour,
Quel serait,selon vous, l'effort à fournir pour le développement d'un équivalent pour la balise <audio> permettant de lire une liste de fichiers mp3 et/ou ogg.
Ceci pour permettre de sonoriser par exemple une table d'addition avec la suite suivante:
1.ogg,plus.ogg,2.ogg,egal.ogg,3.ogg.
D'avance merci pour votre réponse.
Gérard Sellès.
7. Le jeudi, mars 15 2012, 11:34 par neolao
Je pense que l'effort est équivalent à la vidéo :)
Il "suffit" de reproduire l'API de l'audio à un lecteur Flash.
8. Le vendredi, avril 13 2012, 02:46 par leouf
D'abord un grand merci pour ce beau travail!
Actuellement, je projette d'utiliser la version multi de ton player FLV. Et je me demandais si des méthodes accessibles en javascript autre que play/next/etc**.. pourrait voir le jour dans la prochaine version?
Grâce à la version actuelle on sait customiser le lecteur. Manque plus qu'à le piloter !
Je ne sais pas si t'es toujours actif sur ce projet mais sache qu'il m’intéresse grandement. N'y connaissant rien à flash, je compte m'appuyer sur ton player pour l'intégrer dans mon projet. Me manque plus que quelques méthodes !
Malgré mon ton racoleur, j'attends avec impatience ta réponse ...
** comme :
-connaitre le temps écoulé
-connaitre le % téléchargé (buffer total)
-lire à un temps t la video
-changer la playlist dynamiquement grâce à javascript (actuellement, une fois la page chargé, il est impossible de modifier la playlist ou quoi que ce soit d'autre)
9. Le vendredi, avril 13 2012, 09:07 par neolao
Ce lecteur n'est plus du tout maintenu.
Je n'ai pas regardé les lecteurs qui se font de nos jours, mais ça serait étonnant qu'ils ne fassent pas ce que tu dis.
10. Le vendredi, avril 13 2012, 10:28 par leouf
merci encore!
Je vais me tourner vers flowplayer en jquery.