Audio et vidéo : Application de Streaming

Objet de la fiche :

État de la fiche

Plan de la fiche :

• | Avant-propos |
• | Les fichiers flv |
• | Application de lecture de multimédia en streaming |
• | Application au projet de site web |

Avant propos

Le terme de streaming désigne souvent deux technologies distinctes:

• Le "faux" streaming, qui consiste à lire progressivement le fichier multimédia pendant son téléchargement. Après un temps de latence nécessaire au chargement des premières secondes, celles-ci sont lues tandis que la suite du fichier se charge.
• Dans le "vrai" streaming, il n'est pas nécessaire de télécharger l'ensemble du fichier. Le serveur  n'envoie à l'internaute que les données dont il a besoin, qui sont automatiquement effacées après lecture. C'est cette technique que nous allons détailler ici.

Le Streaming (ou chargement progressif)

Le streaming est une technique permettant le téléchargement et l'écoute simultanée d'un fichier audio et/ou vidéo. Ses applications sont nombreuses, depuis la diffusion d'un morceau à la transmission de vidéo en direct par le net (télé, concert en direct...) .

Le streaming est très intéressant dans le cas de contenu multimédia, puisqu'il permet à vos visiteurs d'entendre ou de visualiser presque instantanément votre contenu, sans avoir à attendre que le fichier soit entièrement transféré : le son démarre quelques secondes seulement après le début du téléchargement.

Pour que ceci soit rendu possible, les données sont très compressées : il ne faut donc pas attendre du streaming la même qualité qu'un fichier stocké sur votre disque dur : Un tel fichier prendrait trop de bande passante pour être joué en temps réel.

Le fichier encodé est placé sur un serveur, qui à chaque requête d'un internaute duplique le fichier demandé et le délivre sous la forme d'un flux continu de données. Le fichier est décodé en temps réel au niveau de l'utilisateur à l'aide d'un logiciel adapté, baptisé codec. Afin d'harmoniser le débit (et d'éviter par exemple qu'une séquence vidéo ne saccade), le fichier passe dans une mémoire-tampon, ou buffer, avant d'être diffusé par le lecteur.

La qualité du streaming dépend de deux facteurs :

• la bande passante
• les logiciels d'encodage/décodage et de lecture.

La qualité d'une vidéo dépend de trois facteurs :

• la taille de l'image
• sa définition
• son rafraîchissement (nombre d'images par seconde).

La bande passante exigée par la diffusion d'une vidéo en streaming augmente proportionnellement à ces facteurs. En fonction de la vitesse de connexion de l'internaute, le serveur sélectionnera le niveau de qualité maximal pour une diffusion en temps réel. Le serveur sera également capable de s'adapter automatiquement aux variations de la bande passante : si la connexion se détériore et que le taux de transfert baisse, le contenu continuera d'être livré avec une moindre qualité afin d'éviter les interruptions de diffusion. Si en revanche la connexion devient plus fluide, la qualité s'améliorera.

Avantage

le coté "instantané" encourage l'internaute à écouter directement les morceau. De plus, si vous mettez une dizaine de morceaux en écoute, l'internaute pourra "zapper" plus rapidement, avoir une bonne idée de ce que vous proposez avant d'écouter en entier le ou les morceaux qui lui plaisent le plus.

Inconvénients

la diffusion de morceaux en streaming suppose que le serveur qui héberge votre site soit rapide, ce qui est rarement le cas avec les hébergeurs gratuits. D'autre part, le vrai streaming demande un serveur dédié, ce qui est encore moins fréquent, pour des raisons financières et techniques.
L'internaute doit avoir installé un plug-in correspondant au format que vous diffusez : c'est souvent le cas mais ce n'est pas toujours vrai. L'absence du plug-in se traduit par l'absence de son.
Enfin, si la connexion de l'internaute est mauvaise, le média ne sera pas diffusé en continu mais souvent entrecoupé de "blancs". Il est alors très probable que l'internaute ne poursuive pas son écoute (ce qui est bien normal puisque ce qu'il entend ne ressemble pas à grand chose).

Le développement de l'Internet à haut débit est un pas essentiel vers la généralisation du streaming.

Les fichiers flv

Les fichiers .flv (Flash vidéo) sont des fichiers vidéos encodés dans un format propriétaire de Macromedia Flash.

Ce format peut être lu par le logiciel Flash Player mais il est possible de programmer son propre lecteur de fichiers au format flv  tel que décrit dans cette fiche.

Application de lecture de multimédia en streaming

Les informations données dans cette fiche sont issues du site http://jeroenwijering.com et permettent l'installation d'un lecteur multimédia simple, performant et pouvant lire les données en streaming.
Fichiers acceptés : MP3/FLV/RTMP/JPG/SWF/PNG/GIF

Installation du player

L'installation se compose :

• du fichier swfobject.js à insérer dans la partie head de la page HTML Ce code javascript (de Geoff Stearns) permet de supprimer le message "click here to activate".
  <script type="text/javascript" src="chemin/swfobject.js"></script>
• De l'insertion de l'objet javascript avec comme informations, le nom du lecteur (avec son chemin), le nom de l'objet, les dimensions de l'objet (largeur, hauteur) et la version de flash requise.
  <div id="player"></div>
  <script type="text/javascript">
  var so = new SWFObject('flvplayer.swf','MonLecteur','400','400','7');
  </script>

Paramètres généraux

• displayheight (nombre): hauteur de la zone vidéo.
• displaywidth (nombre de pixel): largeur de la zone vidéo.
• file (url): Adresse du fichier à jouer. Cela peut être un simple fichier ou une playlist au format xml.
• height (nombre): hauteur de la zone globale du lecteur incluant les boutons de contrôle.
• width (nombre): largeur de la zone globale du lecteur incluant la playlist.
• image (url): Image de base affichée dans la zone vidéo. Une image peut aussi être assignée pour chaque article d'une playlist.

Paramètres style

• backcolor (couleur): Couleur d'arrière plan du player. La valeur par défaut est 0xffffff (blanc).
• frontcolor (couleur): Couleur des boutons et fond de la liste. La valeur par défaut est 0x000000 (noir).
• lightcolor(couleur): Couleur de Rollover sur les boutons et l'élément survolé de la liste. La valeur par défaut est 0x000000 (noir).

Zones d'actions des paramètres généraux et de style

Paramètres d'apparence

• autoscroll (true,false) : Par défaut la playlist possède un ascenseur si le nombre d'article est trop grand pour un affichage complet. Si le paramètre est positionné sur true, l'ascenseur disparait et les articles de la liste seront 'scrollés' automatiquement en fonction de la position du curseur de la souris.
• largecontrols (true,false) : Lorsque ce paramètre est initialisé à "true" la barre de controle est deux fois plus large.
• logo (url) : Place un logo dans le coin bas droit de la zone vidéo. Tout type d'image est supporté mais un png avec transparence donne les meilleurs résultats.
• overstretch (true,false,fit,none) : Défini comment l'image (initialisée par le paramètre image) ou la vidéo remplissent la zone vidéo.
  • "true" l'image et ou la vidéo remplissent entièrement la zone video proportionnellement aux dimensions de cette zone.
  • "false" identique à fit.
  • "fit" l'image et ou la vidéo remplissent entièrement la zone video non proportionnellement mais en fonction des paramètres height et width. Valeur par défaut.
  • "none" affiche aux dimensions originales de l'image ou de la vidéo.
• showdigits (true,false,total) :
  • "true" valeur par défaut : affiche sous forme numérique le temps de chargement et le temps en cours dans la barre de commande du player.
  • "false" pour ne pa afficher le temps de chargement et le tempq en cours.
• showeq (true,false) : Affichage d'un equaliser dans la fenêtre vidéo lorsque ce paramètre est à true. Ceci apporte une petite touche fun lorsque l'on écoute des mp3.
• showicons (true,false) : Affiche ou supprime l'icone play/stop au milieu de la zone vidéo. Affiche l'icone par défaut ("true").
• showvolume (true,false) : Initialisé à "false" pour supprimer l'affichage du bouton de réglage de volume dans la barre de commande. Par défaut ce paramètre est initialisé à "true"

Paramètres multimédia

• autostart (true,false,muted) : Mode de démarrage du player
  • "true" pour faire démarrer automatiquement le player aprés le chargement de la page HTML.
  • "false" le player démarre sur action du visiteur du site.
  • "muted", le player demarre automatiquement avec le volume initialisé à 0.
• bufferlength (nombre): Ce paramètre détermine le nombre de secondes durant lesquelles le fichier FLV sera 'bufferisé' au départ avant que le player ne commence à le lire. 1 ou 2 pour une connexion rapide ou pour de petites vidéos; plus pour de plus gros fichiers ou pour des connexions lentes. Par défaut la valeur est de 3 secondes.
• repeat (true,false,list) :
  • "false" Par défaut le player s'arrête automatiquement aprés lecture complète du morceau musical ou de la vidéo.
  • "true" Lecture continue de la musiaque, de la video ou de la liste.
  • "list" Pour jouer une fois tous les articles d'une liste.
• start (secondes) : Si vous utilisez RTMP ou du streaming HTTP (pas pour les fichiers FLV ou MP3) utilisez ce paramètre pour ne commencer à lire le fichier qu'à partir d'un certain décalage. On peut aussi utiliser ce paramètre en playlists XSPF.
• volume (nombre) : Le volume de son par défaut du player est 80, mais il est possible de modifier cette valeur à l'aide de ce paramètre.

Playlist

• thumbsinplaylist (true,false) : Si la playlist (fichier xml) inclu des images (tag image), vous pouvez les afficher en positionnant ce paramètre à "true".
• shuffle (true,false) : Si ce paramètre est égal à "true" les éléments de la liste sont joués aléatoirement. Si le paramètre est à "false" les éléments de la liste sont joués séquentiellement.

Interaction Javascript

Exemples

Les diverses configuration d'un lecteur

Commentaires	Résultats	Codes
Configuration du player pour lecture simple d'un fichier mp3		Voir le code
Configuration du player pour lecture d'un fichier mp3 avec affichage d'une image		Voir le code
Configuration du player pour lecture de fichiers mp3 à partir d'une liste (avec ascenseur et icône d'article)		Voir le code   Voir le fichier liste
Configuration du player pour lecture d'un fichier flv avec image d'accueil et logo		Voir le code

Application au projet de site web