Intégration d'une vidéo dans une page HTML

En local il est tout à fait possible d'intégrer dans une page HTML une vidéo au format AVI
le visionnement de cette vidéo démarre à chaque passage de la souris au-dessus de l'image
la video se nomme entrebaign.avi elle est placée dans le sous dossier diabolic
Voici le code à intégrer dans la page HTML
<(-supprimez moi)IMG DYNSRC="diabolic/entrebaign.avi" START="MOUSEOVER">

Cette vidéo est encodée au format Cinepak. C'est un codec adapté à la diffusion de vidéo sur CDROM, d'où le débit de 108Ko par seconde.
185 images et 15 images par seconde, la vidéo dure 12,334 secondes
Les paramètres audio sont un peu surévalués par rapport au son ou plutôt aux gémissements de cette vidéo.

1,3Mo pour cette vidéo, sa diffusion est réservée à un réseau LAN ou à une lecture sur CDROM

Nous allons dans un premier temps encodée cette vidéo avec le logiciel RealProducer qui est distribué gratuitement par RealNetWork

Au lancement, Real Producer vous propose automatiquement un assiatant pour rentrer tous vos paramètres d'encodage.

Choisissez l'option "Record From File" puisqu'on dispose d'un fichier au format AVI

 

Dans la deuxième fenêtre, indiquer l'emplacement et le nom du fichier vidéo à encoder en utilisant le bouton "Browse" (Parcourir)
Puis cliquez sur suivant.


 

Dans la fenêtre suivante, il est possible de joindre au fichier vidéo un descriptif qui apparaîtra dans une fenêtre du lecteur, lors de la diffusion de la vidéo encodée

 

Pour cet encodage, on prévoit une diffusion à partir d'un serveur Web, en utilisant le protocole HTTP utilisé habituellement pour la diffusion des pages HTML.
Il faut donc cocher la case "Single-rate for Web Servers.

Il est possible d'installer sur un ordinateur d'un réseau local un serveur vidéo. Real propose une version limitée de son serveur qui peut convenir dans le cadre d'un réseau 16 postes. Il sera alors possible de cocher la première option et dans ce cas on utilisera un protocole adapté à la diffusion de la vidéo, le protocole RTSP (Real Time Streaming Protocol)

 

Pour l'encodage prévu, on ne peut choisir qu'un seul débit qui doit être adapté à la bande passante de l'internaute qui lit la vidéo.
Il est possible de proposer sur la même page HTML plusieurs vidéos encodées pour des débits différents et ainsi laisser le choix à l'internaute en fonction de sa bande passante.

 

Il faut dans cette fenêtre fixer les paramètres d'encodage du son associé à la vidéo.

 

Il faut dans cette fenêtre fixer les paramètres d'encodage des images de la vidéo.
Le premier choix est un compromis entre la qualité des images et la qualité de la fluidité lors du passage d'une image à l'autre.
Le deuxième choix privilègie la qualité des images et est conseillé pour les vidéos correspondant par exemple à des interviews pour lesquelles le fond ne change pas et les movements sont limités.
Le troisième choix privilégie la fluidité au détriment de la qualité des images.
Le quatrième choix donne une vidéo proche du diaporama avec la meilleure qualité d'images mais une fluidité saccadée.

 

Il faut maintenant donner un nom à la vidéo encodée dont l'extension sera .rm (comme Real Média). Par défaut, il est proposé de garder le même nom en changeant uniquement l'extension et de sauvegarder dans le même dossier que celui qui contient la vidéo au format AVI
Cette fenêtre récapitule avant de commencer l'encodage tous les paramètres saisis auparavant, il est encore possible de les modifier en utilisant le bouton précédent

 

Cliquez sur Start pour lancer l'encodage.
La fenêtre de gauche visualise le fichier au format AVI.
La fenêtre de droite permet de visualiser la vidéo durant l'encodage.
Une fois l'encodage terminé, le bouton "Play" est actif et permet de visualiser la vidéo encodée autant de fois qu'on le désire.

 

Real producer propose un assistant pour intégrer sa vidéo dans une page HTML. Choisissez la commande "Create Web Page" dans le menu "Tools"

 

Choisissez la vidéo à intégrer, par défaut, Real Producer se propose d'intégrer la vidéo que vous venez juste d'encoder, il suffit alors de valider ce choix.

 

Deux choix sont possibles, soit la vidéo s'ouvrira dans une fenêtre indépendante (Pop-up Player) de la fenêtre visualisant la page HTML, soit la vidéo est intégrée (Embedded Payer) dans la page Web elle même.
Il faut donner un titre pour la vidéo à visualiser, ce texte sera le titre de la page HTML et aussi le lien hypertext pourouvrir la nouvelle fenêtre et visualiser la vidéo.
Choisissez un nom pour la page HTML qui sera créée (de préférence sans espaces ni caractères accentués), par défaut, Real Producer propose le nom de la vidéo, il suffit alors de valider ce choix.
Voici les deux fichiers créés

Voici la page HTML, telle qu'elle apparaît.

Vérifiez par vous même la qualité de la vidéo obtenue, entrebaign.rm, dont le poids est de 353Ko soit 25% du poids de la vidéo d'origine

Vidéo extraite du film de Clouzot "Les Diaboliques"

Pour télécharger les fichiers du tutoriel: tutorielvideo2.zip