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 Real Media Quicktime wmv rm 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=iso- 8859-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é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éo avec Windows Media Player </a> </body> Remarques : 1. Les voyelles accentuées sont ici encodées (exemple é = é). 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 poster videohigh, videoheig ht autobuffer autoplay 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 attendant qu'elle soit disponible. On utilise une frame de la vidéo. Ce sont les dimensions originelles de l'image. Des attributs en lecture seule qui sont lus en JavaScript, pour 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 page, une option choisie quand on suppose qu'elle sera obligatoirement vue. Vaut true ou false, la valeur true 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 UIT- T/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. Outils Les codecs de la balise video. Ogg, WebM, H.264, outils utiles pour les utiliser, notamment dans un navigateur. 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.