Comment créer un écouteur d’évènements pour JW Player

Ajouter un eventListener sur le lecteur JW Player permet de récupérer un tas d’infos sur le lecteur.
Par exemple il est possible d’ajouter un écouteur pour récupérer l’état de la vidéo (lecture, en pause, etc), la position de lecture, les changements de volume …

Voici comment déclarer un listener:

//pour ajouter un écouteur sur le temps et l'état de la vidéo
player.addModelListener("TIME", "timeListener");
player.addModelListener("STATE","stateListener");
//pour ajouter un écouteur sur les changements de volume on utilise une méthode différente
player.addControllerListener("VOLUME", "volumeListener");

Il reste maintenant à traiter ces informations, exemple avec le stateListener:

function stateListener(obj) {
  //affiche une alerte lorsque l'état de la vidéo est "COMPLETED"
  if(obj.newstate == "COMPLETED")
  {
    alert('COMPLETED');
  }
}

Pour info, les autres états sont: BUFFERING PLAYING PAUSED IDLE et vous pouvez aussi récupérer l’ancien état en affichant obj.oldstate .

Pour le listener « timeListener » utilisez obj.position pour récupérer la position. Exemple:

function timeListener(obj) {
  alert(obj.position);
}

Enfin pour récupérer le volume:

function volumeListener(obj)
{
  alert(obj.percentage);
}

Bon courage et à bientôt!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Comment lire une vidéo depuis l’api de Subsonic

Petit rappel pour ceux qui ne connaissent pas, Subsonic est un clone de Deezer qui permet, une fois installé sur votre serveur, de lire des musiques et aussi des vidéos depuis une interface web.

Pour moi, utiliser l’api de Subsonic pour lire des vidéos en Streaming a été un peu compliqué. Je voulais simplement lire le flux renvoyé par Subsonic quand on appel la méthode http://your-server/rest/stream.view mais la documentation à ce sujet est quasi inexistante…

Voici donc une petite démo pour parvenir à lire ce flux.

Fichier HTML ou va être placé le lecteur. N’oubliez pas de changer la valeur des variables par les vôtres!

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="/subsonic_api/script/swfobject.js"></script>
		<script type="text/javascript" src="/subsonic_api/script/prototype.js"></script>
		<script type="text/javascript" src="/subsonic_api/script/subsonic.js"></script>
		<script type="text/javascript" language="javascript">
			var subsonicServer ="http://yourserver";
			var videoid="subsonic file id";
			var subsonicUsr ="subsonic_usr"
			var subsonicPsw = "subsonic_password";
			var player;
			var position;
			var maxBitRate = 1000;
			var timeOffset = 0;
		</script>

	</head>

	<body onload="init();">
		<div>

			<div id="placeholder1"><span class="warning"><a href="http://www.adobe.com/go/
getflashplayer">Obtenir Flash player</a></span></div>
		</div>
	</body>
</html>

Pour le reste je vous laisse télécharger ce fichier zip qui contient tout les éléments nécessaires à la lecture de la vidéo. Pour cela rendez-vous ici: subsonic_api_demo.

Référez-vous à la documentation de l’api Subsonic pour récupérer l’id de la vidéo et sa longueur.

Dernière info sur les méthodes changeTimeOffset() et changeBitrate() présentes dans le fichier subsonic.js: elles permettent respectivement de changer la position dans la vidéo et de changer la qualité de celle-ci. Elles sont donc très utiles 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *