[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > XHTML / CSS > Lecture du tutoriel

Des vidéos en streaming sur son site

	Auteur : Rom2 Créé : le 21/03/2007 18:17:42 Modifié : le 22/05/2008 10:08:06 Noter et commenter ce tutoriel Imprimer ce tutoriel

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Dans ce tuto, je vais vous expliquer comment mettre une vidéo sur son site perso. Cela n'a rien de bien compliqué, c'est juste du code à savoir.

Cela est très utile si vous avez une vidéo à mettre sur votre site perso. Remarquez, avec les sites comme Youtube, Wideo, DailyMotion et autres cela est plus facile. Mais pour ceux qui veulent passer par leur serveur et leurs pages persos, ce tuto est fait pour eux.

Dans les 3 codes que je vais vous proposer, ceux-ci ne fonctionneront que si vos utilisateurs possèdent le lecteur en question ainsi que les codecs).

Let's gooo !

Sommaire du chapitre :

Lecteur Windows Media
Lecteur Real Audio
Lecteur Quick Time

Lecteur Windows Media

Liste des formats compatibles

Ce lecteur est compatible avec les formats suivants :

.wmv ;
.wma ;
.avi ;
.mp3 ;
et enfin .mp4.

Code basique

Voici le code :

Code : HTML

1	<embed type="application/x-mplayer2" width="200px" height="200px" showcontrols="0" src="monfichier.wmv" />

Si vous voulez que votre site soit conforme aux recommandations du W3C, vous ne devez pas utiliser ce code car la balise embed n'est plus autorisée ! Cette balise a été remplacée par object.

Voici le code valide xHTML :
Code : HTML

1
2
3

<object type="application/x-mplayer2" style="width: 200px; height: 200px;" data="monfichier.wmv">
<param name="filename" value="monfichier.wmv"/>
</object>

Quelques informations :

la balise param sert à donner des informations sur le fichier (son nom...) ;
la propriété type permet d'indiquer le type MIME du fichier.

Il ne vous reste plus qu'à remplacer les monfichier.vmv par l'adresse de votre fichier.

Lecteur Real Audio

Formats pris en charge

Real accepte les types de fichiers suivants :

.ram ;
.rm ;
.smi ;
.mp4 ;
.mp3 ;
et .mpg.

Code HTML

Code : HTML

1	<embed type="audio/x-pn-realaudio-plugin" src="monfichier.ram" height="200px" width="200px" controls="all" console="video"/>

Le lecteur Real n'accepte pas la balise object

: faites donc bien attention à ne pas vous tromper.

L'attribut console prend la valeur d'un identifiant unique pour tous les contrôles de la même vidéo.
L'attribut controls prend une des valeurs qui suit :

Attribut	Description
All	Toutes les commandes
ControlPanel	Boutons play / pause / stop et barre d'avancement
PlayButton	Boutons play / pause
PlayOnlyButton	Bouton play uniquement
PauseButton	Bouton pause uniquement
StopButton	Bouton stop uniquement
PauseButton	Bouton pause uniquement
PauseButton	Bouton pause uniquement
FFCtrl	Avancer d'une plage
RWCtrl	Reculer d'une plage
MuteCtrl	Activer / Désactiver le son
MuteVolume	Activer / Désactiver le son et le contrôle du volume
VolumeSlider	Contrôle du volume
PositionSlider	Barre d'avancement
TACCtrl	Seulement les informations sur le clip
HomeCtrl	Logo avec le lien vers http://www.real.com/
InfoVolumePanel	Contrôle de volume et état de la connexion
InfoPanel	État de la connexion
Status Panels	Boutons play / pause / stop, la barre de défilement et l'état de la connexion
StatusBar	Le temps
StatusField	Toutes les informations sauf celles qui concernent le temps
PositionField	Le temps sans les autres informations

Et voilà : avec ça, vous devrez avoir de quoi personnaliser au maximum votre lecteur.

Lecteur Quick Time

Formats pris en charge

Avec Quicktime, vous pourrez lire les formats suivants :

.qtl ;
.mov ;
.mpg ;
.mp4 ;
.mp3.

Normalement, on utilise ce lecteur le plus souvent pour les fichiers .mov qui sont spécifiques à Quick Time.

Code HTML

Voici ce qu'il faut avoir écrit dans votre page :

Code : HTML

1
2
3

<object type="video/quicktime" style="width: 200px; height: 200px;" data="monfichierexemple.mov">
<param name="src" value="monfichierexemple.mov"/>
</object>

Et en total bonus, voici comment activer la lecture automatique des fichiers lors du chargement de la page.

Voici les codes :
Code : HTML

1
2
3

<param name="autostart" value="1" /> <!-- pour Windows Media -->
<param name="autostart" value="true" /> <!-- pour Real -->
<param name="autoplay" value="true" /> <!-- pour Quicktime -->

That's all !

Et voilà : maintenant, vous pouvez sans problème faire visionner des vidéos à vos visiteurs.

Ce tuto n'est pas une contre-attaque au tuto de Thunderseb qui explique comment mettre des vidéos sur son site en utilisant un lecteur flash

. Par expérience, j'ai vu énormément de personnes vouloir mettre un film en utilisant un de ces lecteurs (soit par urgence, soit par flemme

) : ce tuto est donc fait pour eux.

J'espère que ce tutoriel vous a appris quelques trucs !

Un grand merci au zCorrecteur ptipilou pour son travail, sa patience et sa motivation pour la correction de ce tuto.

Auteur : Rom2
Noter et commenter ce tutoriel
Imprimer ce tutoriel