INF04 - 2 Langages et structure du Web

Transcription

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
3
INTÉGRATION D’AUDIO ET DE
VIDÉO
B. Habert 2013
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
5
Il y a des lunes
http://www.youtube.com/watch?
v=7YhTwR5qB3E
B. Habert 2013
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
7
B. Habert 2013
8
•  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
9
B. Habert 2013
10
•  First sounds
http://www.firstsounds.org/sounds/scott.php
B. Habert 2013
11
B. Habert 2013
12
•  Archive.org
http://archive.org/details/
EvolucionDeGrabaciones
B. Habert 2013
13
B. Habert 2013
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
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
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
17
Audio : changements
•  Etat de la spécification HTML5 :
http://www.w3.org/TR/html5/embeddedcontent-0.html#the-audio-element
B. Habert 2013
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
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
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
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
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
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
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
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
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
27
Audio : types MIME
Format
Type MIME
MP3
audio/mp3
Ogg
audio/ogg
Wav
audio/wav
B. Habert 2013
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
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
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
31
Vidéo
•  Solution de repli (fallback)
<video …>
<source …>
…
<source …>
solution de repli
</video>
B. Habert 2013
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
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
34
MISE EN OEUVRE
B. Habert 2013
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
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
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
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
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
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
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
42
Video V1
•  Prenez connaissance des ressources que
vous allez utiliser
–  Accelerometre3G.mp4
–  Accelerometre3G.txt
B. Habert 2013
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
44
Video V1
•  Tester avec les différents navigateurs dont
vous disposez (ce test sera à faire pour
les versions suivantes également)
B. Habert 2013
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
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
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
48

INF04 - 2 Langages et structure du Web

Transcription

Documents pareils

L3 info Techno Web Fiche html5 / css3 Exercice 1 Insérer une

Objectif : stage en tant qu`intégrateur web

Terrine de foie gras maison et sa confiture d`oignons et son bouquet

Comment analyser une vidéo

WEB DESIGN - HTML CSS

compétences à propos expériences j`aime langues formation

fiche technique

Formation Webmaster Avancé : HTML5/CSS3, Responsive

CV au format