JW Player, le lecteur flash de LongTail Video

le samedi 11 juin 2011 à 21:52:35 édité par Gensou Thomas

Qui ne connait pas le lecteur video flash JW Player, venant de LongTail Video?

JW Player est plus connu sous le nom de jeroen wijering, créateur de ce lecteur vidéo, il permet à de nombreux sites web, de lire des videos flash, mp4 ou flv etc... sous le codec H.264, simplement en y intégrant sur son serveur les fichiers requis à son intégration.

Très utile et en version gratuite, il est totalement paramétrable, de la taille de la vidéo, aux couleurs de fond du lecteur, la lecture auto, en fullscreen, même l'apparence peut-être changée ainsi que l'intégration d'une playlist.

Venons-en au fait, comment s'en servir ?

Commençons par télécharger la version classique 5.6 du lecteur JW Player

Une fois téléchargé, dé-zippez le, plusieurs fichiers sont importants pour que le lecteur s'affiche correctement sur une de vos pages web.

- jwplayer.js
- swfobject.js
- player.swf

Plusieurs façons également permettent l'affichage de ce lecteur flash.
JW Embedder :
Seul le fichier jwplayer.js est requis pour le bon fonctionnement du lecteur.
Appliquer ce code dans la page concernée par le lecteur entre les balises body :
<script type='text/javascript' src='/arborescence_du_fichier/jwplayer.js'></script>

<div id='mediaspace'>Si vous ne voyez pas le lecteur vidéo, veuillez télécharger la dernière version de <a href="http://get.adobe.com/fr/flashplayer/">Flash Player</a></div>

<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': '/arborescence_du_fichier/player.swf',
'file': '/arborescence_du_fichier/votre_video.flv',
'controlbar': 'bottom',
'width': '470',
'height': '320'
});
</script>

A vous de modifier le code en fonction de l'emplacement de vos fichiers.

l'autre méthode consiste à appeler le fichier swfobject.js (de préférence entre les balises head):
<script type='text/javascript' src='/arborescence_du_fichier/swfobject.js'></script>

<div id='mediaspace'>Si vous ne voyez pas le lecteur vidéo, veuillez télécharger la dernière version de <a href="http://get.adobe.com/fr/flashplayer/">Flash Player</a></div>

<script type='text/javascript'>
var so = new SWFObject('/arborescence_du_fichier/player.swf','ply','470','320','9','#000000');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');

so.addVariable('file','/arborescence_du_fichier/votre_video.flv');
so.write('mediaspace');
</script>

Et la dernière qui est la moins utilisée de toutes et la plus gourmande en ressources.
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='470' height='320' id='single1' name='single1'>
<param name='movie' value='/arborescence_du_fichier/player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='wmode' value='transparent'>
<param name='flashvars' value='file=/arborescence_du_fichier/votre_video.flv'>
<embed
id='single2'
name='single2'
src='/arborescence_du_fichier/player.swf'
width='470'
height='320'
bgcolor='#000000'
allowscriptaccess='always'
allowfullscreen='true'
flashvars='file=/arborescence_du_fichier/votre_video.flv'
/>
</object>

On aperçoit ici, le background modifiable selon le code couleur que vous désirez afficher. (bgcolor='#000000')

Je vous conseille une petite visite sur le site de LongTail Video, car de nombreux plugins sont à télécharger gratuitement.