Insérer une vidéo dans une page Web.

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

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