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

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.

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.

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.