Audio et video riches sur le web

• He's dead, Jim
• La grande guerre des codecs
• <source media="">
• WebVTT
• MediaSource
• Web Audio API
• WebRTC
• Composabilité

• Plus de Flash du tout sur mobile
• Click-to-play pour tout sauf Adobe Flash, dernière version
• Adobe investit dans le Web

• Video et Audio: H.264/AAC partout (sauf OSX, dans Firefox 33, mi-octobre 2014)
• Audio: Opus !
  • Mieux que tout le reste
  • Royalty-free
  • MTI pour WebRTC
• Le futur? VP9, HEVC
• Le futur du futur ? Daala !

• Que des API Web standards, ayant une spécification au W3C ou whatwg
• Pas de bibliothèque
• Peu de JavaScript, juste de la "glue" entre les APIs

• Responsive video sans JavaScript
• Selection en fonction du medium (print/screen), dimensions, densité de pixel, etc.

<video controls> 
  <source src="retina.webm" media="(min-resolution: 300dpi)"> 
  <source src="desktop.webm" media="(min-device-width: 769px)"> 
  <source src="mobile.webm" media="(max-device-width: 769px)"> 
</video> 
      

• Plusieurs pistes possible (différentes langues, sous-titres pour malentendants)
• Positionnement abitraire
• Différentiation des voix

        <video controls preload=auto> 
          <source src="video.webm"> 
          <track kind="subtitles" src="subs.vtt" default> 
        </video> 
      

• Découple la lecture d'une <video> de la manière de l'obtenir
• Adaptation de la qualité de la video à la bande passante
• Insertion dynamique de contenu sans coupures
• Permet d'implémenter DASH/HLS en javascript, et bien d'autre choses encore

Lisons la spécification:

[...] Une API JavaScript de haut niveau pour produire et traiter de l'audio dans des applications Web. Le paradigme premier est celui d'un graph de routage audio, dans lequel des objets AudioNode sont connectés ensembles pour définir le rendu audio final.

• Magie à tous les étages
• Audio/Video/Data pair à pair
• Basse latence
• Chiffrage
• Adaptation de la qualité en fonction du réseau et CPU disponible
• NAT traversal, Firewall punching

• Paul Adenot
• padenot@mozilla.com
• @padenot sur Twitter
• #media on irc.mozilla.org (en anglais)
• bugzilla.mozilla.org quand ça ne marche pas (en anglais)
• Slides: http://padenot.github.io/talk-rich-media