Mis à jour le mercredi 30 octobre 2013
  • Facile
Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Introduction du cours

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. ^^

Let's gooo ! :p

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 :

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

Voici le code valide xHTML :

<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.wmv 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

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

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 :

<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 :

<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 :p ) : ce tuto est donc fait pour eux.

Image utilisateur

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.

Exemple de certificat de réussite
Exemple de certificat de réussite