Comment intégrer une vidéo dans une page web html ?

Publié par jcf le 10 Janvier 2005 dans Tutos

Recos : 0

Un simple serveur web suffit pour diffuser vos vidéos en streaming.

Intégration manuelle en HTML

Vous pouvez tout à fait intégrer vos vidéos à l’intérieur de vos pages HTML sans éditeur Web spécialisé. Il vous suffit juste de connaître les commandes qui fonctionne dans les 3 technologies, et avec un simple éditeur de texte comme SimpleText (MacOS) ou Notepad (Windows), vous êtes à même de diffuser vos œuvres sur Internet.

Les codes HTML qui suivent vous permettront d’intégrer dans la page Web l’objet vidéo qui lira votre fichier dans l’un des formats du streaming, mais ils partagent tous le même type de code HTML pour ‘habiller’ votre page.

Pour diffuser de la vidéo à travers votre page Web, 3 solutions :

1.Lien HTML

La plus simple des solutions : réaliser un lien HTML de votre page Web vers votre fichier vidéo, ou plutôt vers le méta-fichier de votre fichier vidéo, ce qui peut éviter certains problèmes de compatibilité lors de la lecture en streaming.

Fichiers REAL

<a href="monfichier.ram"> cliquez ici pour voir ma vidéo en real vidéo </a>

ou

Fichiers Windows Media

<a href="monfichier.asx"> cliquez ici pour voir ma vidéo Windows Media</a>

ou

Fichiers Quicktime

<a href="monfichier.qtl"> cliquez ici pour voir ma vidéo Quicktime </a>

Ou

Fichiers Flash

Il faut lier 1 fichier lecteur .swf + 1 fichier média .flv (voir création de fichiers avec Dragdrop)

N'oubliez pas bien sur de créer un méta fichier en texte, qui contiendra l'URL et le nom du fichier vidéo que vous voulez relire.

Si vous ne créez pas de méta fichier, vous devez bien sur insérer le nom du fichier vidéo directement dans la balise <embed>.

2. Une intégration sans habillage

Une simple balise <embed> permet d’intégrer n’importe quel objet dans une page HTML. Cette balise a pour avantage de fonctionner avec le navigateur Web de Microsoft et celui de Netscape.

Intégration simple avec une balise <embed> sans aucun habillage autour : 2 objets Real, l’un pour l’image, l’autre pour le bouton PLAY

1. code HTML Real vidéo simple

<embed src="http://www.monsite.com/video.rm" width="112" height="100" type="audio/x-pn-realaudio-plugin" console="_master" controls="imagewindow" autostart="true">

Si vous désirez intégrer des boutons de fonction de lecture, vous devez ajouter un deuxième objet HTML Real à votre page et assigner à l’option CONTROLS la valeur « PLAYBUTTON » par exemple pour afficher un bouton PLAY sous la fenêtre de l’image. Le paramètre ‘console’ crée un lien entre l’objet affichant l’image et l’objet gérant le contrôle de la lecture.

<embed width="100" height="28" type="audio/x-pn-realaudio-plugin" src="http://www.monsite.com/video.rm" controls="playbutton" console="_master"></p>

2. code HTML Windows Média simple

<embed src="http://www.monsite.com/video.wmv" width="118" height="100" type="video/msvideo" autostart="true">

3. code HTML Quicktime simple

<embed src=" http://www.monsite.com/video.mov" width="190" height="240" type="video/quicktime" controller="false" autoplay="true">

4. code HTML Flash

<html><title>repaire.net - Page de diffusion vidéo Flash </title>

<body>

<center>mono_small2

<br><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"

style="width:384px; height:288px;" title="jcf flash Player">

<param name="movie" value="player.swf?file=mono_small2_flash.flv" />

<param name="quality" value="high" />

<param name="wmode" value="transparent" />

<param name="bgcolor" value="#FFFFFF">

<embed src="player.swf?file=mono_small2_flash.flv&showdigits=true&autostart=false" quality="high"

pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"

bgcolor="#FFFFFF" style="width:384px; height:288px;">

</EMBED>

</OBJECT>

</center>

</body>

</html>

Une intégration avec habillage avancé

Afin d'intégrer au mieux une séquence vidéo à l'intérieur de vos pages Web, vous pouvez créer une page de ce type:

Au milieu de ces huit zones qui peuvent servir d'habillage graphique se place l'objet vidéo

Il s’agit en fait de créer un tableau de 3 colonnes et de 3 lignes, dont la cellule centrale sera remplie avec l’objet vidéo real, quicktime, ou Windows Media.

Un exemple d’intégration vidéo dans une page web : l’ex Canalweb

Voici le code source d’un tableau si vous ne possédez pas d’éditeur HTML :

<div align="center">

<p></p>

<table border="1" cellpadding="0" cellspacing="2" width="180">

<tr>

<td>

<div align="center">

haut gauche</div>

</td>

<td>

<div align="center">

haut</div>

</td>

<td>

<div align="center">

haut droit</div>

</td>

</tr>

<tr>

<td>gauche</td>

<td><embed src= "votre_video_ici.mp4"></td>

<td>droit</td>

</tr>

<tr>

<td>

<div align="center">

bas gauche</div>

</td>

<td>

<div align="center">

bas</div>

</td>

<td>

<div align="center">

bas droit</div>

</td>

</tr>

</table>

<p></p>

</div>

Vous remplacerez ainsi la balise <embed> par le code choisi parmi les 3 lecteurs vidéo suivant.

Note: Voici le type de code que vous allez retrouver dans les balises <embed> et <object>

code

signification

OBJECT CLASSID=…

height=180

width=320>

<param name="controls" value="ImageWindow">

<param name="console" value="Clip1">

<param name="autostart" value="true">

<param name="src" value="votre_film.rpm">

<embed src="votre_film.rpm"

type="audio/x-pn-realaudio-plugin"

<PARAM NAME="showcontrols" VALUE="false">

Identificateur du lecteur vidéo

Hauteur de la fenêtre vidéo

Largeur

Code pour Real= affiche la vidéo

Code pour Real= donne un nom à l'objet

Parfois 'autoplay', démarre automatiquement

Nom du fichier

Nom du fichier pour compatibilité Netscape

Type de fichier MIME

Affiche ou pas les boutons de contrôle

Les classid des objets de streaming:

Real:

clsid:FDC7A535-4070-4B92-A0EA-D9994BCC0DC5

clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA

Windows Media Player 10

clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 (idem WMP7)

Windows Media Player 9

clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 (idem WMP7)

Windows Media Player 7

clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6

Windows Media Player 6.4

clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95

Quicktime

clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B

Notes :

Liens sur le web pour en savoir plus sur les objects:

http://www.w3schools.com/

Codes Real vidéo

Balise HTML complète pour EMBED: (le nom figure deux fois pour une compatibilité Netscape/Microsoft IE, EMBED et OBJECT)

<-- premier objet d’affichage de la vidéo dans l’objet -->

<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" height="100" width="100">

<param name="console" value="video1">

<param name="controls" value="ImageWindow">

<param name="autostart" value="true">

<param name="src" value="http://www.monsite.com/mondossier/monfichier.ram">

<embed height="100"

src=" http://www.monsite.com/mondossier/monfichier.ram " type="audio/x-pn-realaudio-plugin" width="100" controls="ImageWindow" autostart="true" console="video1">

</object>

<br><-- deuxième objet de contrôle du premier objet vidéo -->

<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" height="100" width="100">

<param name="console" value="video1">

<param name="controls" value="controlpanel">

<param name="autostart" value="true">

<param name="src" value="http://www.monsite.com/mondossier/monfichier.ram">

<embed height="100" src="http://www.monsite.com/mondossier/monfichier.ram" type="audio/x-pn-realaudio-plugin" width="100" controls="controlpanel" autostart="true" console="video1">

</object>

Contenu du Méta fichier RPM ou RAM:

http://www.monsit.com/mondossier/monfichier.rm

Codes Windows Média

Balise HTML:

<object id="MediaPlayer" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" type="application/x-oleobject" standby="Loading Microsoft Windows Media Player components..." height="100" width="100">

<param name="enabled" value="true">

<param name="url" value="http://www.monsite.com/mondossier/monfichier.asx ">

<param name="autostart" value="true">

<param name="uimode" value="full">

</object>

Méta fichier ASX de 2 séquences vidéo à lire à la suite: (attention XML: syntaxe importante !)

<ASX version = "3.0">

<TITLE>John</TITLE>

<Entry>

<Ref href = " http://www.monsite.com/mondossier/monfichier1.asx " />

</Entry>

<Entry>

<Ref href = " http://www.monsite.com/mondossier/monfichier2.asx " />

</Entry>

</ASX>

Codes Quicktime

Balise HTML: (le nom figure deux fois pour une compatibilité Netscape/Microsoft IE)

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="320" HEIGHT="240" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">

<PARAM name="src" VALUE="http://votresite.com/video/media.mov?embed">

<PARAM name="autoplay" VALUE="true">

<PARAM name="controller" VALUE="false">

<EMBED

TYPE="video/quicktime "

SRC="http://votresite.com/video/media.mov?embed"

WIDTH="320"

HEIGHT="240"

AUTOPLAY="true">

</EMBED>

</OBJECT>

Méta fichier QTL: (attention XML: syntaxe importante !)

<?xml version="1.0"?>

<?quicktime type="application/x-quicktime-media-link"?>

<embed

autoplay="true"

fullscreen="full"

src="http://www.monsite..com/video/monfilm.mov"

/>

Codes Mpeg4

Le Mpeg n’étant pas un format propriétaire, vous devez intégrer le code HTML qui correspond au type de lecteur que vous allez utiliser pour lire le fichier Mpeg4, qu’il s’agisse du Real Player, du Windows Media player ou du Quicktime Player, puisqu’ils lisent tout trois le format ISO Mpeg4 (parfois avec l’aide du plugins ENVIVIO, comme avec le Windows Media Player).

Vous n'êtes donc pas obligé d'utiliser un code source spécifique, mais plutôt de choisir le code du lecteur que vous avez choisi d'utiliser pour lire votre fichier Mpeg4, peut être par exemple le Quicktime Player:

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="320" HEIGHT="240" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">

<PARAM name="src" VALUE="http://votresite.com/mavideo.mp4">

<PARAM name="autoplay" VALUE="true">

<PARAM name="controller" VALUE="false">

<EMBED

TYPE="video/quicktime "

SRC=" http://votresite.com/mavideo.mp4"

WIDTH="320"

HEIGHT="240"

AUTOPLAY="true"

CONTROLLER="false">

</EMBED>

</OBJECT>

Golive

Si vous n'êtes pas à l'aise avec le code HTML, vous pouvez aussi utiliser l'un des nombreux éditeurs HTML du marché.

Le plus connu d'entre eux est Adobe Golive, qui vous rendra de nombreux services lors de la mise en page de vos pages Web et de vos vidéos.

L'éditeur html Adobe GoLive: Le drag and drop met le rich média à la portée de tous en permettant de déposer les 3 types d'objet vidéo (Real WM, et quicktime) directement sur la page Web sans taper le moindre code HTML

L'intérêt de ce type logiciel est qu'il vous simplifie le travail de mise en page, tout en vous laissant la possibilité de modifier son code en fonction de vos besoins, ou de ses limitations interne (un nouveau format de fichier non reconnu, des balises exotiques…).

Ce type de logiciel s'occupe aussi de synchroniser votre site Web avec vos nouveaux fichiers, et de les mettre à jour automatiquement en FTP, sans sortir de son interface.

Adobe Golive arrive ainsi en dernière étape, lorsque vos fichiers vidéo sont prêts, et que votre habillage aussi (fichiers JPEG, texte de présentation…).

Dans ses dernières versions, GoLive intègre même des outils vidéo très avancés qui vous permettent de réaliser votre montage à l'intérieur même de Golive, avec une timeline spécifique, et de déclencher des évènements de type rich média (synchronisation de pages Web, interactivité…).

La publication sur le Web

Un simple serveur web suffit pour diffuser vos vidéos en streaming.

SI vous n’utilisez pas les outils de publication intégrés à Go Live (fonction ‘publier le site…’) ou à d’autres logiciels de création de pages Web, vous pouvez aussi ‘uploader’ (envoyer vos fichiers sur le Web, par opposition au ‘download’ la réception de fichiers) vos fichiers manuellement.

Vous avez pour réaliser cela plusieurs solutions :

en mode terminal, sous DOS ou sous Console, en tapant ‘ftp 123.1.2.3’ avec l’adresse IP du serveur ftp sur lequel vous voulez vous connecter.

Avec un client FTP, un petit logiciel comme ‘leech ftp’ qui va se connecter au site FTP mais en utilisant une interface graphique plus conviviale

Avec Internet Explorer, en tapant l’adresse IP de votre serveur, selon le protocole FTP.

Le site Web présent sur Internet fonctionne comme un théâtre :

la scène, publique est visible en http://www.monsite.com

L’entrée des artistes est accessible en ftp://ftp.monsite.com, pour l’envoi des fichiers et la gestion des différentes pages qui apparaîtront plus tard.

Le logiciel qui permet de voir la partie publique du site est un navigateur Web, comme Microsoft Internet Explorer ou Netscape Navigator.

Le logiciel qui permet d’envoyer des fichiers sur le site est un client FTP, qui va se connecter à un logiciel Serveur FTP, configuré par votre hébergeur Web pour que vous puissiez déposer vos pages Web.

Pour récupérer un client FTP, nous vous proposons :

Transmit FTP sur Mac OS : http://www.panic.com/transmit/

Flash FXP sur PC : http://www.flashfxp.com/download.php

Il existe une multitude de sharewares de ce type qui vous permettent, une fois connecté à votre serveur FTP, de glisser déposer vos fichiers de votre disque dur jusqu’au serveur Web distant.

La solution utilisant l’Internet Explorer comme client FTP étant la plus simple, c’est cette dernière que nous allons développer ci dessous.

Lancez Internet Explorer, puis saisissez dans la fenêtre d’adresse URL, l’adresse FTP de votre serveur comme ceci :

ftp://ftp.ifrance.com ou ftp://123.98.32.2 (remplacez l’adresse FTP par la votre)

Le serveur devrait vous demander un nom d’utilisateur et un mot de passe, puisque cet accès est réservé seulement aux personnes qui ont un accès privilégié.

Si ce n’est pas le cas, vous devez forcer la connexion avec votre nom d’utilisateur et votre propre mot de passe, avec le bouton de droite de la souris :

Saisissez ensuite vos informations personnelles :

Le site FTP apparaît, vous laissant voir les dossiers et fichiers y figurant.

La visualisation graphique de l’ordinateur distant, présent 24h/24 sur Internet, vous permet d’y accéder comme s’il s’agissait d’un disque dur connecté à votre ordinateur et vous permettant de déposer vos propres fichiers.

Attention, en règle générale lorsque vous êtes connecté au serveur FTP, vous arrivez dans un dossier qui n’est pas le dossier de départ de votre site Web, et il faut entrer dans ce répertoire racine (root en anglais) pour y déposer vos fichiers. Ce dossier peut s’appeler ‘www’, ou ‘Web’, ou encore ‘public_html’ selon les différents serveurs.

Vous pouvez alors y glisser - déposer tous les fichiers de votre site Web depuis votre disque local, ainsi que les fichiers vidéo et audio.

Veuillez conserver l’arborescence de votre propre disque afin que les liens relatifs puissent continuer à fonctionner.

Vous pouvez ensuite vous connecter au site avec son adresse publique http://www… pour vérifier que votre site fonctionne correctement, une fois placé sur Internet.

{include_content_item 1379}
{include_content_item 1016}