HTML5 maintenant partie 3 : multimedia

24
Video

description

3ème volet de la présentation HTML5 maintenant : bilan de ce qu'il est possible de faire avec la vidéo et l'audio HTML5 et leurs fallbacks

Transcript of HTML5 maintenant partie 3 : multimedia

Page 1: HTML5 maintenant partie 3 : multimedia

Video

Page 2: HTML5 maintenant partie 3 : multimedia

VideoEn théorie<video src="fichier"></video>

✓ IE9 ✓ FF3.5 ✓ Safari / Chrome 3 ✓ Opéra ✓ Iphone, Android ✓ Flash pour les autres

Page 3: HTML5 maintenant partie 3 : multimedia

VideoFirefox 3.5

Page 4: HTML5 maintenant partie 3 : multimedia

VideoChrome

Page 5: HTML5 maintenant partie 3 : multimedia

VideoIE 9 beta 1

Page 6: HTML5 maintenant partie 3 : multimedia

VideoEn pratique

Page 7: HTML5 maintenant partie 3 : multimedia

VideoEn pratique

● Guerre de formats•

Page 8: HTML5 maintenant partie 3 : multimedia

VideoEn pratique

● Guerre de formats• MP4 / h.264 aujourd'hui• •

Page 9: HTML5 maintenant partie 3 : multimedia

VideoEn pratique

● Guerre de formats• MP4 / h.264 aujourd'hui• Payant si revenus directs•

Page 10: HTML5 maintenant partie 3 : multimedia

VideoEn pratique

● Guerre de formats• MP4 / h.264 aujourd'hui• Payant si revenus directs• Après 2015 ?

Page 11: HTML5 maintenant partie 3 : multimedia

VideoEn pratique

● Guerre de formats• MP4 / h.264 aujourd'hui• Payant si revenus directs• Après 2015 ?

• WebM / VP8 demain ?• •

Page 12: HTML5 maintenant partie 3 : multimedia

VideoEn pratique

● Guerre de formats• MP4 / h.264 aujourd'hui• Payant si revenus directs• Après 2015 ?

• WebM / VP8 demain ?• si Flash le supporte•

Page 13: HTML5 maintenant partie 3 : multimedia

VideoEn pratique

● Guerre de formats• MP4 / h.264 aujourd'hui• Payant si revenus directs• Après 2015 ?

• WebM / VP8 demain ?• si Flash le supporte• si support hardware

Page 14: HTML5 maintenant partie 3 : multimedia

VideoEn pratique

⚠ Guerre de format● Implémentations au 15/10/2010

✗ plein écran via JS✗ interface sur du plein écran✗ se déplacer dans la vidéo✗ accélération matérielle

Page 15: HTML5 maintenant partie 3 : multimedia

VideoEn pratique

⚠ Guerre de format ⚠ Implémentations naissantes ✓ Gain• Support de certains mobiles• Support des 5% sans flash• Standardisé et bientôt gratuit

Page 16: HTML5 maintenant partie 3 : multimedia

Video20 librairies !Idéalement :• Pixel-perfect Flash/natif• Fullscreen• Mobiles supportés• Interface changeable

Aucune ne réunit tous ces critèresbit.ly/lib_video

Page 17: HTML5 maintenant partie 3 : multimedia

Video

✗ Production

Sauf si : ● Abaisser ses critères de qualité● Compatibilité d'abord● Je m'appelle Youtube

Page 18: HTML5 maintenant partie 3 : multimedia

Audio

Page 19: HTML5 maintenant partie 3 : multimedia

AudioEn théorie<audio src="fichier"></video>

✓ IE9 ✓ FF3.5 ✓ Safari / Chrome ✓ Opéra ✓ Iphone ✓ Flash pour les autres

Page 20: HTML5 maintenant partie 3 : multimedia

Audio

⚠ Guerre de format• MP3 vs OGG• Double encodage

✗ Implémentations naissantes• Streaming mal supporté• Nombreux bugs (bit.ly/audio_bug)

Page 21: HTML5 maintenant partie 3 : multimedia

AudioAlternatives :

● Flash

● IE 6-8 <bgsound>

✗ Quicktime, Real Player, Applet java

bit.ly/audio_imp

Page 22: HTML5 maintenant partie 3 : multimedia

AudioIntérêt ?

● Étendre la compatibilité

● Interface native

Page 23: HTML5 maintenant partie 3 : multimedia

AudioLibrairie

● Jplayer : bit.ly/lib_audio1● SoundManager2 : bit.ly/lib_audio2

●Fallback Flash● Interface HTML/CSS/JS● Streaming (flash)

Page 24: HTML5 maintenant partie 3 : multimedia

Audio

✓ Production