Afficher un preloader

Le Nimbb Player est construit sur la technologie Flash, ce qui signifie qu'il doit être téléchargé et initialisé avant qu'un utilisateur puisse y accéder. Ce processus est généralement rapide, mais si un utilisateur a une connexion lente, il peut être utile d'afficher un message temporaire (preloader). Le Nimbb Player dispose d'un preloader déjà intégré qui affiche une barre de progression lors du chargement.

Cependant, vous pouvez afficher votre propre texte ou image pendant que Nimbb se charge. L'exemple suivant vous montre comment faire cela en utilisant un DIV et de la programmation JavaScript. Pour tester l'exemple, actualisez la page et remarquez le texte affiché pendant le chargement de Nimbb.

Cet exemple nécessite que vous indiquiez votre clé de développeur (voir le tutoriel).

Exemple

Chargement du Nimbb Player...

Code HTML

<script language="JavaScript" type="text/javascript">
<!--

// Variable globale contenant une référence au lecteur.
var _Nimbb;

// Événement : le Nimbb Player a été initialisé et est prêt.
function Nimbb_initCompleted(idPlayer)
{
  // Obtenir une référence au lecteur puisqu'il a été créé.
  _Nimbb = document[idPlayer];

  // Cache le preloader.
  document.getElementById("div_loading").style.display = "none";
	
  // Afficher le Nimbb Player en le redimensionnant.
  _Nimbb.width=320;
  _Nimbb.height=240;
}

// -->
</script>
<div id="div_loading" style="width:320px;height:240px;text-align:center;">
Chargement du Nimbb Player...
</div>

<object id="nimbb" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="0" height="0" codebase= "http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="https://player.nimbb.com/nimbb.swf?mode=record&key=XXXXXXXXXX&lang=fr" />
<param name="allowScriptAccess" value="always" />
<embed name="nimbb" id="nimbb" src="https://player.nimbb.com/nimbb.swf?mode=record&key=XXXXXXXXXX&lang=fr" width="0" height="0" allowScriptAccess="always" pluginspage="http://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash">
</embed>
</object>

Dans le code, nous utilisons le DIV div_loading pour afficher du texte à l'utilisateur (ou vous pourriez mettre une image ou tout autre contenu dans la DIV). Nous avons aussi défini une taille de 320x240 pixels, ce qui est la même taille que le Nimbb Player. Remarquez que nous donnons une taille de 0x0 pixel au Nimbb Player de sorte à le masquer pendant qu'il est en cours de chargement.

Une fois l'événement Nimbb_initCompleted() appelé, nous cachons div_loading puis définissons la taille par défaut du Nimbb Player à 320x240 pixels pour l'afficher.

Remarque : si vous ne voyez pas le Nimbb Player lorsque vous testez ce code dans votre page, assurez-vous que vous avez correctement changé "XXXXXXXXXX" par votre clé de développeur.

Voir d'autres tutoriels.

Consultez notre Guide du développeur pour commencer avec Nimbb.