Ce guide est découpée en plusieurs parties, chacune présentant une fonctionnalité de notre futur service
- installer le serveur Web
- installer le module de streaming
- utiliser Flowplayer pour lire les vidéos
- sécuriser les urls
- gérer la bande passante
- suivre la santé de notre serveur
Troisième partie : utiliser Flowplayer pour lire les vidéos
N’en déplaise aux détracteurs de flash, Flowplayer est un lecteur vidéo intéressant à plus d’un titre.
Il est en effet:
- personnalisable par css
- manipulable par javascript
- extensible via les plugins disponibles sur cette page (http://flowplayer.org/plugins/index.html)
Parmi tous les plugins disponibles, celui dédié au pseudo streaming va nous intéresser tout particulièrement. Il est en effet adapté au module de pseudo streaming h264 développé par CodeShop que nous avons installé sur notre serveur au chapitre précédent.
Un second plugin nommé « Secure Streaming » nous permettra plus tard de sécuriser les url des vidéos, exactement comme ce qui est fait sur Nolife Online .
Je vous propose dans cet article de créer une page web qui nous permettra de vérifier que le lecteur fonctionne et que notre serveur de streaming est capable de servir le contenu vidéo. Nous placerons cette page sur un second serveur web, un hébergement mutualisé ou encore un hébergement gratuit de type free.fr (bref un endroit différent du serveur de streaming).
3.1 installer le lecteur
Avant toute chose, téléchargeons sur cette page la dernière version de flowplayer (à ce jour la 3.1.5) et sur cette page le module de pseudo streaming.
De l’archive flowplayer-3.1.5.zip nous récupérons les fichiers suivants :
- flowplayer-3.1.5.swf
- flowplayer-3.1.4.min.js
Je créé à la racine de mon futur site web un répertoire « static », destiné à recevoir toutes les données… statiques.
- Dans static/js je place flowplayer-3.1.4.min.js
- Dans static/swf je place les fichiers flowplayer-3.1.5.swf et flowplayer.pseudostreaming-3.1.3.swf
- Dans static/css je place une feuille de style basique « style.css » pour faire mes tests.
Nous créons à la racine un fichier nommé « index.html », dans lequel nous mettons le code suivant:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test pseudo streaming H.264</title>
<link href="/static/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/flowplayer-3.1.4.min.js"></script>
</head>
<body>
<div id="conteneur">
<h1>test pseudo streaming</h1>
<div id="front_player" class="video_container" style="display:block;width:640px;height:360px">
</div>
</div><!--fin conteneur-->
<script>
$(function() {
$f("front_player", "/static/swf/flowplayer-3.1.5.swf", {
clip: {
url: 'http://adresse_de_mon_serveur/videos/test.mp4',
provider: 'lighttpd',
autoPlay: true,
autoBuffering: true,
scaling: "fit"
},
plugins: {
lighttpd: {
url: '/static/swf/flowplayer.pseudostreaming-3.1.3.swf'
}
}
});
});
</script>
</body>
</html>
Analysons cette page:
Dans l’en-tête nous chargeons les librairies javascript jquery et flowplayer. Dans le corps de la page nous avons un calque nommé « front_player ».
Nous chargeons flowplayer dans ce calque puis nous lui disons d’aller lire une vidéo située à l’adresse « http://adresse_de_mon_serveur/videos/test.mp4″ (remplacer cette url par la votre).
Afin de bénéficier des bienfaits du pseudo streaming, nous indiquons à flowplayer que nous allons utiliser comme fournisseur de flux lighttpd (malgré le fait que l’on utilise apache).
Dans la partie plugins nous indiquons que le provider lighttpd utilisera le module de pseudo streaming (flowplayer.pseudostreaming-3.1.3.swf).
3.2 Tester l’ensemble de notre architecture
Récapitulons: nous avons d’un côté une serveur web qui héberge la page de test « index.html ». Cette page contient flowplayer qui va de son côté aller lire une vidéo située sur un deuxième serveur, notre serveur de streaming, que nous avons mis en place dans les articles précédents.
Pour tester votre architecture vous aurez besoin d’une video encodée en h.264. Vous pouvez la faire vous même avec un outil tel que MeGui ou bien en trouver sur le site d’apple qui propose un catalogue de vidéos HD gratuites encodées en H.264 http://www.apple.com/quicktime/guide/hd/
3.3 A propos des tests
Pour finir cet article, je tiens a préciser que cette partie est sans doute la plus délicate à tester : notre page de test est en effet le point de jonction de tous les composants de notre système.
Pour ma part, je ferais dans l’ordre:
- vérifier que la vidéo est bien lue en accédant directement à son url (http://adresse_de_mon_serveur/videos/test.mp4)
- vérifier avec firebug que les librairies javascript sont bien chargées
- vérifier que flowplayer lit bien les vidéos
