JW Player, Flash, Javascript, SWFObject – Utiliser le JW Player à l’aide de SWFObject

by Posted on



Le JW FLV Player de LongTail Video est un player extrêmement populaire car gratuit et très facile à mettre en place. Ce player existe en version gratuite déjà très aboutie. Cette version gratuite vous permettra notamment la diffusion de vidéos à différents formats (FLV, MP4 encodé avec le codec H.264), l’utilisation de “playlist” là aussi de formats différents (ASX, RSS… etc) et enfin sous différents protocoles (RMTP, HTTP…).

La baseline commrcial du JW FLV Player

The JW Player™ is the Internet’s most popular and flexible media player. It supports playback of any format the Adobe Flash Player can handle (FLV, H.264, MP4, MP3, AAC, JPG, PNG and GIF). It also supports various streaming and playlist formats (including RMTP, HTTP, live streaming and more), a wide range of flashvar settings and an extensive JavaScript API.

Il existe une version payante du JW FLV Player. L’achat de la licence permet en autre de faire disparaitre l’agençante incrustation du logo JW et son remplacement à la volée vos vidéos avec ce que l’on nomme un bug antenne, c’est à dire votre propre logo. L’achat de la licence offre la possibilité de changer la skin du player JW.

  • logo.file (undefined): location of an external jpg, png or gif image which replaces the watermark image (Licensed players only)
  • logo.link (undefined): link to direct to when the watermark image is clicked on (Licensed players only)
  • logo.hide (true): When set to true, the logo will auto-hide (Licensed players only)

La méthode SWFObject

swfobject est une méthode de chargement de contenu flash plutôt facile à mettre en place pour se faire il ne faut charger qu’un seul fichier.

swfobject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file

Source : http://code.google.com/p/swfobject/

Un exemple du SETUP WIZARD

Le chargement tout simple d’une vidéo direct dans le player à laide de SWFObject avec une légere personnalisation des couleurs.

 
<script type='text/javascript' src='swfobject.js'></script>
<div id='mediaspace'>C'est ici que s'insère le player</div>
<script type='text/javascript'>
  var so = new SWFObject('player.swf','mpl','470','320','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
	/* La vidéo par défaut proposé par le site de longtailvideo.com */
  so.addVariable('file','http://content.longtailvideo.com/videos/flvplayer.flv');
  so.addVariable('backcolor','666666');
  so.addVariable('frontcolor','000099');
  so.addVariable('lightcolor','000099');
  so.addVariable('screencolor','0000CC');
  so.addVariable('autostart','true');
  so.write('mediaspace');
</script>

Le rendu du code ci-dessus
JW Player, Flash, Javascript, SWFObject - Utiliser le JW Player à l'aide de SWFObject

Source : http://www.longtailvideo.com/support/jw-player-setup-wizard

Jouer une playlist au sein de JW player

JW player est en mesure de charger les principaux formats de playlist habituels sur le Web. Voici les principaux formats dont vous disposez qui sont tout à la base des dérives du XML avec chacune des nuances. Les fichiers de vos playlists aurront constamment comme extension .xml

  • Un flux ASX, c’est la playlist propre au Windows Media Player.
  • Un fil ATOM, bien connu des utilisateurs de WordPress
  • Un fil RSS de type iTunes et Media (irss et mrss)
  • Un fil SMIL, bien connu des utilisateurs de Quicktime
  • XSPF feeds : un format assez classique qui est utilisé par d’autre player gratuit notamment le player audio de mp3 XSPF Web Music Player fait en Flash (http://musicplayer.sourceforge.net/)
	<script type='text/javascript' src='swfobject.js'></script>
	<!-- Le js va écrire dans le div nommé mediaspace  -->
	<div id='mediaspace'>C'est ici que s'insère le player</div>
	<script type="text/javascript">
	 var flashvars = {};
	 flashvars.file = "my_playlist_2.xml";
	 flashvars.width = "300";
	 flashvars.height = "328";
	 flashvars.displayheight = "225";
	 flashvars.backcolor = "0x111111";
	 flashvars.frontcolor = "0xdddddd";
	 flashvars.lightcolor = "0x99cc00";
	 var params = {};
	 params.loop = "false";
	 params.quality = "best";
	 params.wmode = "transparent";
	 params.allowfullscreen = "true";
	 params.allowscriptaccess = "always";
	 var attributes = {};
	 attributes.id = "movieId";
	swfobject.embedSWF("mediaplayer.swf", "mediaspace", "300", "328", "9.0.124", "expressInstall.swf", flashvars, params, attributes);
	</script>

Les vidéos de la playlist type XSPF sont délivrés par un serveur en local accessible via http://127.0.0.1/97_JW_PLAYER/_m_2.flv en http streaming pour la vidéo _m_2.flv.

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
 <trackList>
   <track>
    <title>Titre Film 1</title>
     <creator>hecube.net</creator>
       <location>http://127.0.0.1/97_JW_PLAYER/_m_2.flv</location>
	 <info>http://www.hecube.net</info>
   </track>
   <track>
   <title>Titre Film 2</title>
     <creator>Hemedia.net</creator>
	<location>http://127.0.0.1/97_JW_PLAYER/_m_3.flv</location>
	  <info>http://social.hecube.net</info>
   </track>
 </trackList>
</playlist>

Source : http://www.longtailvideo.com/support/tutorials/Setting-Up-A-Playlist

Le rendu du code ci-dessus
JW Player, Flash, Javascript, SWFObject - Utiliser le JW Player à l'aide de SWFObject
En le chargeant directement depuis le serveur en local, on évite l’affichage de cette fenêtre système de mise ne garde. Toutefois si vous cliquez sur OK, vous aurez la possibilité de voir la playlist se lancer car vous autoriser une exception temporaire de sécurité.
JW Player, Flash, Javascript, SWFObject - Utiliser le JW Player à l'aide de SWFObject

En savoir plus

Published by Bruno Flaven

Bruno Flaven has been a Project Manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://fr.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He is currently P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts