Mise à jour le 18 novembre 2009.

Les bases

Les types de fichiers video :

– ceux qui sont téléchargés puis lus par un lecteur : exemple, les formats .avi ; .mpeg ; etc. La mise en ligne de vidéo de ce type pose le problème de leur taille souvent considérable, excédent souvent les vitesses de nos modems. De plus ces vidéo sont lues par un lecteur exterieur à la page Web.

– ceux qui sont lus au fur et à mesure, sans qu’il y ait besoin de télécharger le fichier en entier ; c’est le streaming (« flux »). Leur avantage est considérable : ils sont plus légers et ne nécessitent pas un long temps d’attente ; ils peuvent s’ouvrir au sein même de la page Web. Par contre leur qualité est dégradée et leur taille souvent trés réduite.

La légalité :

– la mise à disposition de vidéo suppose que vous ayez le droit de la faire (cqfd) :

– la copie ou bien la conversion de vidéo se heurte souvent à la DRM (Digital Rights Management) c’est à dire à des mesures de protection (physique et logique) des vidéos que l’on trouve sur Dvd. Il est possible (mais pas toujours) de faire « sauter » ces protection… à vos risques et périls bien sûr…

Les fiches de Cinéhig donne les moyens et méthodes techniques… elles ne vous affranchissent pas du respect de la légalité !

Dans les tutoriels suivants mavideo désignera votre fichier video à lire ; monchemin désignera le chemin d’accès à cette vidéo et monserveur désignera votre hébergeur.
—-

Fichiers avi ou mpeg sur une page Web

Vous faites un lien direct sur le fichier qui sera alors téléchargeable ou bien jouable avec le lecteur ad hoc.

Pour que la vidéo soiy lue au sein de la page Web, utilisez la balise en insérant ce code :



Les attributs :

CONTROLS= »true » indique que le panneau de contrôle de la vidéo est affiché ; pour que le panneau de contrôle ne s’affiche pas, donnez à cet attribut la valeur false.
LOOP= »-1″ détermine le nombre de fois que la vidéo doit être lue ; une valeur de -1 signifie qu’elle sera lue indéfiniment.
AUTOSTART= »true » indique que la lecture du fichier vidéo commence automatiquement ; pour que la vidéo ne soit pas lue dès le chargement de la page, donnez à cet attribut la valeur false.
HEIGHT= »200″ et WIDTH= »320″ définissent la hauteur et la largeur de la vidéo ;
BORDER= »0″ indique la largeur de la bordure entourant la vidéo.

Pour éviter des problèmes de chemin, enregistrez le fichier dans le même dossier que votre vidéo.
—-

Le streaming

Il existe 4 grandes technologies disponibles :

  1. Real Video : fichiers .ra .rm (et aussi .rv et .rmvb)
  2. Quick Time Video : fichier .qt et .mov
  3. Windows Media : fichiers .wmv
  4. Flash : fichiers .flv

Le processus de création est simple :

  1. On démarre d’un fichier de type AVI ou MPEG que l’on encode dans l’un des formats de streaming.
  2. On crée la page pour que ce fichier soit lu.
  3. On dépose (par ftp) ce fichier et la video sur son serveur.

—-

Etape n°1 : l’encodage

Pour encoder il faut utiliser soit un logiciel commercial comme I-Movie ou Studio ou simplement Windows Movie Maker. On peut utiliser aussi des outils libres ou du moins gratuits :

– L’encodeur de Windows Media (http://www.generation-nt.com/telecharger/fiche/321/Codeur-Windows-Media-Serie-9/). . Vous trouverez un tutoriel de prise en main (http://www.generation-nt.com/dossiers/lire/90/How-to-tutorial-Streaming-Windows-Media/

– L’encodeur de Real c’est Real Producer Basic à télécharger (http://forms.real.com/rnforms/products/tools/producerbasic/index.html) ou (http://www.zikinf.com/logiciels/warez.php?soft=37)

– L’encodeur de Quick Time c’est, par exemple, Mpeg StreamClip à télécharger (http://www.squared5.com/svideo/mpeg-streamclip-win.html) mais il y a en a beaucoup d’autres.
—-

Etape n°2 : insérer la vidéo sur une page Web

Dans votre page Web vous devez insérer quelques lignes de codes qui dépendront du type de streaming choisi.

1. Real Player

realplayer
realplayer

1er cas : une vidéo qui sera proposée à la lecture par le lecteur externe ou au téléchargement.

Il suffit de faire un lien vers le fichier produit par le Real Producer. Les fichiers créés par le RealProducer sont suivis de l’extension .rm

Exemple :


Regardez ma video

2nd cas : une vidéo qui sera lu par le Real Player.

Pour que la lecture du fichier démarre dès qu’on clique sur le lien, il faut créer un fichier d’appel .ram correspondant au fichier .rm de la video.

Un fichier .ram est un fichier texte tout ce qu’il y a de plus simple : il ne contient que l’adresse à laquelle le RealPlayer doit aller chercher le fichier .rm associé.

Exemple : si votre video devra être lu à cette adresse : http://www.cinehig.clionautes.org/mavideo.rm vous utilisez un simple éditeur de texte pour créer le fichier .ram qui ne contiendra que l’adresse ci-dessus et rien d’autre. Vous l’enregistrez sous : mavideo.ram

Ensuite vous créez un lien qui ressemblera alors à ceci :

Regardez ma vidéo

3ème cas : intégration du Real Player dans votre page Web

Vous pouvez souhaiter que le Real Player ne s’ouvre pas dans sa propre fenêtre. Real Player n’est pas seulement une application indépendante : c’est également un plug-in et un composant ActiveX. Il peut donc s’ouvrir dans votre page Web. Il est plus judicieux de partir du fichier .ram, obtenu comme indiqué ci-dessus… mais on peut aussi appeler directement le fichier video lui-même (c’est à dire le .rm). Pour les navigateurs Mozilla et Internet Explorer, nous utiliserons la balise dont voici le code simple :




Rappel : on peut appeler directement le fichier video : dans ce cas la ligne à changer est SRC= »monchemin/mavideo.rm

Pour les utilisateurs d’Internet Explorer uniquement, il existe une autre solution grâce à la balise :



Dans les 2 cas vous pouvez aussi utiliser un fichier d’appel .ram (comme nous l’avons vu plus haut et le substituer au fichier .rm .
—-
2- Pour Windows Media

MediaPlayer
MediaPlayer

Avec la balise :



Avec la balise :



—-
3- Pour QuickTime

Avec la balise :



Avec la balise :









—-

Vidéo en streaming avec Flash

La quasi-totalité des navigateurs possèdent le plugin Flash (SWF). Flash est capable de faire de la vidéo en streaming. Voici les étapes pour publier une vidéo grâce à Flash :

  1. utiliser un convertisseur FLV
  2. créer la page Web

1. Convertir la video en fichier .flv

L’outil de conversion proposé est Riva FLV Encoder (il est gratuit) à télécharger (http://www.download.com/Riva-FLV-Encoder/3000-2140-10320097.html?part=dl-RivaFLVEn&subj=dl&tag=button).

Pour convertir la vidéo en FLV : sélectionnez votre vidéo, choisissez le nom de sortie ainsi que le format (résolution, nombre d’images/seconde,etc.) et cliquez sur le bouton « Encode » et attendez. Cela va produire un fichier .FLV.

2. Créer la page HTML

Copiez votre fichier FLV (par exemple mavideo.flv) et flvplayer.swf dans un même répertoire et crééz un fichier HTML correspondant. En voici le code de base utilisant lui aussi la balise :



Attention, sur la machine de votre visiteur (et la votre également) un player FLV doit être installé. Vous en trouverez plein de gratuits sur internet. Par exemple Flash Video Player à télécharger (par exemple : http://www.jeroenwijering.com/upload/flash_flv_player.zip).

3. Le cas de Spip

Sous Spip le plugin Multimedia fait bien l’affaire : pour en savoir plus : http://www.spip-contrib.net/Comment-ajouter-des-videos-dans
.

Sinon vous trouverez à cette URL : www.netdeveloppeur.com/tutoriaux-et-astuces-spip/spip-video-flash-player-article63.html un tutoriel pour insérer des videos flv dans votre site sous Spip en utilisant un simple mot-clef.

—-

Sources

Vidéo en ligne : http://www.video-en-ligne.com/ dont un tutoriel complet (http://www.video-en-ligne.com/mettre-des-videos-sur-le-web/)

– pour le flv, sur Comment ca marche ? : http://www.commentcamarche.net/faq/sujet-3049-webmaster-publier-facilement-une-video-dans-une-page-web

– Une autre source, zikinfo : http://www.zikinf.com/articles/mao/streaming.php

– Sur le site des Svt de l’académie de Nantes : http://www.pedagogie.ac-nantes.fr/1171359886625/0/fiche___ressourcepedagogique/&RH=1160729835875

À propos de l'auteur

Jean-Pierre Meyniac

J'enseigne au lycée Marie Curie d'Echirolles, près de Grenoble. Passionné de cinéma, j'anime ce site depuis sa création.

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.