Dernièrement, dans le cadre d’un projet client, j’ai eu besoin de mettre en place un lecteur vidéo flash dans une fenêtre modale. Après quelques recherches, j’ai décidé de «fabriquer» le mien à l’aide de Bootstrap et du lecteur flash FLV Player.

Voici ce qu’on obtiendra à la fin de cet article :

JQuery et Bootstrap

Téléchargement

La première étape consiste à télécharger JQuery sur cette page.

Rendez-vous maintenant sur le site de Bootstrap afin d’y télécharger les différents composants du framework (CSS et JS).

Mise en place dans le projet

Maintenant que tout est téléchargé, nous allons déployer les différents fichiers téléchargés dans notre projet.

Nous allons tout d’abord importer les fichiers Javascript.

<!-- JS -->
<script src="/js/jquery-1.9.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

Puis le fichier CSS :

<!-- CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css"  media="screen" />

FLV Player

Le lecteur flash FLV Player est quant à lui disponible ici. Plusieurs versions du lecteur sont disponibles. Dans notre cas, j’ai choisi d’utiliser le player Maxi qui permet via du javascript d’être facilement actualisé.

La pop-up

La pop-up dont j’ai fait la capture d’écran plus haut est en réalité tout simplement une div HTML avec un identifiant qui permet à Bootstrap de l’afficher uniquement quand nécessaire.

Vous pouvez insérer ce morceau de code n’importe entre les balises body de votre page HTML.

<div class="modal hide fade" id="playerModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Lecture de la vidéo</h3>
    </div>
    <div class="modal-body">
        <p>
	    <object type="application/x-shockwave-flash" data="/flash/player_flv_maxi.swf" width="530" height="300" id="flashplayer">
	        <param name="movie" value="/flash/player_flv_maxi.swf" />
		      <param name="flashvars" value="flv=null.flv&showstop=1&showvolume=1&showtime=2" id="flashvars" />
	    </object>
	</p>
    </div>
</div>

Comme vous pouvez le constater, le lecteur est volontairement initialisé avec une vidéo qui n’existe pas à savoir le fichier null.flv et dont l’identifiant est flashvars.

La page HTML

Notre page HTML va contenir un tableau regroupant les différentes vidéos.

<table>	
    <tr>
      <td><a class="overlayplayer" href="01.flv"><img class="crop" src="/images/icons/player.png" /></a></td>			
	    <td><a class="overlayplayer" href="02.flv"><img class="crop" src="/images/icons/player.png" /></a></td>			
    	<td><a class="overlayplayer" href="03.flv"><img class="crop" src="/images/icons/player.png" /></a></td>			
    	<td><a class="overlayplayer" href="04.flv"><img class="crop" src="/images/icons/player.png" /></a></td>			
    	<td><a class="overlayplayer" href="05.flv"><img class="crop" src="/images/icons/player.png" /></a></td>			
    	<td><a class="overlayplayer" href="06.flv"><img class="crop" src="/images/icons/player.png" /></a></td>			
    </tr>	
</table>

Comme vous pouvez le voir, j’ai spécifié une classe à mon lien. Cette classe, va nous servir au travers de JQuery à détecter un click.

Le Javascript

Le principe

Le principe de fonctionnement est ici très basique.

L’objectif est ici de détecter lorsqu’il y a un click sur notre lien. Cela signifie que l’utilisateur souhaite afficher le lecteur. A ce click, nous allons afficher la fenêtre modale Bootstrap.

Mise en pratique

La première chose à faire est de créer le corps de notre fonction Jquery :

$(document).ready(function() {

});

Nous allons immédiatement déclarer une variable qui aura pour objectif de stocker le lien de la vidéo que l’on souhaite lire dans notre lecteur :

$(document).ready(function() {
    var theHREF;
});

Nous allons maintenant mettre en place l’affichage du lecteur et le chargement de la vidéo dans ce dernier lors de la détection du click :

$(document).ready(function () {
    var theHREF;

    $(".overlayplayer").click(function(e) {
        e.preventDefault();
	      theHREF = $(this).attr("href");
	      $("#playerModal").modal("show");
	      document.getElementById("flashplayer").SetVariable("player:jsUrl", theHREF);
    });
});

La ligne e.preventDefault(); permet d’annuler le comportement par défaut du lien. Les deux lignes suivantes permettent respectivement  de récupérer la cible du lien puis d’afficher la fenêtre modale. Finalement, la dernière ligne nous permet de charger la bonne vidéo dans le lecteur FLV Player.

Dans l’état actuel des choses, lorsque l’on ferme la fenêtre modale, le lecteur continue de tourner et donc la vidéo de se jouer. Ce que nous aimerions, c’est que lorsque l’utilisateur décide de fermer la fenêtre contenant le lecteur,  celui-ci arrête de jouer la vidéo, c’est ce que nous allons faire tout de suite :

$(document).ready(function () {
    var theHREF;

    $(".overlayplayer").click(function(e) {
        e.preventDefault();
	      theHREF = $(this).attr("href");
	      $("#playerModal").modal("show");
	      document.getElementById("flashplayer").SetVariable("player:jsUrl", theHREF);
    });

    $("#playerModal").on('hidden', function () {
        document.getElementById("flashplayer").SetVariable("player:jsStop", "");
    });
});