Lecteur Flash compatible avec l'API video de HTML 5

Pour reproduire l'API Javascript de l'élément video HTML 5, il faut 2 fichiers:

Le Flash a besoin de 2 paramètres en FlashVars :

Exemple

Il faut mettre le flash à l'intérieur de l'élément video comme ceci: 

<!DOCTYPE html>
<html>
<head>
    <title>Exemple</title>
    <script language="javascript" src="html5video_flash.js"></script>
</head>
<body>
    <video id="myVideo">
        <source src="fichier.ogg" type="video/ogg" codec="theora, vorbis"/>
        <object id="myVideoFlash" type="application/x-shockwave-flash" data="player_flv_html5.swf" width="320" height="240">
            <param name="movie" value="player_flv_html5.swf"/>
            <param name="AllowScriptAccess" value="always"/>
            <param name="FlashVars" value="listener=video&amp;src=fichier.flv"/>
            <p>Contenu alternatif.</p>
        </object>
    </video>
</body>
</html>

Voici un exemple plus complet : http://resources.neolao.com/download/flash/components/html5video/index.html

API

Pour accéder à l'API, il faut instancier un objet video comme ceci: 

var flash = document.getElementById("myVideoFlash");
var video = new FlashFLVPlayer(flash);

Dans les paramètres FlashVars, on doit indiquer cette variable video en listener.

Méthodes

Nom Description
play Lancer la lecture de la vidéo
pause Faire pause

Propriétés

Ces propriétés sont accessibles directement sur l'instance Javascript créée.

Nom Type Accès Description
currentTime Nombre Lecture/Ecriture Le temps écoulé de la vidéo, en seconde
duration Nombre Lecture seule La durée de la vidéo, en seconde
error Objet Lecture seule Lorsqu'une erreur survient, cette objet est rempli
networkState Nombre Lecture seule L'état de la connexion
paused Booléen Lecture seule Indique que la vidéo est en pause
readyState Nombre Lecture seule L'état de la disponibilité des données
seeking Booléen Lecture seule Indique qu'il y a un déplacement dans la vidéo
videoHeight Nombre Lecture seule La hauteur d'origine de la vidéo
videoWidth Nombre Lecture seule La largeur d'origine de la vidéo
volume Nombre Lecture/Ecriture Le volume compris entre 0 et 1

Evènements

On peut écouter n'importe quel évènement en faisant: 

var flash = document.getElementById("myVideoFlash");
var video = new FlashFLVPlayer(flash);
 
var playHandler = function(event)
{
    alert("Début de la lecture");
};
video.addEventListener("play", playHandler);

Nom Description
durationchange La durée de la vidéo a changé
ended La vidéo est terminée
error Une erreur est survenue
load Le chargement de la vidéo est terminée
loadedmetadata Les informations sont chargées
loadstart Le début du chargement
play Lancement de la lecture
playing La lecture a commencé
pause La vidéo est en pause
seeked La vidéo a fini son déplacement
timeupdate Le temps écoulé est mis à jour
volumechange Le volume est mis à jour

L'évènement timeupdate n'est pas exécuté en continu. Je me suis calqué sur le comportement de Safari pour lancer cet évènement. Cependant, la propriété currentTime est mis à jour plus rapidement.

Changelog

La version actuelle est 0.1.0

http://code.google.com/p/flvplayer/wiki/Html5Changelog

Sources

Les sources Flash sont sur google code.