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

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Erreur de chargement de flowplayer.controls.swf
Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Le texte de l’erreur 301
Flowplayer, vidéo, player - Utiliser  le player Flowplayer

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

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

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

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

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

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

Flowplayer, vidéo, player - Utiliser  le player Flowplayer

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
Flowplayer, vidéo, player - Utiliser  le player Flowplayer

TestEvent1 @ 4000
Flowplayer, vidéo, player - Utiliser  le player Flowplayer

TestEvent2 @ 7000
Flowplayer, vidéo, player - Utiliser  le player Flowplayer

TestEvent3 @ 10000
Flowplayer, vidéo, player - Utiliser  le player Flowplayer

TestEvent4 @ 13000
Flowplayer, vidéo, player - Utiliser  le player Flowplayer

TestEvent5 @ 18000
Flowplayer, vidéo, player - Utiliser  le player Flowplayer

TestEvent6 @ 26000
Flowplayer, vidéo, player - Utiliser  le player Flowplayer

TestEvent7 @ 28000
Flowplayer, vidéo, player - Utiliser  le player Flowplayer

TestEvent8 @ 35000
Flowplayer, vidéo, player - Utiliser  le player Flowplayer

TestEvent9 @ 40000
Flowplayer, vidéo, player - Utiliser  le player Flowplayer

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=&#x27;1.0&#x27; encoding=&#x27;UTF-8&#x27; ?>
 
	<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: &#x27;best_after_effects_movie_marcel_ziul_flash_tagged.flv&#x27;,
 
					// 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&#x27;espace  d&#x27;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