Balise video et iOS

Jusqu'il y a peu le lancement d'un fichier audio ou vidéo sur iOS nécessitait une action de l'utilisateur.
Impossible de démarrer automatiquement une musique, un bruitage ou une animation sans son autorisation.
Sur iPhone, impossible de visualiser un film sans qu'il passe automatiquement en plein écran, difficile donc de réaliser des applications Web incorporant des animations …

Mais fort heureusement tout cela a changé !

Depuis iOS 8 Safari supporte un nouvel attribut : preload="metadata" il permet au navigateur de connaitre la durée, les dimensions, le poids du fichier et le nombre de pistes du fichier.

Avec iOS 10 les fichiers vidéo silencieux (sans son) vont pouvoir s'exécuter automatiquement et ne pas passer en plein écran sur iPhone. C'est peut être la recrudescence des Gifs animées qui a poussé Apple à entrebâiller la porte.
Car une Gif animée peut être très lourde alors que les compresseurs vidéo (H264) réduisent drastiquement la taille des animations.
Remplaçons donc toutes ses Gif animées par des fichiers vidéo bien plus légers et plus économes.

De nouveaux attributs permettent enfin de modifier le comportement des fichiers vidéos.

<video autoplay> autorise le démarrage d'un film automatiquement sans intervention de l'utilisateur si le film est visible à l'écran, si il ne contient pas de piste audio ou si les pistes audio ne sont pas activées.

<video playsinline> désactive le passage forcé en plein écran.


<video autoplay muted> Permet de démarrer un film automatiquement si il contient une ou plusieurs pistes audio …

Attention à l'attribut playsinline !
Celui-ci a été récemment approuvé par le World Wide Web Consortium, aussi pour plus de compatibilité, il est fortement d'utiliser les deux attributs (celui de Web-kit et le nouveau) dans cet ordre :
webkit-playsinline playsinline

Exemples :

Cet exemple permet de démarrer le film automatiquement sans intervention de l'utilisateur et empêche le passage en plein écran sur l'iPhone.
<video autoplay loop muted playsinline>
  <source src="image.mp4">
  <source src="image.webm">
  <img src="image.gif">
</video>

Dans cet exemple plus sophistiqué, si le navigateur ne supporte pas le format mp4, le code remplacera automatiquement le fichier mp4 par une image Gif
<video autoplay loop muted playsinline>
  <source src="image.mp4">
  <source src="image.webm" onerror="fallback(parentNode)">
  <img src="image.gif">
</video>
<div>function fallback(video)
{
  var img = video.querySelector('img');
  if (img)
    video.parentNode.replaceChild(img, video);
}</div>

Si la conception de votre page nécessite un comportement différent quand la lecture en ligne est autorisée et pour la lecture en plein écran, utilisez -webkit-video-playable-inline media query
<div id="either-gif-or-video">
  <video src="image.mp4" autoplay loop muted playsinline></video>
  <img src="image.gif">
</div>
#either-gif-or-video video { display: none; }
@media (-webkit-video-playable-inline) {
    #either-gif-or-video img { display: none; }
    #either-gif-or-video video { display: initial; }
}

Voici le code pour afficher un film dans un <canvas>
var video;
  var canvas;

  function startPlayback()
  {
    if (!video) {
      video = document.createElement('video');
      video.src = 'image.mp4';
      video.loop = true;
      video.addEventListener('playing', paintVideo);
    }
    video.play();
  }

  function paintVideo()
  {
    if (!canvas) {
      canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      document.body.appendChild(canvas);
    }
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    if (!video.paused)
      requestAnimationFrame(paintVideo);
  }
<button onclick="startPlayback()">Start Playback</button>