> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> HTML / CSS

> Faire un site compatible IE et FF

> Audio et vidéo

> Lecture du tutoriel

Audio et vidéo

Par

Sébastien de la Marck (Thunderseb)

Mise à jour : 12/05/2009

1 531 visites depuis 7 jours, dont 38 sur ce chapitre classé 85/786

Retour en haut

Sommaire du chapitre :

Introduction
Dewplayer

Retour en haut

Introduction

Je vais faire bref

Je suppose que vous le savez : insérer des sons et des vidéos sur un site Web n’est pas facile. Pour rappel :

On peut utiliser EMBED. Ce n'est pas bien, ça marche partout, c’est signé Netscape, et c’est invalide.
On évacue EMBED, et on n’utilise plus que OBJECT. C’est bien, c’est valide, mais ça ne marche pas partout.
Pour remédier à ce problème, on fait des scripts qui détectent le navigateur et affichent une balise OBJECT paramétrée en fonction du navigateur. C’est bien, c’est lourd, c'est chiant et si Javascript est désactivé, on peut se brosser
Les codes sont bon. Mais les Lecteurs foutent la m***e. Un .wmv se lit avec WMP. Et si on n’a pas WMP (Linux, Mac) ? Pareil pour les .mov de QuickTime et le streaming de RealMedia...

Bien évidemment, il existe des pack de codecs qui permettent de lire tous les formats avec un seul et même lecteur. Par exemple, je sais lire des .mov avec WMP. Mais tout le monde n’a pas la possibilité (entreprise, école, bibliothèque…) ni les capacités pour installer un tel pack.

C’est bien ça, et alors, il y a une solution ?

Eh bien oui. Cette solution est :

Secret (cliquez pour afficher)

le Flash

Et pourquoi cela ?

Parce que :

le Flash est multi plates-formes (Windows, Linux et Mac)
le code OBJECT est universel et fonctionne partout
FlashPlayer (pour lire les animations Flash) est un plug-in pour navigateurs et non un lecteur individuel (comme QuickTime, MPClassic, WMP…)
FlashPlayer est installé d'origine dans Internet Explorer, et la mise à jour se fait avec un ActiveX, pas besoin d'installation

Donc, je vais vous parler du Flash

Ehhh, nooon, le flash, c’est payant. Je ne veux pas moi !!!

Qui a dit qu’utiliser du Flash était payant ? On ne va pas créer des animations Flash, mais en utiliser

SWF, FLV et MP3

Je ne sais pas si vous le savez, mais une animation Flash a pour extension .swf (ça veut dire ShockWave Flash)

Le cas des vidéos

Pour les vidéos, nous allons utiliser un fichier .swf qui lira un fichier .flv. Le fichier FLV est un fichier vidéo, créé par Macromedia, spécialement pour s’utiliser avec Flash. Ce fichier n’est pas inclus dans l’animation Flash : c’est un fichier externe.

La création de fichiers .flv et leur lecture avec une animation Flash n’est pas l’objet de ce tutorial

C’est trop facile ça ! Tu dis que c’est bien, et tu refuses de nous dire comment on fait ?

Non, j’avais prévu cette question traitre

C’est pour cela, que j’ai d’abord rédigé un tuto qui explique comment convertir des fichiers vidéo banals en fichiers .flv. Le tuto explique aussi comment les utiliser

Alors, contents ?

Le tutorial en question se trouve ici

Le cas des fichiers audio

Ben, en fait, c’est pareil que pour les vidéos, sauf qu’on ne va pas utiliser des fichiers .flv, mais bien des fichiers .mp3.

Tenez, je suis gentil, je vais vous expliquer, dans la partie suivante, comment utiliser des MP3 avec Flash (c'est trop court pour un mini-tuto à part, c'est pour cela que je dois l'inclure dans celui-ci)

Retour en haut

Dewplayer

Introduction

C'est quoi Dewplayer ?

C'est une animation Flash (.swf) toute faite qui permet de lire un fichier .mp3 externe. En clair, c'est un lecteur de fichier .mp3

Bon, je ne vais pas radoter pour ne rien dire, alors, voici un exemple de ce qu'est Dewplayer.

Dewplayer est signé DEW, et est disponible sur le site Estvideo

Téléchargez Dewplayer (cliquez droit > Enregistrer la cible) :

Version normale : http://www.estvideo.com/dew/media/dewplayer.swf
Version mini : http://www.estvideo.com/dew/media/dewplayer-mini.swf
Version multi : http://www.estvideo.com/dew/media/dewplayer-multi.swf

Utilisation

Uploadez le fichier dewplayer.swf (ou -mini et -multi) sur votre ftp. Pour utiliser le lecteur sur votre page Web, rien de plus simple :

Code : HTML

1
2
3

<object type="application/x-shockwave-flash" data="dewplayer.swf?son=votre_son.mp3" width="200" height="20">
  <param name="movie" value="dewplayer.swf?son=votre_son.mp3" />
</object>

Spécifiez l'url du fichier .swf. Votre_son.mp3 est l'url relative ou absolue de votre fichier .mp3. Dans le cas de la version multi-fichiers, vous devez séparer les différents fichiers avec le signe pipe ( | ), comme cela (dans mon exemple) :

Code : HTML

1
2
3

<object type="application/x-shockwave-flash" data="dewplayer/dewplayer-multi.swf?son=dewplayer/soupeauxchoux.mp3|dewplayer/nirvana.mp3|dewplayer/ricard.mp3" width="200" height="20">
  <param name="movie" value="dewplayer/dewplayer-multi.swf?son=dewplayer/soupeauxchoux.mp3|dewplayer/nirvana.mp3|dewplayer/ricard.mp3" />
</object>

Il existe également toute une série de paramètres. Les paramètres sont comme des variables en PHP. On met un & pour les séparer, comme ceci :

Code : Autre

1	dewplayer.swf?son=son.mp3&variable1=1&variable2=0

Paramètres disponibles

Lecture automatique :

la lecture n'est pas automatique, il faut cliquer sur le bouton Play. Vous pouvez spécifier la lecture automatique, avec ce paramètre : autoplay=1

Lecture en boucle :

si vous voulez que le son s'exécute en boucle (il est en boucle par défaut en fait

) : autoreplay=1 (pour lire en boucle) et autoreplay=0 (pour ne pas lire en boucle).

Couleur de fond :

vous pouvez spécifier une couleur de fond : bgcolor=FFFFFF

Volume :

vous pouvez aussi spécifier le volume en pourcentages : volume=80 (il est de 100 par défaut).

Voici un exemple complet (le & est codé en entité HTML, comme ça : &) :

Code : HTML

1
2
3

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=fichier.mp3&amp;autostart=1&amp;autoreplay=1&amp;bgcolor=CCCCCC&amp;volume=60" width="200" height="20">
  <param name="movie" value="dewplayer.swf?mp3=fichier.mp3&amp;autostart=1&amp;autoreplay=1&amp;bgcolor=CCCCCC&amp;volume=60" />
</object>

Au fait, vous avez un générateur de code ici : http://nayi.free.fr/dev/xhtml-css/dewplayer_2.html

Retour en haut

Retour en haut

15 commentaires pour "Audio et vidéo"

Note moyenne : 3.58 / 4 (26 votes)

Pseudo	Commentaire
Kimarhi	# Posté le 10/11/2007 à 15:15:15
www.fr.kde.org	Non, le format de Flash n'est pas une solution, et encore moins la solution. - fermé, requiert un logiciel propriétaire pour le lire correctement - pas disponible partout (exemple: linux 64bit), dû au fait qu'il soit fermé Pour fournir de l'audio et de la vidéo via le web, il faut utiliser la meilleure méthode: Code : HTML - Afficher / masquer les numéros de ligne <a href="musique.ogg">une musique qui décoiffe ta mère</a> <a href="XXxClaraMorgane.ogm">une vidéo qui démonte le cul de ta mère</a> Donc: - balise a, pour ne rien imposer à personne (le visiteur écoute la musique/vidéo s'il en a envie). - fichiers au format ouverts, pour ne rien imposer à personne (le visiteur utilise le logiciel de son choix pour lire le fichier). Gajim, Spark, Coccinella, Psi, Google Talk et plein d'autres Tu veux découvrir Jabber: par ici. Tu veux utiliser Jabber dans ton logiciel/site: aucun problème.
domirock	# Posté le 16/02/2008 à 01:18:12
	Bonjour. J'ai trouvé sur google des tas de trucs pour créer une playlist avec dewplayer. Chez moi, ya rien qui marche. (A un moment, j'y ai cru, mais c'était juste les plug'in de firefox qui avaient pris la relève ) Y aurait-il un Zero qui pourrait non concocter un tuto simplissime comme on sait si bien les faire ici ??? Merci d'avance Domirock P.S. la version simple tourne aussi chez moi sans problèmes. P.S2 Je sais depuis peu que le javascript n 'est pas une danse qui revient à la mode et que les scripts ne s'écrivent pas tous à la main
piero-la-lune	# Posté le 01/05/2008 à 20:31:16
	C'est un Tuto vraiment merveilleux !!! J'ai appris pleins de "trucs", en particulier pour mon menu ou cela fait depuis 2 mois que j'essaye de trouver une solution. Donc BRAVO !!!
darkterra	# Posté le 26/02/2009 à 14:18:03
Études : BTS IRIS	...Moi je dit, super tuto, très bien pensé, très bien écrit... ...Mais chez moi je ne sais pas pourquoi mais le lecteur flash de musique ne marche pas... ...J'ai pourtant tout suivi a la lettre a plusieurs reprise, et même avec le générateur de code mais sans succès... ...Une idée pour m'aider...??... ...Enfin bon il n'empêche que c'est un très très bon tuto... ...DarkTerra...
webgerald	# Posté le 13/09/2009 à 17:28:15
ENCORE UN LINUXIEN !! Ville : St genix-sur-guiers Pays : France métropolitaine	très très intéressant !! ENCORE UN LINUXIEN !! Mais windows it's fine également Un soucis de sécurité informatique ? geraldwebcontact Le top des top du hosting allez y cliqué !!