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 !
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 : HTML1 | <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 : HTML1
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.
Formats pris en charge
Real accepte les types de fichiers suivants :
- .ram ;
- .rm ;
- .smi ;
- .mp4 ;
- .mp3 ;
- et .mpg.
Code HTML
Code : HTML1 | <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.
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 : HTML1
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 : HTML1
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.
Siteduzero.com
Newbiesparadise.com