INF04 - 2 Langages et structure du Web
Transcription
INF04 - 2 Langages et structure du Web
INF04 - 2 Langages et structure du Web Benoît Habert Séance 2 • Retour sur le passage HTLM4 / HTML5 (visualisation) • L’intégration d’éléments audio et vidéo – Situation en HTML4 – Apports d’HTML5 • Ce qui ne sera pas vu – le support aux anciens navigateurs via HTML5 (appel aux plugins ou téléchargement) – Les contrôles fins en JavaScript B. Habert 2013 Langages du Web - HTML5 2 2 RETOUR SUR LA STRUCTURATION B. Habert 2013 Langages du Web - HTML5 2 3 INTÉGRATION D’AUDIO ET DE VIDÉO B. Habert 2013 Langages du Web - HTML5 2 4 Il y a des lunes • Dans l’archive RessourcesHTML5-2, prenez connaissance, dans l’ordre, de – 1860-Scott-Au-Clair-de-la-Lune.mp3 – PhonautographeScottDeMartinville.jpg – DurDesirDeDurer.docx B. Habert 2013 Langages du Web - HTML5 2 5 Il y a des lunes http://www.youtube.com/watch? v=7YhTwR5qB3E B. Habert 2013 Langages du Web - HTML5 2 6 Complexité antérieure • Page Wikipedia (en) sur le plus vieil enregistrement au monde : http://en.wikipedia.org/wiki/ Au_clair_de_la_lune B. Habert 2013 Langages du Web - HTML5 2 7 Complexité antérieure B. Habert 2013 Langages du Web - HTML5 2 8 Complexité antérieure • Futura-techno http://www.futura-sciences.com/fr/news/t/ technologie-1/d/au-clair-de-la-lune-ecoutezle-plus-vieil-enregistrement-sonore-dumonde_15096/ B. Habert 2013 Langages du Web - HTML5 2 9 Complexité antérieure B. Habert 2013 Langages du Web - HTML5 2 10 Complexité antérieure • First sounds http://www.firstsounds.org/sounds/scott.php B. Habert 2013 Langages du Web - HTML5 2 11 Complexité antérieure B. Habert 2013 Langages du Web - HTML5 2 12 Complexité antérieure • Archive.org http://archive.org/details/ EvolucionDeGrabaciones B. Habert 2013 Langages du Web - HTML5 2 13 Complexité antérieure B. Habert 2013 Langages du Web - HTML5 2 14 Avant HTML5 • Nécessité de plugins externes (Flash, Quicktime, Silverlight) pour afficher des vidéos • Situation identique pour l’audio • Plusieurs formats (évolution) • Production de plusieurs versions en fonction du support par les navigateurs B. Habert 2013 Langages du Web - HTML5 2 15 Anciens lecteurs audio • Quicktime : http://en.wikipedia.org/wiki/QuickTime • Windows Media Player : http://msdn.microsoft.com/en-us/library/ ff819508(v=VS.85).aspx • Real Audio : http://fr.wikipedia.org/wiki/RealAudio B. Habert 2013 Langages du Web - HTML5 2 16 Vidéo : changements • Etat de la spécification HTML5 : http://www.w3.org/TR/html5/embeddedcontent-0.html#the-video-element B. Habert 2013 Langages du Web - HTML5 2 17 Audio : changements • Etat de la spécification HTML5 : http://www.w3.org/TR/html5/embeddedcontent-0.html#the-audio-element B. Habert 2013 Langages du Web - HTML5 2 18 Audio/Vidéo • Versions minimalistes – Hypothèse que le navigateur va restituer <audio src=‘fichier son’ controls=‘controls’/> – Si le navigateur ne restitue pas <audio src=‘fichier son’ controls=‘controls’> Le navigateur ne supporte pas la balise audio d’HTML5 </audio> B. Habert 2013 Langages du Web - HTML5 2 19 Audio/Vidéo • Attributs partagés – controls : met en place une interface minimale (lecture, pause, volume, temps écoulé) – autoplay : démarrage automatique – loop : lecture en boucle – preload • none • auto • metadata B. Habert 2013 Langages du Web - HTML5 2 20 Audio/Vidéo • Structure commune – Plusieurs formats sont possibles et essayés dans l’ordre <audio controls=‘controls’> <source src=‘fichier 1’ /> … <source src=‘fichier k’ /> </audio> B. Habert 2013 Langages du Web - HTML5 2 21 Audio/Vidéo • Elément source – Attribut type : type MIME valide (et spécifiant éventuellement le(s) codec(s) utilisés) <source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2 » ’ /> B. Habert 2013 Langages du Web - HTML5 2 22 Audio/Vidéo • Structure commune – Plusieurs pistes textuelles peuvent être fournies <audio controls=‘controls’> <track src=‘fichier 1’ /> … <track src=‘fichier k’ /> </audio> B. Habert 2013 Langages du Web - HTML5 2 23 Audio/Vidéo • Piste textuelle : <track> – Attribut src obligatoire et associé à une valeur – Attribut kind • subtitles • captions • descriptions : alternative pour synthèse de la parole • chapters : pour naviguer dans le fichier son/vidéo • metadata : pour usage « machinal », pas humain B. Habert 2013 Langages du Web - HTML5 2 24 Audio/Vidéo • Piste textuelle : <track> (suite) – Attribut srclang obligatoire quand kind=‘subtitles’ – Attribut label pour indiquer à l’utilisateur le rôle de la piste B. Habert 2013 Langages du Web - HTML5 2 25 Audio/Vidéo • Format : WebVTT format (Web Video Text Tracks) http://dev.w3.org/html5/webvtt/ <track kind=‘subtitles’ src=‘brave.fr.vtt’ srclang=‘fr’ label="français"> • Epaulement pour utiliser <track> http://www.html5rocks.com/en/tutorials/ track/basics/ B. Habert 2013 Langages du Web - HTML5 2 26 Types MIME • Les déclarations de types Mime dans les éléments source sont des gardefous – Un navigateur sait ne pas traiter tel type – Il sait pouvoir traiter tel type, mais pas forcément ses « réglages » <source src='video1.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2" '> <source src='video2.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" '> B. Habert 2013 Langages du Web - HTML5 2 27 Audio : types MIME Format Type MIME MP3 audio/mp3 Ogg audio/ogg Wav audio/wav B. Habert 2013 Langages du Web - HTML5 2 28 Vidéo • L’attribut poster de l’élément video permet d’associer une image qui est affichée tant que le visionnement de la vidéo n’est pas entamé • Longueur et largeur sont adaptés à la taille du contenu multimédia mais ils sont ajustables (attributs width et height de l’élément video) B. Habert 2013 Langages du Web - HTML5 2 29 Vidéo • Autres attributs de l’élément video – audio : avec la valeur muted, désactive le son – loop – preload : le chargement commence au chargement de la page, et non quand l’utilisateur veut utiliser la vidéo B. Habert 2013 Langages du Web - HTML5 2 30 Vidéo • Formats vidéo : conteneurs associant des codecs pour la vidéo et pour le son, avec des niveaux de compression et de qualité variant • Formats – Ogg (Chrome, Firefox, Opera) – MP4 (Safari, IE, Android) • Vidéo : H.264 • Son : AAC – WebM (Google depuis 2010) B. Habert 2013 Langages du Web - HTML5 2 31 Vidéo • Solution de repli (fallback) <video …> <source …> … <source …> solution de repli </video> B. Habert 2013 Langages du Web - HTML5 2 32 Vidéo • Solution de repli avec FlowPlayer, lecteur vidéo Flash open source sous GPL • NB : il faut donner la bonne adresse sur le site de FlowPlayer B. Habert 2013 Langages du Web - HTML5 2 33 Vidéo <object width="320" height="180" type="application/x-stockwave-flash" data="flowplayer-3.2.7.swf"> <param name="movie" value="flowplayer-3.2.7.swf" /> <param name="allowfulscreen" value="true" /> <param name="flashvars" value=‘config{"clip": {"url": "video1.mp4", "autoPlay"=false "autoBuffering"=true}}’ /> </object> B. Habert 2013 Langages du Web - HTML5 2 34 MISE EN OEUVRE B. Habert 2013 Langages du Web - HTML5 2 35 Audio V1 • Insérer dans un document HTML minimal nommé AudioV1.html (en copiant sous ce nom DocumentHTML5Minimal.html) la balise audio dans sa version minimale pour pouvoir lire 1860-Scott-Au-Clair-dela-Lune.mp3 B. Habert 2013 Langages du Web - HTML5 2 36 Audio V1 • Donner un titre pour le navigateur : Audio V1 • Tester avec les différents navigateurs dont vous disposez (ce test sera à faire pour les versions suivantes également) B. Habert 2013 Langages du Web - HTML5 2 37 Audio V2 • Copier AudioV1.html en AudioV2.html (et changer le titre pour le navigateur – idem pour V3 et V4) • Ajouter un message pour le cas où le navigateur ne sait pas traiter la balise audio B. Habert 2013 Langages du Web - HTML5 2 38 Audio V3 • Copier AudioV2.html en AudioV3.html • Utiliser un convertisseur (cf. transparent suivant) pour obtenir des versions du fichier son correspondant aux types MIME Wav et Ogg • Modifier la balise audio pour que les versions dont vous disposez soient essayées dans l’ordre souhaité B. Habert 2013 Langages du Web - HTML5 2 39 Audio • Conversions – Encodeur Open Source Audacity (Ogg Vorbis et MP3) http://audacity.sourceforge.net – FFMPEG : Outil en ligne de commande pour convertir des fichiers audio ou vidéo http://ffmpeg.org/about.html B. Habert 2013 Langages du Web - HTML5 2 40 Audio V4 • Copier AudioV3.html en AudioV4.html • Il s’agit d’intégrer dans la page les matériaux dont vous disposez – Le titre sera Dur désir de durer – Vous intègrerez le texte en enlevant le lien HTML mentionné tout au début – Vous ajouterez une figure contenant le fichier image B. Habert 2013 Langages du Web - HTML5 2 41 Audio V4 – Pour cette figure • Un lien (que vous testerez) via l’image vers le site http://www.futura-sciences.com/fr/news/t/ technologie-1/d/au-clair-de-la-lune-ecoutez-le-plusvieil-enregistrement-sonore-du-monde_15096/ • La légende contiendra – La légende actuelle (en utilisant l’élément <em> pour restituer correctement le titre d’ouvrage et la mention in – L’élément permettant de déclencher la lecture B. Habert 2013 Langages du Web - HTML5 2 42 Video V1 • Prenez connaissance des ressources que vous allez utiliser – Accelerometre3G.mp4 – Accelerometre3G.txt B. Habert 2013 Langages du Web - HTML5 2 43 Video V1 • Insérer dans un document HTML minimal nommé VideoV1.html la balise video dans sa version minimale pour pouvoir lire Accelerometre3G.mp4 • Donner un titre pour le navigateur : Video V1 • Utilisez l’attribut poster pour mettre une image d’accueil (ScottAuClairDeLaLuneCourbe.png) B. Habert 2013 Langages du Web - HTML5 2 44 Video V1 • Tester avec les différents navigateurs dont vous disposez (ce test sera à faire pour les versions suivantes également) B. Habert 2013 Langages du Web - HTML5 2 45 Video V2 • Copier VideoV1.html en VideoV2.html • Changer le titre pour le navigateur (même chose ensuite pour la V3) • Changez le mode d’accès au fichier video : de l’attribut src de l’élément video à un élément source enchâssé (en veillant à donner la valeur correcte à l’attribut type) B. Habert 2013 Langages du Web - HTML5 2 46 Video V3 • Copier VideoV2.html en VideoV3.html • Lire les informations pour utiliser <track>, transparents et http://www.html5rocks.com/en/tutorials/ track/basics/ • Objectif : aligner ce qui est dit (Accelerometre3G.txt) avec la vidéo B. Habert 2013 Langages du Web - HTML5 2 47 Video V3 • Démarche – Créer Accelerometre3G-sous-titre.vtt en utilisant les indications fournies et le modèle 1860-Scott-Au-Clair-de-la-Lune-sous-titres.vtt – Intégrer et ajustez l’élément track utilisant ces sous-titres (l’attribut default semble nécessaire) – Tester • Pour Google en particulier : ouverture de fichier / appel au serveur local B. Habert 2013 Langages du Web - HTML5 2 48