pdf

Intégration d’un fichier vidéo dans une page Web
sur serveur HTTP
Sommaire
1. Présentation
2. Formats vidéo pour le Web
3. Logiciels
4. Préparation des fichiers
5. Insertion du code html : chargement et affichage de l’élément
vidéo
6. Insertion du code html : ouverture de la fenêtre aux dimensions
de l’élément
1. Présentation
L’insertion et l’affichage d’un élément vidéo (et ou audio) dans une page Web
sont différents de ceux d’un texte ou d’une image :
- le poids de l’élément vidéo peut atteindre rapidement des valeurs élevées
impliquant des temps de chargement longs -> l’élément fera l’objet d’une mise
en forme adaptée ;
- la lecture de l’élément n’est pas assurée par le navigateur lui-même → la
machine client doit disposer des lecteurs, plugins et codecs correspondants ;
- ceci induit, pour un contrôle plus complet de l’élément, d’ajouter des
paramètres qui seront transmis au lecteur par le navigateur → syntaxe html
spécifique et de plus différente d’un lecteur à l’autre.
2. Formats vidéo pour le Web
2.1 Encodage-compression
On trouve actuellement 4 formats d’encodage pour la vidéo pour le Web,
chaque format étant la propriété d’un éditeur différent et nécessitant un
lecteur également spécifique :
Format
Lecteur
Éditeur
Windows Media
Windows Media player
Microsoft
Quicktime
Quicktime player
Apple
Flash Vidéo
Flash player (>=7)
Adobe
Real Media
Real player
RealNetworks
2.2 Résolution d’image
Pour l'exemple, nous utiliserons une vidéo DV-PAL en 720x576 avec une
compression intra-image d’environ 5:1.
La nouvelle taille sera adaptée à la bande passante de la connexion, sachant
qu’il vaut mieux ne pas compter sur la valeur maxi (60 à 70%) :
– 320 x 240 pour une connexion 256Kb/s
– 384 x 288 pour une connexion 512Kb/s
– 640 x 480 pour une connexion 1Mb/s
– etc..
2.3 Cadence
Il ne sera pas toujours possible de respecter la cadence initiale (25 ips dans
notre cas), on choisira alors des cadences inférieures en choisissant un diviseur
(ex. 12,5 pour 25 natif).
2.4 Rapport d'écran
C'est le paramètre que vous ne devez pas modifier !
2.5 Traitement spécifique
L’image sera désentrelacée pour éviter les effets indésirables de glissé de
trame.
3. Logiciels
La version 5 de html propose une intégration de la lecture audio-vidéo au sein
du navigateur (attention aux versions). Ce propos est discuté en fin de ce
document. Pour les versions html antérieures, on dispose de 4 formats
spécifiques pour le Web.
Chaque format dispose de son propre encodeur :
Format
Encodeur
Éditeur
Windows Media
Windows Media player
Microsoft – gratuit
Quicktime
Quicktime Pro
Apple – payant
Flash Vidéo
Flash
Adobe - payant
Real Media
Real producer
RealNetworks – gratuit
La CS d'Adobe intègre un module d’export permettant de produire l’élément
vidéo dans ces formats avec des paramètres prédéfinis intégrant toute la mise
en forme de l’élément (taille-cadence-etc.).
4. Préparation des fichiers dans Premiere 6.5 et Pro/CSx
4.1 Paramètres du projet
Choisissez toujours les paramètres en fonction de la caméra que vous utilisez.
Vous y retrouverez (dans les réglages de la caméra) toutes les caractéristiques
dont vous avez besoin.
4.2 Exportation
Lorsque le montage est réalisé, choisissez Fichier/Exportation/Media.
Les possibilités d'export dépendent de la plate-forme.
Les configurations dédiées au souvent téléchargement (progressif ou non) ont
dans leur nom le terme download, celles dédiées au streaming le terme
streaming. Le terme alternate désigne une configuration multiple (Quicktime),
certains formats pouvant être otés dans l’onglet Variantes pour Quicktime et
Bandes passantes pour les autres formats. Les formats de streaming sont à
réservés à des protocoles spécifiques (RTSP).
Il est donc possible de générer plusieurs versions du même élément vidéo pour
des bandes passantes différentes, suivant les choix que l’on veut laisser à
l’utilisateur.
Le fichier généré portera l’extension conformément au tableau suivant :
Format
Extension
Windows Media
wmv
Real Media
rm
Quicktime
mov
Flash video
Flv
5. Insertion du code html : chargement et affichage de l’élément vidéo
Dans la mesure où nous retenons un affichage de la vidéo dans une fenêtre
autonome (pop-up window ou open window), le code peut être inséré
directement entre les balises <body>, sauf pour le format Real edia, pour
lequel le controller est un objet spécifique, ce qui justifie l’utilisation d’une mise
en forme par un tableau.
La méthode la plus achevée consiste à utiliser la balise <object> pour insérer
un contrôle activeX (dont il faut connaître l’Id de classe unique qui peut varier
suivant les versions de lecteur) et d’y inclure la balise <embed> pour les
navigateurs ne prenant pas en charge ces contrôles. Nous allons maintenant
voir l’implémentation du code html pour les 3 formats d’un élément vidéo de
dimensions 320x240.
5.1 Quicktime (le fichier est nommé video.mov) :
<object
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320"
height="256"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="autoplay" value="true" />
<param name="controller" value="true" />
<param name="pluginspage"
value=http://www.apple.com/quicktime/download/indext.html />
<param name="target" value="myself" />
<param name="type" value="video/quicktime" />
<param name="src" value="video.mov" />
<embed src="video.mov" width="320" height="256"
autoplay="true" controller="true" border="0" pluginspage=
"http://www.apple.com/quicktime/download/indext.html"
target="myself">
</embed>
</object>
Remarque : on ajoute 16 pixels à la hauteur de la fenêtre accueillant la vidéo
pour la présence du « controller ».
5.2 Real Media (le fichier est nommé video.rm) :
<table width="75%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- Implémentation de la fenêtre d’affichage -->
<td>
<object id="RVOCX"
classid="CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="320"
height="240">
<param name="rplayer" value="video.rm" />
<param name="CONTROLS" value="ImageWindow" />
<param name="AUTOSTART" value="true" />
<param name="CONSOLE" value="cons" />
<embed src="video.rm" type="audio/x-pn-realaudio-plugin"
width="320"
height="240" controls="ImageWindow" console="cons"
autostart="true">
</embed>
</object>
</td>
</tr>
<tr>
<!-- Implémentation du controller -->
<td>
<object id=”RVOCX”
classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="320"
height="36">
<param name="rplayer" value="video.rm" />
<param name="CONTROLS" value="ControlPanel" />
<param name="AUTOSTART" value="true" />
<param name="CONSOLE" value="cons" />
<embed src="video.rm" type="audio/x-pn-realaudio-plugin"
width="320"
height="36" controls="ControlPanel" console="cons"
autostart="true">
</embed>
</object>
</td>
</tr>
</table>
Comme il a été dit, la fenêtre d’affichage et le « controller » de Real Media sont
deux activeX différents, leur mise en forme est ici assurée par leur insertion
dans un tableau (2 lignes et 1 colonne).
5.3 Windows Media (le fichier est nommé video.wmv) :
<object
classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" width="320"
height="276" id="mediaplayer1">
<param name="filename" value="video.wmv" />
<param name="autostart" value="true" />
<param name="showcontrols" value="true" />
<param name="showstatusbar" value="true" />
<param name="showdisplay" value="false" />
<param name="autorewind" value="true" />
<embed
type="application/x-mplayer2"
pluginspage=
"http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/"
src="video.wmv" width="320" height="276" autostart="true"
filename="
video.wmv" showcontrols="true" showstatusbar="true"
showdisplay="false" autorewind="true">
</embed>
</object>
Même remarque que pour Quicktime, on ajoute cette fois 36 pixels à la
hauteur de la fenêtre (correction de l’aspect ratio avec le « controller»).
6. Insertion du code html : ouverture de la fenêtre aux dimensions de
l’élément
Nous utiliserons la fonction javascript open de l’objet window pour provoquer
l’ouverture des vidéos dans une nouvelle page du navigateur sans barre
d’outils ni menus, et dont les dimensions correspondent à celles du ou des
contrôles ActiveX. Dans le code, les 3 pages s’appellent respectivement
qtime.htm, rmedia.htm et wmedia.htm pour les formats Quicktime , Real
Media et Windows Media.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Movies</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso8859-1">
<script language="JavaScript" type="text/JavaScript">
<!-function MM_openBrWindow(URL, nom, commandes) {
window.open(URL, nom, commandes);
} //-->
</script>
</head>
<body>
<!—lien vers vidéo Quicktime -->
<a href="#"
onClick="MM_openBrWindow('qtime.htm','Movie','toolbar=no,menubar=n
o,width=3
20,height=256')">Voir la vid&eacute;o avec Quicktime</a>
<!—lien vers vidéo Real Media -->
<a href="#"
onClick="MM_openBrWindow('rplay.htm','Movie','toolbar=no,menubar=n
o,width=3
20,height=276')">
Voir la vidéo en 320x240 avec Real Player
</a>
<!—lien vers vidéo Windows Media -->
<a href="#"
onClick="MM_openBrWindow('wmedia.htm','Movie','toolbar=no,menubar=
no,width=
320,height=276')">
Voir la vid&eacute;o avec Windows Media Player
</a>
</body>
Remarques :
1. Les voyelles accentuées sont ici encodées (exemple é = &eacute;).
2. Aucune mise en forme n’est ici prévue, seul le code fonctionnel est présent.
3. On pourrait appeler la fonction javascript window.open() directement après
le onClick des liens.
4. Le lien pour la vidéo en Real dimensionne la page pour accueillir les 2
contrôles (240 + 36 = 276).
7 Flash Vidéo
C’est un format de fichier utilisé sur Internet pour diffuser des vidéos via le
lecteur Adobe Flash Player version 6, 7 et 8 (aussi connu sous le nom
Macromedia Flash Player). Le contenu FLV peut être incorporé aux fichiers
SWF. Ce format est utilisé par Dailymotion et d'autres sites de partage de
vidéos sur Internet (Youtube, etc.).
La génération s’effectue à partir de logiciels de la gamme Adobe (Flash
évidemment, mais il existe des plugins pour After Effect et d’autres logiciels).
On trouve aussi des utilitaires gratuits permettant de convertir dans ce format.
Attention, un fichier FLV ne peut être lu dans une page html qu’à partir d’un
player swf. Il s’agit en fait d’une application Flash dans laquelle le composant
de lecture FLV est intégré.
L’insertion s’effectue selon les mêmes principes que pour les fichiers vidéo précités :
<!-- Begin Flash Video for Progressive download -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.c
ab#version=7,0,0,0" width="320" height="240" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="FlashVars"
value="&skinName=clearSkin_3&streamName=
chicken01&autoPlay=false&autoRewind=false" />
<embed src="FLVPlayer_Progressive.swf"
flashvars="&skinName=clearSkin_3&streamName=
chicken01&autoPlay=false&autoRewind=false" quality="high"
scale="noscale"
width="320" height="240" name="FLVPlayer" salign="LT"
type="application/xshockwaveflash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
<!-- End Flash Video for Progressive Download -->
La vidéo avec HTML 5
Html5 intègre une balise video dédiée.
La balise video affiche une vidéo à partir d'un fichier conteneur, qui peut aussi
inclure le son. C'est un élément très développé avec des attributs pour définir
le ode de fonctionnement et l'apparence.
Mais actuellement elle ne permet pas le plein écran et n'offre donc pas toutes
les possibilités du lecteur Flash.
Balise et attributs
La balise video est reconnue par Firefox, Chrome, Safari, IE9 ou IE avec le
plugin Google Chrome Frame.
<video src="fichier" width="600" height="400" />
Ou avec la balise source:
<video><source src="fichier"></video>
Un panel de contrôle personnalisé peut être ajouté avec un calque:
<div class="video">
<video></video>
<div class="panel"></div>
</div>
On peut définir l'apparence de la barre de contrôle avec une feuille de style et
contrôler le déroulement avec JavaScript.
src
width,
height
L'URL du conteneur de la vidéo.
Les dimensions de l'image.
L'URL d'une image à afficher en
remplacement de la vidéo, en
poster
attendant qu'elle soit disponible. On
utilise une frame de la vidéo.
Ce sont les dimensions originelles de
videoHigh,
l'image. Des attributs en lecture
videoHeig
seule qui sont lus en JavaScript, pour
ht
fournir une information sur la vidéo.
Vaut true ou false, la valeur true
déclenche le chargement en mémoire
de la vidéo en même temps que la
autobuffer
page, une option choisie quand on
suppose qu'elle sera obligatoirement
vue.
Vaut true ou false, la valeur true
autoplay démarre la vidéo quand la page est
chargée.
loop
controls
Vaut true ou false, la valeur true fait
tourner la vidéo en boucle.
Vaut true ou false, la valeur true
indique que la barre de contrôle par
défaut s'affiche, sinon le site définit
sa propre barre.
Assurer la compatibilité
La vidéo doit s'afficher sous lecteur Flash si le navigateur ne supporte pas
HTML5.
Pour ce faire on peut placer le code du lecteur Flash dans le contenu de la
balise: ce code est ignoré sur les navigateur récents, on contraire sur les plus
anciens, ce sont les balises ouvrantes <video> et fermante </video> qui sont
ignorées. De même que la balise <source>.
Exemple:
<video controls>
<source src="mavidéo.ogg" type="video/ogg"/>
<source src="mavidéo.mp4" type="video/mp4"/>
<object src="http://blip.tv/play/AYGLzBmU8hw"
type="application/x-shockwave-flash"
width="500" height="396"
allowscriptaccess="always"
allowfullscreen="true"/>
</video>
Le balise <video> peut aussi devenir compatible avec tout navigateur grâce au
code fourni par html5media.
Vous pouvez télécharger ces scripts, sous licence MIT, et les placer sur votre
site pour ne pas dépendre d'un site extérieur.
Codecs et fichier conteneur
Le codec est l'algorithme de COmpression et DECompression de la vidéo (ou
COdage et DECodage).
La spécification HTML 5 ne prévoit pas de codec vidéo précis faute d'accord sur
la technologie à utiliser. Mais les navigateurs reconnaissent plusieurs codecs:
• VP8 de Google. Open source, il est équivalent en qualité à H.264.
• MPEG 4 est un « standard » avec des implémentations diverses. Parmi
celles-ci, Xvid est open source mais cela n'empêche pas l'existence de
brevets sur le codec.
• H.264 est le résultat d'un groupe de travail (association UITT/ISO/CEIMPEG) et est basé sur MPEG 4 pour les appareils limités et
fournit une haute compression pour une qualité adaptée. Il est utilisé par
Youtube pour la HD et par Blu-Ray.
Mozilla refuse de payer une licence de 5 millions de dollars par an pour ce format dans
lequel Apple et Microsoft sont impliqués et ne supporte donc pas H.264.
• Theora est un codec libre et open source mais ne supporte pas
l'accélération matérielle comme le fait H.264.
Les types de conteneur de fichier vidéos suivants peuvent être utilisés:
•
•
•
•
•
WebM avec le codec VP8.
MPEG 4 avec l'extension .mp4.
Ogg avec l'extension .ogg, pour Theora.
AVI avec l'extension .avi.
Flash video avec l'extension .flv.
• Les codecs de la balise video.
Ogg, WebM, H.264, outils utiles pour les utiliser, notamment dans un
navigateur.
Outils
• Flarevideo. Player open source basé sur la balise video. On peut changer
le thème.
• Video.js. Code JavaScript pour personnaliser le lecteur basé sur la balise
video.
• HTML5video. Code JavaScript qui ajoute la reconnaissance de la balise
<video> aux navigateurs qui ne l'ont pas (comme IE8).
Références et plus
• HTML 5 video. Specification par le W3C.
• Brief history of video compression. Décrit l'évolution des techniques dans
le domaine de la compression vidéo. (Anglais).
• Sublime video reader. Fonctionne avec Chrome 4. Montre un avantage
sur Flash, on peut aller immédiatement à n'importe quelle partie de la
vidéo.
• Rainbow. Un plugin Firefox pour effectuer un enregistrement audio ou
vidéo dans le navigateur.
Exercice à réaliser
A partir des encodages vidéo fournis, réalisez l'implémentation de la vidéo
dans une page web dans les 3 cas (h264, flv et WMV). Attention, la mise en
œuvre d'une vidéo flv nécessite un player flv.