c'est là que je travaille

Mettons-nous en situation

Nous souhaitons diffuser

  • Une chanson de Francis Lalanne
  • Sur le web
  • Pour de multiples devices

Souvenez-vous

L'époque des players Flash
MySpace, Deezer, Qobuz,
JWPlayer, Jamendo, Dewplayer (de moi)

  • Flash a quasiment toujours permis
    l'export MP3 dans les fichiers SWF
  • Développés en ActionScript
  • Difficiles à personnaliser
    car la source est compilée
Flash ? Hum...
Steve Jobs

Flash

  • Reste propriétaire et peu accessible
  • N'est pas supporté par les mobiles & tablettes
  • N'est pas responsive
    (ne s’ajuste pas - ou très peu - au média)
  • N'a plus la cote (comme Francis)

Aujourd'hui nous avons

  • HTML5 <audio>
  • SVG pour remplacer le côté vectoriel de Flash
    (on peut en produire avec Inkscape ou Illustrator)
  • JavaScript pour le code
  • Media Queries CSS pour s'adapter au matériel

Osons

Les technologies à disposition

HTML5 Audio

Quoi de plus simple ?

Une balise et quelques attributs.

<audio src="bwah.mp3" controls>

HTML5 Audio

Quoi de plus simple ?

Sans controls : invisible.

<audio src="bwah.mp3">

rien

HTML5 Audio

Quoi de plus simple ?

Initialisation par JavaScript (sans balise HTML).

var monlecteur = new Audio();
monlecteur.src = 'bwah.mp3';
monlecteur.play();

rien

Support de HTML5 audio

Parce qu'on est en 2014 tout de même

desktop mobile/tablette
Internet Explorer910
Firefox3.529
Chrome435 (et Android 2.3)
Safari44 (iOS)
Opera10.511
source: caniuse.com / Visiteur du futur si tu relis cette slide dans 5 ans, savoure ton bonheur

SVG

Ce dessin n'est pas de moi

SVG

Format d'image vectoriel écrit en XML

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    circle:hover {fill-opacity:0.5;}
  </style>
  <g style="fill-opacity:0.7;">
    <circle cx="9cm" cy="3cm" r="100" style="fill:#FBC935;" transform="translate(0,50)" />
    <circle cx="9cm" cy="3cm" r="100" style="fill:#5F85C5;" transform="translate(70,150)" />
    <circle cx="9cm" cy="3cm" r="100" style="fill:#AACD46;" transform="translate(-70,150)" />
  </g>
</svg>

SVG / bitmap

Enlarge my bitmap

SVG Bitmap
Pour la présentation et éviter un lissage peu parlant j'ai utilisé image-rendering: -moz-crisp-edges sous Firefox

Support de SVG

desktop mobile/tablette
Internet Explorer910
Firefox3oui
Chrome4oui (et depuis Android 3)
Safari3.23.2 (iOS)
Opera910
source: caniuse.com

Inclusion de SVG dans HTML

1/3

Par l'élément <object>

<object type="image/svg+xml" data="pepin.svg" width="100" height="100"></object>

Permet un fallback (une alternative) si SVG n'est pas reconnu.

Inclusion de SVG dans HTML

2/3

Par la vénérable <img>

<img src="pepin.svg" width="100" height="100">

Presque aussi bien supporté.

Inclusion de SVG dans HTML

3/3

En-ligne dans le code HTML avec la balise <svg>

<!DOCTYPE html>
<html>
  <body>
    <svg id="cercles" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle id="cerclevert" cx="50" cy="50" r="50" fill="#A4BA25" />
      <circle id="cerclenoir" cx="50" cy="50" r="20" fill="black" />
    </svg>
  </body>
</html>

Allons-y

Les mains dans le code et les pixels

SVG par Inkscape

On peut y concevoir graphiquement notre lecteur.

SVG et id dans Inkscape

Inkscape permet de coller directement des attributs id aux éléments SVG.

Cela va permettre de nommer les éléments.

SVG et cliquabilité

On pourrait utiliser la propriété cursor:pointer mais cela n'agit que sur l'apparence de la souris (faux lien).

Solution : utiliser de vrais liens <a> autour des formes grâce au namespace xlink  ajouté à SVG.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>
    <a xlink:href="#" target="_blank">
      <path style="fill:#4e9a06" d="M 24,15 0,30 0,0" id="btnplay" />
    </a>
  </g>
</svg>

SVG et Media Queries

On ajoute une balise <style>, et c'est kiwiparti.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <path style="fill:#204a87;" d="M 24,15 0,30 0,0" id="btnplay" />
    <rect style="fill:#204a87;" width="30" height="30" x="30" y="0" id="btnstop" />
  </g>
<style>
@media screen and (max-width: 30px) {
  /* Mon bouton stop sera masqué sous 30 pixels de largeur */
  #btnstop {
    display:none;
  }
}
</style>
</svg>

SVG et Media Queries

Live testing

Dimensions ajustables à la demande

Largeur : 300px

(SVG avec <object> dont on modifie la largeur width)

SVG et Media Queries

Tailles différentes dans le code HTML (width)
interprétation des Media Queries internes à SVG

<object type="image/svg+xml" data="playpausestop.svg" width="100" height="100"></object>

<object type="image/svg+xml" data="playpausestop.svg" width="60" height="100"></object>

<object type="image/svg+xml" data="playpausestop.svg" width="30" height="100"></object>

SVG et Media Queries

@media (max-width: 29px) {
  #btnplay {
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@media (min-width: 30px) {
  #btnplay {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

Largeur : 30px

SVG et Media Queries

@media (max-width: 99px) {
  #btnstop {
    display:none;
  }
}

@media (max-width: 59px) {
  #btnpause {
    display:none;
  }

Largeur : 100px

Mais on aimerait bien conserver stop et faire disparaître pause en premier.

SVG et Media Queries

@media (max-width: 59px) {
  #btnstop { display:none; }
}
@media (max-width: 99px) {
  #btnpause { display:none; }
  #btnstop {
    -ms-transform: translate(-40px,0);
    -webkit-transform: translate(-40px,0);
    transform: translate(-40px,0);
  }
}

/* Fix d'un bug de Chrome... */
@media (min-width: 100px) {
  #btnstop {
    -ms-transform: translate(0,0);
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

Largeur : 100px

SVG "Responsive" dans Illustrator

Il n'y a qu'une conséquence sur les dimensions width et height de l'élément racine <svg>

SVG, Media Queries, IE et CSS transform

Mais...

La transformation CSS dans SVG ne fonctionne pas avec Internet Explorer (même version 11).

SVG et Media Queries

À cause d'IE, nous devons donc ici restreindre nos ambitions à display:none, avec des éléments dupliqués et superposés...

Largeur : 100px

Il y a également possibilité d'utiliser JavaScript pour agir sur les attributs SVG (par exemple transform="") et déplacer les éléments (mais c'est moins beau).

JavaScript dans SVG

On peut ajouter du code JavaScript dans SVG. Démo :

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <path style="fill:#204a87;" d="M 24,15 0,30 0,0" id="btnplay" />
  </g>
<script type="text/javascript"><![CDATA[
var btnplay = document.getElementById('btnplay');
btnplay.setAttribute('class','active');
btnplay.addEventListener('click',lecture);
function lecture() {
  var monlecteur = new Audio();
  monlecteur.src = "bwah.mp3";
  monlecteur.play();
}
]]></script>
</svg>

SVG et paramètres

On peut passer des paramètres à un fichier SVG inclus dans HTML.

<object type="image/svg+xml" data="player.svg?audio=bwah.mp3"
  width="100" height="30"></object>

Dans le fichier SVG :

var params = document.URL.split("?")[1].split("&");
for(i=0;i<params.length;i++) {
  var param = params[i].split("=");
  if(param[0]=="audio") audiosource = param[1];
}

Barre de progression

Également par JavaScript

var progress_width = 100; // Par exemple 100 pixels de large
monaudio.addEventListener('timeupdate',function(e) {
  var ratio = this.currentTime/this.duration;
  if(!isNaN(ratio)) {
    document.getElementById('progress').setAttribute('width',ratio*progress_width);
  }
});

Un événement d'audio à surveiller : timeupdate

Deux propriétés : currentTime (temps écoulé) et duration (temps total)

SVG c'est un peu magique

Mettons tout cela ensemble

  • JavaScript (dans SVG)
    • pour piloter HTML5 Audio
      (play, pause)
    • pour manipuler les attributs SVG de l'interface
      (classes, transformations, dimensions)
  • Media Queries (dans SVG)
    • pour afficher/masquer les éléments selon l'espace disponible
    • pour changer d'autres propriétés de style si nécessaire (opacité, remplissage, dimensions)

Tests et démos

Même pas peur

Tests et démos

Et bien, vous les avez déjà vues sur cette présentation !

Mais si vous insistez...

Navigateurs de bureauOK
iPad miniOK
Nexus 5 / Nexus 7OK
iPhoneOK
Microsoft SurfaceOK
Firefox OSOK

Fallback extrême

Pour les anciens navigateurs ne reconnaissant pas <audio> ?

Par exemple... Internet Explorer 8 (2.8% France)

Il est possible de "sortir" du SVG (interprété par un polyfill ?) pour piloter un lecteur Flash "invisible" par l'intermédiaire de JavaScript

... Non Ouch !

Accessibilité et SVG

Recommandations

  • Le code SVG en-ligne (<svg>) est plus accessible
  • L'élément SVG <text> est bien accessible
  • Utilisez <title> et <desc> (à compléter par un zeste de aria-labelledby et d'attribut role)
  • Les éléments interactifs de SVG peuvent recevoir le focus clavier, mais l'attribut focusable combiné à tabindex n'est pas très bien reconnu encore (c'est du SVG 2.0)

Accessibilité et SVG

Édition rapide avec Inkscape

Ces propriétés renseignent les balises <title> (titre) et <desc> (description)

Perspectives

  • Ajouter un contrôle du volume
  • Codecs sans codecs propriétaires avec ORBX.js ?
    Construit avec JavaScript + WebGL, pas de royalties, annoncé meilleur que H.264
  • Utiliser l'API Web Audio pour afficher un equalizer
  • Utiliser du SVG animé

Et pour la vidéo ?

Pas si différent de l'audio. Il y a "juste" une surface d'affichage en plus à réserver dans le document, et l'API de contrôle reste la même.

<video id="mavideo" width="1337" height="642">
document.getElementById('mavideo').play();

Capture vidéo

Capture vidéo

Réalisée le jour de l'ouverture des inscriptions pour la KiwiParty

<Merci!>

Bientôt sur www.dewplayer.fr