Flowplayer, vidéo, player – Utiliser le player Flowplayer
La vidéo sur Internet est depuis longtemps “the big thing”. A ce jour et en attendant l’HTML5, pour jouer de la vidéo, vous êtes obligé(e) d’avoir un player vidéo fait en Flash ou Flex. Si on a ni le temps, ni les moyens de faire développer un player sur mesure, il faut donc se résoudre à faire appel à un produit déjà développé. Au vu du grand nombre de players disponibles, cela tourne vite au casse-tête de faire un choix. Par ailleurs tous ces players sont loin de posséder les mêmes capacités. On avait déjà écrit un article sur un des players les plus performants et les plus populaires : The JW Player™. On va parler dans cette article d’un de ces excellents concurrents : Flowplayer. C’est tout bonnement à notre avis le player flash du moment, le plus complet, le mieux documenté, le plus performant… Bref on en vient à manquer de superlatifs !
Les qualités du flowplayer
Tout d’abord la démonstration du player flowplayer et de sa capacité à lire les “cuepoints” http://social.hecube.net/flowplayer/
Les qualités du flowplayer sont nombreuses. Il offre plein de possibilité outre la lecture d’un fichier MP4 (codec H.264) ou d’un fichier FLV (codec On2PV6) notamment la fonctionnalité de FLV fallback en attendant l’HTML5 bien sûr !
Au cas où la lecture de vidéo MP4 n’est pas supporté pas l’utilisateurs, le flowplayer est capable de faire appel si besoin à des fichiers .flv (FLV fallback).
The trick here was to use flashembed’s isSupported method. All of flashembed’s static methods are available because this tool is included in the Flowplayer script.
M4V encoding is used on the video which provides the best video quality you can have on the web today together with a relatively small file size. Typical video formats such as MPG or MOV does not work with Flash and they must first be converted to MP4, M4V or FLV. Take a look at this forum post about MP4 (or H.264) video conversion.
FLV fallback is used to provide a regular FLV video for those Flash clients that do not support support MP4. MP4 support was added to Flash in version 9.115 and lower versions can only play FLV files. You should note that the FLV format is not a bad format. It provides a small file size with relatively good quality. the FLV format can be optimized with a technology called “ON2” and you can find more information about it here.
Il existe aussi de nombreuse possibilités de gestion de la barre de contrôle
JavaScript plugin: Controlbar
Source : http://flowplayer.org/demos/plugins/javascript/
Installer le flowplayer
On va installer le flowplayer en local, sur un serveur qui tourne sur MAMP afin d’effecteur quelques tests sur les capacités dudit player notamment un test sur sa capacité à gérer les “cuepoints”.
Il est nécessaire d’autoriser votre plugin flash à charger des .swf
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
L’insertion des “cuepoints” à l’aide de Adobe Media Encoder CS4 dans une vidéo .flv
L’encodage à l’aide de 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
Tester l’insertion des “cuepoints embedded” à l’aide de 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 |
Tester la lecture des “cuepoints embedded” à l’aide de 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
Les sources des fichiers .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> |
Conclusion
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.
En savoir plus
- Le site officiel – Flowplayer – Flash Video Player for the Web
http://flowplayer.org/ - Le site officiel – FLVTool2 – Flash video and meta data manipulation
http://www.inlet-media.de/flvtool2/ - Le site officiel – FLVKnife – un véritable couteau suisse pour les
.flv(PC uniquement)
http://soenkerohde.com/software/flv-knife/ - Jouer avec des cuepoints embedded dans une vidéo lue par le flowplayer
http://flowplayer.org/demos/events/embedded-cuepoints.html - Un article sur “How to create and use Flash video metadata to add cue-points with flvtool2”
http://www.ioncannon.net/web-design/109/metadata-cuepoint-flash-video-flvtool/ - Un article sur “Flvtool2 – Flash Video (flv) Metadata / Cue Point Injector and Cutting Tool | Brooks Andrus”
http://www.brooksandrus.com/blog/2007/03/18/flvtool2-flash-video-flv-metadata-cue-point-injector-and-cutting-tool/ - Un article sur “FLVTool2 Usage Examples Open Source Flash”
http://osflash.org./flvtool2-usageexamples - Un article sur “flvtool2 + flv knife « Interactive Section”
http://interactivesection.wordpress.com/2007/10/30/flvtool2/ - Un article sur “Web video template: Showcase website for personal video”
http://www.adobe.com/devnet/flash/articles/vidtemplate_vidshowcase_05.html
