Intégrer le lecteur de vidéos FlowPlayer

FlowPlayer est un lecteur Flash gratuit de fichiers vidéos (flv, mp4 et mv4), audio (mp3) et d’images. Il est entièrement configurable, extensible par des plugins et propose de nombreuses fonctionnalités comme les playlists ou les callbacks javascript. Nous proposons au lecteur un Helper permettant d’insérer facilement une instance de ce lecteur dans une Vue.

1. Installation

Commençons par télécharger l’archive du lecteur en licence Open Source. Nous extrayons le contenu de l’archive dans un nouveau répertoire : {app}/webroot/js/flowplayer. Nous déplaçons le fichier javascript flowplayer-3.0.5.min.js depuis le répertoire {app}/webroot/js/flowplayer/example vers le répertoire parent, {app}/webroot/js/flowplayer.

2. Le Helper FlowPlayer

Nous devons maintenant copier le code du Helper dans un nouveau fichier : {app}/views/helpers/flowplayer.php.

<?php
// {app}/views/helpers/flowplayer.php
class FlowplayerHelper extends AppHelper
{
	var $helpers = array('Javascript');
 
	/**
	 * Inclusion de la librairie FlowPlayer entre <head>...</head>
	 */
	function beforeRender()
	{ 
		$this->Javascript->link('flowplayer/flowplayer-3.0.5.min.js', false);
	}
 
	/**
	 * Crée une instance de FlowPlayer
	 *
	 * @param string $container_id Id ou classe d'un élément du DOM que le FlowPlayer va remplacer
	 * @param mixed $player Chemin d'accès au player Flash, ou tableau de config (url, width, height, wmode)
	 * @param array $options Options, voir la doc de FlowPlayer
	 * @return string Code javascript
	 */
	function embed($container_id = null, $player = null, $options = null)
	{
		$script = "flowplayer('{$container_id}', {$this->Javascript->object($player)}";
 
		if(!empty($options))
		{
			$script .= ", {$this->Javascript->object($options)}";
		}
 
		$script .= ');';
 
		return $this->Javascript->codeBlock($script);
	}
 
	/**
	 * Retourne le code d'une instance de FlowPlayer
	 *
	 * @param string $container_id Element du DOM qui va afficher le code
	 * @param array $options Options (width, height, url, index)
	 * @param boolean $htmlentities Encode ou non les entités HTML (< devient &lt; etc.) 
	 * @return string Code javascript
	 */
	function embed_code($container_id, $options = null, $htmlentities = false)
	{
		$this->Javascript->link('flowplayer/flowplayer.embed-3.0.2.min.js', false);
 
		$script = "flowplayer().embed(";
 
		if(!empty($options))
		{
			$script .= $this->Javascript->object($options);
		}
 
		$script .= ");\n";
 
		$encode = !$htmlentities;
 
		$script .= "var embedCode = flowplayer().getEmbedCode({$encode});\n";
 
		$script .= "document.getElementById('{$container_id}').value = embedCode;";
 
		return $this->Javascript->codeBlock($script);
	}
}
?>

Notre Helper contient trois méthodes :

  1. beforeRender : appelée avant le rendu de la vue, cette méthode ne fait qu’inclure la librairie javascript du lecteur dans notre layout, dont l’entête doit ressembler à ceci :

    // {app}/views/layouts/default.ctp
<head>
	<?php echo $scripts_for_layout; ?> 
</head>

  2. embed : prend en paramètre un élément du DOM (le plus souvent un id, mais cela peut-être une classe dans le cas de plusieurs lecteurs sur la même page) et va le remplacer par le lecteur Flash. Typiquement il s’agit d’un simple lien vers le fichier vidéo auquel on assigne un identifiant. La méthode prend deux autres paramètres, l’un pour les options de configuration du lecteur, et l’autre pour les options de lecture du fichier. Ces deux paramètres peuvent être soit une chaine de caractères, soit un tableau de plusieurs niveaux, et seront transformés en notation JSON par la méthode JavascriptHelper::object() avant d’être transmis au lecteur.
  3. embed_code : cette méthode permet d’afficher le code nécessaire à l’insertion du lecteur, pour offrir la possibilité au visiteur de copier ce code et de le coller sur son blog ou sur un forum pour diffuser la vidéo. La méthode prend 3 paramètres : un élément du DOM, le plus souvent un champ input de type text ou un textarera ; un tableau d’options pour configurer le lecteur, et un booléen pour encoder ou non les entités HTML. Attention, l’utilisation de cette méthode requiert l’installation d’un plugin de FlowPlayer, embed, à copier dans le répertoire {app}/webroot/js/flowplayer.

3. Utilisation

Avant de pouvoir utiliser le Helper, nous devons l’appeler dans le Contrôleur concerné :

class VideosController extends AppController
{
	var $helpers = array('Flowplayer');
 
	function view($id = null)
	{
		if($id)
		{
			$this->Video->id = $id;
			$this->set('data', $this->Video->read());
		}
	}
}

3.1 Lire un fichier vidéo au format flv

L’insertion du lecteur dans la Vue se fait en deux temps : nous commençons par créer un simple lien vers le fichier flv, et nous donnons un identifiant à ce lien :

// {app}/views/videos/view.ctp
<a id="video-player" href="/files/videos/<?php echo $data['Video']['fichier']; ?>"></a>

Il n’est cependant pas obligatoire de créer un lien, il est tout à fait possible de créer un simple div, mais dans ce cas il faudra transmettre le nom du fichier flv dans le tableau d’options (3ème paramètre de la méthode embed), alors qu’ici Flowplayer récupère lui-même le nom du fichier vidéo dans l’attribut href du lien. Dans un second temps, nous appelons la méthode embed du Helper Flowplayer avec ses paramètres, dont l’identifiant du lien ci-dessus :

<?php echo $flowplayer->embed(
	'video-player',
	array(
		'src'    => '/js/flowplayer/flowplayer-3.0.5.swf',
		'width'  => $data['Video']['largeur'],
		'height' => $data['Video']['hauteur']
	),
	array(
		'clip' => array(
			'autoPlay'      => false,
			'autoBuffering' => true
		)
	)
); ?>

Le deuxième paramètre est un tableau d’options pour le lecteur : le chemin d’accès au lecteur Flash, la largeur et la hauteur de la vidéo. Le troisième paramètre contient des options sur la lecture du clip flv : la lecture de doit pas démarrer automatiquement, et la vidéo doit commencer à se charger dès que possible sans attendre que le visiteur demande la lecture. Nous renvoyons le lecteur à la documentation officielle de Flowplayer pour prendre connaissance de la myriade d’options disponibles. Et voilà, le lecteur FlowPlayer apparait, il ne reste qu’à le personnaliser, et c’est bien là l’atout majeur de cet outil.

3.2 Afficher le code du lecteur

Nous souhaitons aller plus loin et proposer au visiteur de partager la vidéo qu’il est en train de regarder. Nous devons pour cela afficher le code HTML du lecteur afin que le visiteur puisse le copier et le coller ailleurs sur le web. Nous allons donc ajouter un champ input de type text sous notre vidéo avec un peu de javascript pour que le contenu de ce champ soit aussitôt sélectionné en entier quand le visiteur clique dedans. Il ne lui restera plus qu’à copier ce code pour le coller où bon lui semble.

<form action="" name="embedForm" id="embedForm">
	<label for="embed_code">Partager cette vidéo :</label> 
	<input id="embed_code" type="text" onClick="javascript:document.embedForm.embed_code.focus();document.embedForm.embed_code.select();" readonly />
</form>

Le champ reste vide, nous allons utiliser la méthode embed_code de notre Helper pour afficher le code HTML du lecteur dans ce champ :

<?php echo $flowplayer->embed_code('embed_code', array(
	'width'  => $data['Video']['largeur'],
	'height' => $data['Video']['hauteur']
), false); ?>

Nous passons en paramètre l’id du champ input, un tableau avec les dimensions de la vidéo, et le booléen false pour ne pas encoder les entités HTML. Nous rechargeons la page et voyons apparaître le code du lecteur, facilement accessible pour une diffusion planétaire !

3.3 Plusieurs lecteurs sur une page

Terminons par un cas où plusieurs instances du lecteur doivent se trouver sur la même page : intuitivement, nous ferions exactement la même chose que plus haut mais dans une boucle foreach(). Il est possible de faire plus simple en donnant comme premier paramètre de la méthode embed non pas un identifiant mais une classe du DOM :

<?php foreach($data as $row): ?>
	<a class="video" href="/files/videos/<?php echo $row['Video']['fichier']; ?>"></a>
<?php endforeach; ?>
 
<?php echo $flowplayer->embed(
	'a.video',
	array(
		'src'    => '/js/flowplayer/flowplayer-3.0.5.swf',
		'width'  => $row['Video']['largeur'],
		'height' => $row['Video']['hauteur'],
	),
	array(
		'clip' => array(
			'autoPlay'      => false,
			'autoBuffering' => true
		)
	)
); ?>

Un seul appel à la méthode embed suffit pour remplacer tous les liens de classe ‘video‘ par une instance du lecteur FlowPlayer.

Pierre-Emmanuel Fringant

Articles connexes

Commentaires

cakeTrainer
17 mars 2009 à 22:49

Bonjour,

est ce qu’il serait possible de mettre à chaque fois le nom des pages en commentaire quand vous mettez du code pour que cela soit plus lisible et plus compréhensible ??? parce que là je suis un peu perdu !!!! :x

Merci

CDT !

Pierre-Emmanuel Fringant
18 mars 2009 à 0:24

Je pense pourtant les mettre chaque fois que c’est nécessaire, au début de chaque bloc de code… Où éprouves-tu une difficulté à t’y retrouver ?

cakeTrainer
18 mars 2009 à 20:58

Merci de ta réponse tout d’abord après le controller je me suis perdu donc à ce moment précis :

embed( ‘video-player’, array( ‘src’ => ‘/js/flowplayer/flowplayer-3.0.5.swf’, ‘width’ => $data['Video']['largeur'], ‘height’ => $data['Video']['hauteur'] ), array( ‘clip’ => array( ‘autoPlay’ => false, ‘autoBuffering’ => true ) ) ); ?>

Ensuite j’arrive plus très bien à suivre où implémenté le code désolé mais je début :D soyez indulgent envers mes incompétences :D

Merci ;) d’avance

cakeTrainer
20 mars 2009 à 17:27

bon jai réglé tous les problèmes en cherchant ailleurs mais le lecteur ne s’affiche pas !

rc117
23 avril 2009 à 15:34

ajoute ce qui suit dans le head de ton layout. ça affiche le player, mais je n’arrive pas encore à visionner une video avec

echo $javascript->link('flowplayer-3.0.5.min.js');
Cyril
19 août 2009 à 15:53

Salut Pierre-Emmanuel,

Merci pour ta doc, encore une fois fort utile! TU fais vraiment un super boulot qui m’est d’une très grande utilité.

J’ai bien suivi ta doc cependant j’ai un petit écran noir sur ma page à la place du player et rien ne se passe. As-tu une idée d’ou ca pourrait venir!? Faut-il paramétrer cake d’une certaine facon pour le flash !?? Merci d’avance.

Cyril

Aaron
28 septembre 2010 à 9:04

Bonjour,

je viens de tester votre tutoriel, mais il semble que cakePHP ne reconnait pas la variable $data. Savez vous d’où cela peut venir?

Aaron
29 septembre 2010 à 5:37

L’erreur était la mienne, je n’avais pas fais gaffe au fait que ce tutoriel était écrit pour cakePHP 1.2.x. Je suis en train de le modifier pour le faire fonctionner sur 1.3.x, quelqu’un d’autre a-t-il déjà fait ceci?

Merci pour votre aide.

Nounours
14 décembre 2010 à 12:01

Bonjour,

merci pour ce tuto cela marche très bien sur le 1.3.x.

Dommage que le player contient de la pub (ce qui est normal malgré tout).

Gladiateur
21 avril 2011 à 16:06

bonjours à toutes et à tous et merci pour ce très bon tutorial. ma question est ce qu’il y a une propriété dans ce plugin(FlowPlayer) d’ajouter une publicité video(de quelques secondes) lors du chargement du video, avec une option qui permet aux navigateurs de passé cette publicté vers la video directement?? merci pour votre attention et votre reponse d’avance

Cordialement

Participez

Pour insérer une portion de code, utilisez <pre lang="php">...</pre>