Audio et video riches sur le web

Présenter du contenu audio et video riche sur le web

(ou, aller au delà d'<audio> et <video>)

High-five at the Mozilla Festival!

Sommaire

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

He's dead, Jim

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

La grande guerre des codecs

  • 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 !

Sans les mains

  • 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

<source> et Media Queries

Demo
  • 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> 
      

WebVTT (Video Text Track)

WebVTT demo
  • 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> 
      

MediaSource

Demo sur YouTube
  • 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

Web Audio, en une phrase

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.
http://webaudio.github.io/web-audio-api/index.html#abstract

Web Audio, démo

Web Audio Playground, par Chris Wilson, Google, éditeur de la spécification

WebRTC

https://opentokrtc.com/padenot
  • 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

Composabilité

Questions ?

Merci