HTML5 maintenant partie 3 : multimedia

Jean-Pierre Vincent
Jean-Pierre VincentWeb app expert at braincracking.org
Video
Video
En théorie
<video src="fichier"></video>

✓ IE9
✓ FF3.5
✓ Safari / Chrome 3
✓ Opéra
✓ Iphone, Android
✓ Flash pour les autres
Video
Firefox 3.5
Video
Chrome
Video
IE 9 beta 1
Video
En pratique
Video
 En pratique
● Guerre de formats

   •


  •
Video
 En pratique
● Guerre de formats

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

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

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

   • MP4 / h.264 aujourd'hui
      • Payant si revenus directs
      • Après 2015 ?
   • WebM / VP8 demain ?
      •
      •
Video
 En pratique
● Guerre de formats

   • MP4 / h.264 aujourd'hui
      • Payant si revenus directs
      • Après 2015 ?
   • WebM / VP8 demain ?
      • si Flash le supporte
      •
Video
 En 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
Video
 En 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
Video
En pratique
   Guerre de format
   Implémentations naissantes
✓ Gain
 • Support de certains mobiles
 • Support des 5% sans flash
 • Standardisé et bientôt gratuit
Video
20 librairies !
Idéalement :
  • Pixel-perfect Flash/natif
  • Fullscreen
  • Mobiles supportés
  • Interface changeable

Aucune ne réunit tous ces critères
           bit.ly/lib_video
Video

             ✗ Production

 Sauf si :
● Abaisser ses critères de qualité

● Compatibilité d'abord

● Je m'appelle Youtube
Audio
Audio
En théorie
<audio src="fichier"></video>

✓ IE9
✓ FF3.5
✓ Safari / Chrome
✓ Opéra
✓ Iphone
✓ Flash pour les autres
Audio
    Guerre de format
  • MP3 vs OGG
  • Double encodage
✗ Implémentations naissantes
  • Streaming mal supporté
  • Nombreux bugs (bit.ly/audio_bug)
Audio
Alternatives :

●   Flash

●   IE 6-8 <bgsound>

✗ Quicktime, Real Player, Applet java

            bit.ly/audio_imp
Audio
Intérêt ?

●   Étendre la compatibilité

●   Interface native
Audio
Librairie

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




●Fallback Flash
● Interface HTML/CSS/JS

● Streaming (flash)
Audio


✓ Production
1 of 24

Recommended

HTML5 maintenant partie 2 : APIs by
HTML5 maintenant partie 2 : APIsHTML5 maintenant partie 2 : APIs
HTML5 maintenant partie 2 : APIsJean-Pierre Vincent
1.2K views49 slides
Html5 now light by
Html5 now lightHtml5 now light
Html5 now lightJean-Pierre Vincent
1.3K views94 slides
HTML5 maintenant partie 1 : la sémantique by
HTML5 maintenant partie 1 : la sémantiqueHTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantiqueJean-Pierre Vincent
1.6K views74 slides
10 conseils pour booster les performances de votre site sous WordPress by
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPressAurélien Denis
7.2K views21 slides
Bien débuter dans la conception d'un thème WordPress by
Bien débuter dans la conception d'un thème WordPressBien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressAurélien Denis
5K views20 slides
64 conneries que font les référenceurs avec WordPress by
64 conneries que font les référenceurs avec WordPress64 conneries que font les référenceurs avec WordPress
64 conneries que font les référenceurs avec WordPressAurélien Denis
1.6K views29 slides

More Related Content

What's hot

Web performance - appliquer les règles de base by
Web performance - appliquer les règles de baseWeb performance - appliquer les règles de base
Web performance - appliquer les règles de baseJonathan Buttigieg
2.6K views27 slides
WebExtensions - it's now / c'est maintenant by
WebExtensions - it's now / c'est maintenantWebExtensions - it's now / c'est maintenant
WebExtensions - it's now / c'est maintenantChristophe Villeneuve
368 views41 slides
Comment réussir une migration de site web en seo ? by
Comment réussir une migration de site web en seo ?Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?Patrick Valibus
297 views34 slides
Retours sur le concours Webperf 2010 by
Retours sur le concours Webperf 2010Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Jean-Pierre Vincent
1.8K views58 slides
Etendre le Web avec les Web Components by
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Componentscjolif
1.7K views34 slides
Magento et SEO : le combo parfait pour développer son e-commerce by
Magento et SEO : le combo parfait pour développer son e-commerceMagento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commercePatrick Valibus
423 views37 slides

What's hot(12)

Web performance - appliquer les règles de base by Jonathan Buttigieg
Web performance - appliquer les règles de baseWeb performance - appliquer les règles de base
Web performance - appliquer les règles de base
Jonathan Buttigieg2.6K views
Comment réussir une migration de site web en seo ? by Patrick Valibus
Comment réussir une migration de site web en seo ?Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?
Patrick Valibus297 views
Etendre le Web avec les Web Components by cjolif
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Components
cjolif1.7K views
Magento et SEO : le combo parfait pour développer son e-commerce by Patrick Valibus
Magento et SEO : le combo parfait pour développer son e-commerceMagento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerce
Patrick Valibus423 views
WordPress & WooCommerce, une révolution ? by Aurélien Denis
WordPress & WooCommerce, une révolution ?WordPress & WooCommerce, une révolution ?
WordPress & WooCommerce, une révolution ?
Aurélien Denis4.2K views
Industrialiser votre maintenance sous WordPress by Aurélien Denis
Industrialiser votre maintenance sous WordPressIndustrialiser votre maintenance sous WordPress
Industrialiser votre maintenance sous WordPress
Aurélien Denis13.7K views
Web typographie by mirko
Web typographieWeb typographie
Web typographie
mirko1.4K views
HTML5 et Internet Explorer 9, est-ce réellement compatible? by Frédéric Harper
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
Frédéric Harper681 views

Viewers also liked

Webrtc by
WebrtcWebrtc
WebrtcElwan Ndiaye
4.4K views16 slides
Eurocode 2 Part 3 - Design of concrete Silos & Tanks by
Eurocode 2  Part 3 - Design of concrete Silos & TanksEurocode 2  Part 3 - Design of concrete Silos & Tanks
Eurocode 2 Part 3 - Design of concrete Silos & TanksBenoit Parmentier
7.1K views81 slides
Présentation avis sur les plateformes pétrolières by
Présentation avis sur les plateformes pétrolièresPrésentation avis sur les plateformes pétrolières
Présentation avis sur les plateformes pétrolièresConseil Economique Social et Environnemental
1.3K views23 slides
Tutoriel WiseStamp by
Tutoriel WiseStampTutoriel WiseStamp
Tutoriel WiseStampCEFAC
1K views15 slides
Initiation Webperf : Comprendre, analyser et optimiser les performances web F... by
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Kenny Dits
4.8K views51 slides
Introduction au logiciel de gestion bibliographique Zotero by
Introduction au logiciel de gestion bibliographique ZoteroIntroduction au logiciel de gestion bibliographique Zotero
Introduction au logiciel de gestion bibliographique ZoteroFabienne EL KHOURY
824 views18 slides

Viewers also liked(20)

Eurocode 2 Part 3 - Design of concrete Silos & Tanks by Benoit Parmentier
Eurocode 2  Part 3 - Design of concrete Silos & TanksEurocode 2  Part 3 - Design of concrete Silos & Tanks
Eurocode 2 Part 3 - Design of concrete Silos & Tanks
Benoit Parmentier7.1K views
Tutoriel WiseStamp by CEFAC
Tutoriel WiseStampTutoriel WiseStamp
Tutoriel WiseStamp
CEFAC1K views
Initiation Webperf : Comprendre, analyser et optimiser les performances web F... by Kenny Dits
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Kenny Dits4.8K views
Introduction au logiciel de gestion bibliographique Zotero by Fabienne EL KHOURY
Introduction au logiciel de gestion bibliographique ZoteroIntroduction au logiciel de gestion bibliographique Zotero
Introduction au logiciel de gestion bibliographique Zotero
Fabienne EL KHOURY824 views
JI 2015 atelier ma 4 by SMBS contact
JI 2015 atelier ma 4JI 2015 atelier ma 4
JI 2015 atelier ma 4
SMBS contact1.3K views
Chromium: o navegador que mudou o mundo by Alexandre Teles
Chromium: o navegador que mudou o mundoChromium: o navegador que mudou o mundo
Chromium: o navegador que mudou o mundo
Alexandre Teles968 views
Les Meilleurs Extensions: Top 10 google chrome extensions by Abderrahim Sibari
Les Meilleurs Extensions: Top 10 google chrome extensionsLes Meilleurs Extensions: Top 10 google chrome extensions
Les Meilleurs Extensions: Top 10 google chrome extensions
Abderrahim Sibari1.1K views
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol by chemineebio8
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
chemineebio81K views
Personalizar google chrome y añadir marcadores by Tomás Martí
Personalizar google chrome y añadir marcadoresPersonalizar google chrome y añadir marcadores
Personalizar google chrome y añadir marcadores
Tomás Martí5.2K views
Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools by Iñaki Arenaza
Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevToolsMejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools
Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools
Iñaki Arenaza5.7K views
Limpiar Windows, Internet Explorer y Chrome by Juan Astudillo
Limpiar Windows, Internet Explorer y ChromeLimpiar Windows, Internet Explorer y Chrome
Limpiar Windows, Internet Explorer y Chrome
Juan Astudillo6K views
Sistema operativo google chrome os by Kevin Melgar
Sistema operativo google chrome osSistema operativo google chrome os
Sistema operativo google chrome os
Kevin Melgar8.4K views
Desenvolvimento de Extensões para o Google Chrome by Sérgio Vilar
Desenvolvimento de Extensões para o Google ChromeDesenvolvimento de Extensões para o Google Chrome
Desenvolvimento de Extensões para o Google Chrome
Sérgio Vilar4.2K views

Similar to HTML5 maintenant partie 3 : multimedia

Chap Videodansflash by
Chap VideodansflashChap Videodansflash
Chap VideodansflashPhilippe Ramette Pro
636 views42 slides
Les logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACF by
Les logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACFLes logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACF
Les logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACFcdeacf
2.3K views34 slides
Mioozic backfrommax by
Mioozic backfrommaxMioozic backfrommax
Mioozic backfrommaxChristophe Keromen
342 views88 slides
Synthèse du sondage GOPRO by
Synthèse du sondage GOPROSynthèse du sondage GOPRO
Synthèse du sondage GOPROLibcast SAS
1.8K views10 slides
Montage video by
Montage videoMontage video
Montage videoReseau Informed
1.3K views26 slides
Développer et déployer une application php maintenable by
Développer et déployer une application php maintenableDévelopper et déployer une application php maintenable
Développer et déployer une application php maintenableLeTesteur
2.4K views28 slides

Similar to HTML5 maintenant partie 3 : multimedia(20)

Les logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACF by cdeacf
Les logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACFLes logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACF
Les logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACF
cdeacf2.3K views
Synthèse du sondage GOPRO by Libcast SAS
Synthèse du sondage GOPROSynthèse du sondage GOPRO
Synthèse du sondage GOPRO
Libcast SAS1.8K views
Développer et déployer une application php maintenable by LeTesteur
Développer et déployer une application php maintenableDévelopper et déployer une application php maintenable
Développer et déployer une application php maintenable
LeTesteur2.4K views
Pinpin Team - Le Gaming sur le Web avec Flash by Florian Brochard
Pinpin Team - Le Gaming sur le Web avec FlashPinpin Team - Le Gaming sur le Web avec Flash
Pinpin Team - Le Gaming sur le Web avec Flash
Florian Brochard872 views
W3Café accessibilité : Vidéo web accessible, ça avance !? by Jean-Philippe Simonnet
W3Café accessibilité : Vidéo web accessible, ça avance !?W3Café accessibilité : Vidéo web accessible, ça avance !?
W3Café accessibilité : Vidéo web accessible, ça avance !?
Presentation master by samir
Presentation masterPresentation master
Presentation master
samir835 views
Présentation IMF - PAD fichier juin2013 by Mesclado
Présentation IMF - PAD fichier juin2013Présentation IMF - PAD fichier juin2013
Présentation IMF - PAD fichier juin2013
Mesclado2.1K views
Vehotech Product Sheet Fr by hottierb
Vehotech Product Sheet FrVehotech Product Sheet Fr
Vehotech Product Sheet Fr
hottierb364 views
Créer des composants visuels sans faire de composant by pprem
Créer des composants visuels sans faire de composantCréer des composants visuels sans faire de composant
Créer des composants visuels sans faire de composant
pprem24 views
Photoshop Cs4 — Lisez Moi -imarah.net- by guest07571d
Photoshop Cs4 — Lisez Moi -imarah.net-Photoshop Cs4 — Lisez Moi -imarah.net-
Photoshop Cs4 — Lisez Moi -imarah.net-
guest07571d823 views
Photoshop cs4 lisez-moi by Camaralon
Photoshop cs4   lisez-moiPhotoshop cs4   lisez-moi
Photoshop cs4 lisez-moi
Camaralon570 views
Conference drupal 8 au Forum PHP 2013 à Paris by Chipway
Conference drupal 8 au Forum PHP 2013 à ParisConference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à Paris
Chipway3.3K views
Wygday 2011 - Introduction à HTML5 by wyggio
Wygday 2011 - Introduction à HTML5Wygday 2011 - Introduction à HTML5
Wygday 2011 - Introduction à HTML5
wyggio1.5K views

More from Jean-Pierre Vincent

Mesurer la performance : onload, pages by
Mesurer la performance : onload, pagesMesurer la performance : onload, pages
Mesurer la performance : onload, pagesJean-Pierre Vincent
960 views39 slides
Les Performance de rendu sur mobile by
Les Performance de rendu sur mobileLes Performance de rendu sur mobile
Les Performance de rendu sur mobileJean-Pierre Vincent
2.2K views43 slides
La performance sur mobile by
La performance sur mobileLa performance sur mobile
La performance sur mobileJean-Pierre Vincent
1.9K views45 slides
Performances web - quoi de neuf ? by
Performances web - quoi de neuf ?Performances web - quoi de neuf ?
Performances web - quoi de neuf ?Jean-Pierre Vincent
5.4K views24 slides
Accélération des pages Web : les bases en exemple by
Accélération des pages Web : les bases en exempleAccélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exempleJean-Pierre Vincent
1.7K views45 slides
Introduction à la webperf by
Introduction à la webperfIntroduction à la webperf
Introduction à la webperfJean-Pierre Vincent
1.9K views57 slides

More from Jean-Pierre Vincent(15)

Accélération des pages Web : les bases en exemple by Jean-Pierre Vincent
Accélération des pages Web : les bases en exempleAccélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Jean-Pierre Vincent1.7K views
Techniques accélération des pages web #kiwiparty by Jean-Pierre Vincent
Techniques accélération des pages web #kiwipartyTechniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwiparty
Jean-Pierre Vincent5.1K views
Fondamentaux portée - contexte - function ms tech days by Jean-Pierre Vincent
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
Jean-Pierre Vincent1.3K views
Inclure du Javascript de manière performante by Jean-Pierre Vincent
Inclure du Javascript de manière performanteInclure du Javascript de manière performante
Inclure du Javascript de manière performante
Jean-Pierre Vincent1.9K views

HTML5 maintenant partie 3 : multimedia