Erreur de chargement de flowplayer.controls.swf
Le texte de l’erreur 301
Le texte de l’erreur 301
Comme souvent à la mise en place du player, on rencontre quelques erreurs… Rien de grave, juste le nom d’un fichier .swf
qui
No Controlers - 301:Unable to load plugin: unable to load plugin 'controls', url: 'flowplayer.controls.swf'
La solution à l’installation pour faire tourner le player en local.
Il vous suffit de renommer flowplayer.controls-3.2.0.swf
en flowplayer.controls.swf
For those of you that are having this same problem – I found the answer. The control file that comes with the download is flowplayer.controls-3.2.0.swf however the flowplayer-3.2.0.swf file is actully trying to load a file called flowplayer.controls.swf.
Source: http://flowplayer.org/forum/5/40605
Adobe Media Encoder CS4
dans une vidéo .flv
Adobe Media Encoder CS4
avec le xml
de “cuepoints”Une fois la liste de “cuepoints” définie, il ne reste qu’à les intégrer au sein de l’encodage de la vidéo au format .flv
flvtool2
Pour cela on va se servir d’un outil nommé FLVTool2
. Cet outil existe sur Mac et PC, il est même distribué dans le “couteau suisse” de FLVKnife
Afin de déterminer si les “cuepoints” sont bien dans la vidéo… étant donné qu’ils sont en “embedded” comme des journalistes qui accompagnent des militaires !
Faire sortir les metadatas de la vidéo au format .txt
flvtool2 -P /Applications/MAMP/htdocs/flowplayer/example/best_after_effects_movie_1.flv |
Faire sortir les metadatas de la vidéo au format .xml
flvtool2 -Px /Applications/MAMP/htdocs/flowplayer/example/best_after_effects_movie_1.flv |
Faire sortir les metadatas de la vidéo au format .xml
et les insrérer dans un fichier best_after_effects_movie_1_flv.xml
flvtool2 -Px /Applications/MAMP/htdocs/flowplayer/example/best_after_effects_movie_1.flv > /Applications/MAMP/htdocs/flowplayer/example/best_after_effects_movie_1_flv.xml |
flowplayer
Voici une capture des différents “cuepoints” insérées au sein de la vidéo .flv
. Chaque “cuepoint” permet l’affichage d’une légende (caption) attaché à un instant donné de la vidéo (timecode). Les temps sont donnés en millisecondes.
Le début de la vidéo
TestEvent1 @ 4000
TestEvent2 @ 7000
TestEvent3 @ 10000
TestEvent4 @ 13000
TestEvent5 @ 18000
TestEvent6 @ 26000
TestEvent7 @ 28000
TestEvent8 @ 35000
TestEvent9 @ 40000
.xml
Le fichier xml tags_flash.xml
qui insère les cuepoints dans la vidéo best_after_effects_movie_marcel_ziul.flv
.
<?xml version='1.0' encoding='UTF-8' ?> <FLVCoreCuePoints> <!-- begin list --> <!-- cuepoint 1 --> <CuePoint> <Time>4000</Time> <Type>navigation</Type> <Name>TestEvent1</Name> <Parameters> <Parameter> <Name>Caption</Name> <Value>Des légendes en Français, en Portugais et en Allemand avec les cuepoints sur une vidéo.</Value> </Parameter> </Parameters> </CuePoint> <!-- cuepoint 2 --> <CuePoint> <Time>7000</Time> <Type>navigation</Type> <Name>TestEvent2</Name> <Parameters> <Parameter> <Name>Caption</Name> <Value>Une modernité enfin explorée</Value> </Parameter> </Parameters> </CuePoint> <!-- cuepoint 3 --> <CuePoint> <Time>10410</Time> <Type>navigation</Type> <Name>TestEvent3</Name> <Parameters> <Parameter> <Name>Caption</Name> <Value>Rio Janeiro, Brésil</Value> </Parameter> </Parameters> </CuePoint> <!-- cuepoint 4 --> <CuePoint> <Time>13346</Time> <Type>navigation</Type> <Name>TestEvent4</Name> <Parameters> <Parameter> <Name>Caption</Name> <Value>Marcel Ziul V10. Le slogan de TV Globo : Rede Globo > A gente se vê por aqui</Value> </Parameter> </Parameters> </CuePoint> <!-- cuepoint 5 --> <CuePoint> <Time>18618</Time> <Type>navigation</Type> <Name>TestEvent5</Name> <Parameters> <Parameter> <Name>Caption</Name> <Value>Good After Effects Video. Des effets sur la vidéo comme si il en pleuvait...</Value> </Parameter> </Parameters> </CuePoint> <!-- cuepoint 6 --> <CuePoint> <Time>26526</Time> <Type>event</Type> <Name>TestEvent6</Name> <Parameters> <Parameter> <Name>Caption</Name> <Value>Skull, Crâne, une tête de mort ?? Nous ne sommes pas loin du Père Lachaise à Paris</Value> </Parameter> </Parameters> </CuePoint> <CuePoint> <Time>28895</Time> <Type>event</Type> <Name>TestEvent7</Name> <Parameters> <Parameter> <Name>Caption</Name> <Value>Food, La nourriture ! Portal gastronómico Lo Mejor de la Gastronomía. Guía y ranking de restaurantes, grandes platos, productos gastronómicos y vinos.</Value> </Parameter> </Parameters> </CuePoint> <!-- cuepoint 7 --> <CuePoint> <Time>35268</Time> <Type>event</Type> <Name>TestEvent7</Name> <Parameters> <Parameter> <Name>Caption</Name> <Value>MTV, une chaîne musicale à la télévision ! Seht die weißen Streifen auf der Bühne. Checkt die Clips!</Value> </Parameter> </Parameters> </CuePoint> <!-- end list --> </FLVCoreCuePoints> |
Le même fichier généré tags_flash_flvtool2.xml
depuis la vidéo best_after_effects_movie_marcel_ziul_flash_tagged.flv
à l’aide Flvtool2
flvtool2 -Px /chemin/vers/le/fichier/best_after_effects_movie_marcel_ziul_flash_tagged.flv > /chemin/vers/le/fichier/best_after_effects_movie_marcel_ziul_flash_tagged.xml
<?xml version="1.0"?> <fileset> <flv name="/Applications/MAMP/htdocs/flowplayer/example/OK_best_after_effects_movie_4_meta.flv"> <duration>111.833</duration> <cuePoints> <6> <name>TestEvent7</name> <parameters> <Caption>Food, La nourriture ! Portal gastronómico Lo Mejor de la Gastronomía. Guía y ranking de restaurantes, grandes platos, productos gastronómicos y vinos.</Caption> </parameters> <time>28.895</time> <type>event</type> </6> <7> <name>TestEvent8</name> <parameters> <Caption>MTV, une chaîne musicale à la télévision ! Seht die weißen Streifen auf der Bühne. Checkt die Clips!</Caption> </parameters> <time>35.268</time> <type>event</type> </7> <8> <name>TestEvent9</name> <parameters> <Caption>An it goes and on and on....</Caption> </parameters> <time>40</time> <type>event</type> </8> <0> <name>TestEvent1</name> <parameters> <Caption>Des légendes en Français, en Portugais et en Allemand avec les cuepoints sur une vidéo.</Caption> </parameters> <time>4</time> <type>navigation</type> </0> <1> <name>TestEvent2</name> <parameters> <Caption>Une modernité enfin explorée</Caption> </parameters> <time>7</time> <type>navigation</type> </1> <2> <name>TestEvent3</name> <parameters> <Caption>Rio Janeiro, Brésil</Caption> </parameters> <time>10.41</time> <type>navigation</type> </2> <3> <name>TestEvent4</name> <parameters> <Caption>Marcel Ziul V10. Le slogan de TV Globo : Rede Globo > A gente se vê por aqui</Caption> </parameters> <time>13.346</time> <type>navigation</type> </3> <4> <name>TestEvent5</name> <parameters> <Caption>Good After Effects Video. Des effets sur la vidéo comme si il en pleuvait...</Caption> </parameters> <time>18.618</time> <type>navigation</type> </4> <5> <name>TestEvent6</name> <parameters> <Caption>Skull, Crâne, une tête de mort ?? Nous ne sommes pas loin du Père Lachaise à Paris</Caption> </parameters> <time>26.526</time> <type>event</type> </5> </cuePoints> <audiodatarate>256</audiodatarate> <framerate>30</framerate> <canSeekToEnd>true</canSeekToEnd> <videocodecid>4</videocodecid> <audiodelay>0.027</audiodelay> <height>480</height> <audiocodecid>2</audiocodecid> <videodatarate>1600</videodatarate> <width>720</width> </flv> </fileset> |
Le fichier flowplayer_metadata_video.html
qui charge le player et permet l’affichage des cuepoints notamment du paramètre spécifique p.parameters.Caption
.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>flowplayer - cuepoints embedded</title> <meta name="author" content="hecube.net"> <script type="text/javascript" src="flowplayer-3.2.0.min.js"></script> <style> /* container has a background image */ a.player { display:block; width:500px; height:340px; text-align:center; color:#fff; text-decoration:none; cursor:pointer; -moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5); } a.player:hover { background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.898), rgba(6, 6, 6, 0.898)); } /* splash image */ a.player img { margin-top:125px; border:0; } #info { width:410px; padding:8px; border:1px solid #ccc; background-color:#efefef; font:16px "bitstream vera sans", "verdana"; margin-left:125px; } .player { width:410px; padding:8px; border:1px solid #ccc; background-color:#efefef; font:16px "bitstream vera sans", "verdana"; margin-left:125px; } </style> </head> <body> <div class="player"> <a style="display:block;width:720px;height:480px" id="player"> </a> </div> <script> /* */ flowplayer("player", "../flowplayer-3.2.0.swf", { clip: { url: 'best_after_effects_movie_marcel_ziul_flash_tagged.flv', // you can do different things on each cuepoint by checking the time onCuepoint: function(clip, p) { document.getElementById("info").innerHTML = "time : " +p.time+ ", name: " + p.name+", type: " + p.type+", parameter : " +p.parameters.Caption+ " "; } } }); </script> <div id="info" class="box info"> L'espace d'affichage des cuepoints est ici </div> </body> </html> |
Il est plus astucieux de lire un xml avec des “cuepoints” via de l’actionscript que de les intégrer c’est à dire les “embedded”. Ainsi, vous pourrez lire des fichiers au format MP4
(H.264) ou FLV
selon le protocole qui vous convient, sans faire subir aucune “altération”, c’est à dire l’injection de metadatas, à vos fichiers vidéos. Ainsi, la conclusion est-elle d’éviter les cuepoints en embedded !!! D’un point de vue purement pratique, il existe une réelle difficulté à faire fonctionner flvtool2
. Par ailleurs, le programme Adobe Media Encoder CS4
fonctionne mais produit des fichiers différents de flvtool2
.
.flv
(PC uniquement)