Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

On peut délivrer de l'audio et vidéo sur le web de plusieurs manières, du fichier média statique au live stream (flux en direct) adaptatif. Cet article se veut être le point de départ pour explorer les différents mécanismes de diffusion de média sur le web et la compatiblité avec les navigateurs populaires.

Les éléments Audio et Vidéo

Que l'on traite des fichiers audio pré-enregistrés ou des live streams, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments <audio> et <video>. Actuellement, pour supporter tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants:

Pour délivrer du contenu audio et vidéo, le procédé général est comme suit:

  1. Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité
  2. Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours (comme une version Flash.)
  3. Définir comment vous voulez jouer/instancier le média (par exemple un élément <video>, ou peut-être document.createElement('video'))
  4. Ajouter le fichier média au lecteur.

Audio HTML

<audio controls preload="auto">
  <source src="audiofile.mp3" type="audio/mpeg">
 
  <!-- fallback pour les navigateurs qui ne supportent pas mp3 -->
  <source src="audiofile.ogg" type="audio/ogg">
 
  <!-- fallback pour les navigateurs qui ne supportent pas la balise audio -->
  <a href="audiofile.mp3">download audio</a>
</audio>

Le code ci-dessus va créer un lecteur audio qui tente de précharger autant d'audio que possible pour une lecteur fluide.

Note: L'attribut preload peut être ignoré par certains navigateurs mobiles.

Pour plus d'informations voir Les bases de l'Audio multi-navigateur (Audio HTML5 en détail)

Vidéo HTML

<video controls width="640" height="480" poster="initialimage.png" autoplay muted>
  <source src="videofile.mp4" type="video/mp4">
 
  <!-- fallback pour les navigateurs qui ne supportent pas mp4 -->
  <source src="videofile.webm" type="video/webm">
 
  <!-- spécifie les fichiers de sous-titres -->
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
 
  <!-- fallback pour les navigateurs qui ne supportent pas la balise video -->
  <a href="videofile.mp4">download video</a>
</video>

Le code ci-dessus crée un lecteur vidéo de dimensions 640x480 pixels, affichant une image poster jusqu'à ce que la vidéo soit lue. On demande à la vidéo de passer en autoplay (jouer automatiquement) mais d'être muted (en sourdine) par défaut.

Note: L'attribut autoplay peut être ignoré par certains navigateurs mobiles.

Pour plus d'informations voir l'élément vidéo et Créer un lecteur vidéo multi-navigateur.

Contenu de secours Audio et Vidéo

On peut créer un contenu de secours en utilisant Flash. Utiliser mediaelement.js par exemple.

<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  <source src="audiofile.ogg" type="audio/ogg">
  <!-- fallback pour les navigateurs qui ne supportent pas le tag audio -->
  <a href="audiofile.mp3">download audio</a>
  <object width="320" height="30" type="application/x-shockwave-flash" data="mediaelement-flash-audio.swf">
    <param name="movie" value="mediaelement-flash-audio.swf" />
    <param name="flashvars" value="controls=true&file=audiofile.mp3" />
  </object>
</audio>

Le procédé est très similaire avec <video> — il faut juste changer le SWF utilisé.

Plus d'option de Fallbacks.

Audio JavaScript

var myAudio = document.createElement('audio');

if (myAudio.canPlayType('audio/mpeg')) {
  myAudio.setAttribute('src','audiofile.mp3');
} else if (myAudio.canPlayType('audio/ogg')) {
  myAudio.setAttribute('src','audiofile.ogg');
}

myAudio.currentTime = 5;
myAudio.play();

On définit la source de l'audio en fonction du type de fichier audio pris en charge par le navigateur, puis on place la tête de lecture à 5 secondes et essayons de lire le fichier.

Note: Play() sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action utilisateur.

Il est également possible de donner un fichier WAV encodé en base64 à l'élément <audio>, permettant ainsi de générer de l'audio à la volée:

<audio id="player" src="data:audio/x-wav;base64,UklGRvC..."></audio>

Speak.js emploie cette technique. Essayez la démo.

Vidéo JavaScript

var myVideo = document.createElement('video');

if (myVideo.canPlayType('video/mp4')) {
  myVideo.setAttribute('src','videofile.mp4');
} else if (myVideo.canPlayType('video/webm')) {
  myVideo.setAttribute('src','videofile.webm');
}

myVideo.width = 480;
myVideo.height = 320;

On définit la source de la vidéo en fonction du type de fichier vidéo pris en charge par le navigateur, puis on définit la largeur et la hauteur de la vidéo.

API Web Audio

  var context;
  var request;
  var source;

  try {
    context = new (window.AudioContext || window.webkitAudioContext)();
    request = new XMLHttpRequest();
    request.open("GET","http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true);
    request.responseType = "arraybuffer";

    request.onload = function() {
      context.decodeAudioData(request.response, function(buffer) {
        source = context.createBufferSource();  
        source.buffer = buffer;
        source.connect(context.destination);
        // auto play
        source.start(0); // start was previously noteOn
      });
    };

    request.send();

  } catch(e) {
    alert('web audio api not supported');
  }

Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le lit (Essayez par vous-même). Pour en savoir plus sur l'API Web Audio voir Utiliser l'API Web Audio.

getUserMedia / Stream API

Il est également possible de récupérer un live stream de la webcam et/ou du microphone de l'utilisateur avec getUserMedia et l'API Stream. Cela fait partie d'une technologie plus large connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera.

Pour récupérer un flux de la webcam, commencez par créer un élément <video>:

<video id="webcam" width="480" height="360"></video>

Ensuite, si cette opération est prise en charge, connectez la webcam à l'élément video:

navigator.getUserMedia ||
  (navigator.getUserMedia = navigator.mozGetUserMedia ||
  navigator.webkitGetUserMedia || navigator.msGetUserMedia);

window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

if (navigator.getUserMedia) {
    navigator.getUserMedia({
        video: true,
        audio: false
    }, onSuccess, onError);
} else {
    alert('getUserMedia is not supported in this browser.');
}

function onSuccess(stream) {
    var video = document.getElementById('webcam');
    video.autoplay = true;
    video.src = window.URL.createObjectURL(stream);
}

function onError() {
    alert('There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?');
}

Pour en savoir plus, lisez la page Navigator.getUserMedia.

Mediastream Recording

De nouveaux standards sont en cours de déploiement pour permettre au navigateur de récupérer le flux du micro ou de la webcam — en utilisant getUserMedia — et l'enregistrer directement avec la nouvelle API MediaRecorder. Pour ce faire, on prend le stream retourné par getUserMedia, on le donne en paramètre à un objet MediaRecorder, puis on utilise le résultat obtenu comme source audio ou video.

Le principe de base est décrit ci-dessus:

var onSuccess = function(stream) {

  var mediaRecorder = new MediaRecorder(stream);

  mediaRecorder.ondataavailable = function(e) {
    var audio = document.createElement('audio');
    audio.src = window.URL.createObjectURL(e.data);
  }
}

navigator.getUserMedia({audio:true}, onSuccess);

Voir MediaRecorder API pour plus de détails.

Note: MediaRecorder est actuellement uniquement supporté par Firefox et uniquement pour l'audio, mais il existe des solutions pour contourner ce problème, comme la bibliothèque RecordRTC.

Extensions de Source Media

Media Source Extensions (MSE) est un brouillon de travail de W3C qui prévoit d'étendre HTMLMediaElement pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des streams facilite toute une variété de cas d'utilisations comme le straming adaptatif et le décalage temporel des live streams.

Extensions Media Encrypté (EME)

Encrypted Media Extensions est une proposition de W3C d'étendre HTMLMediaElement en fournissant des APIs pour contrôler la lecture de contenu protégé.

L'API supporte divers cas d'utiilisation, allant de la simple décryption par clé aux vidéos protégées par DRM (pourvu que le navigateur implémente ce système). L'échange de licence/clé est contrôlé par l'application, facilitant ainsi le développement d'applications de lecture robustes et qui supportent tout une gamme de technologies de décryptage et de protection de contenu.

Un des principal usage d'EME est de permettre au navigateur d'implémenter le gestion des DRM (Digital Rights Management), rendant inutiles les modules extérieurs de type Flash ou Silverlight.

Note: Un DRM est un système permettant de restreindre l'accès à une ressource (particulièrement les vidéos), ce qui aide à en empêcher la copie.

Streaming adaptatif

De nouveaux formats et protocoles ont été (et sont encore) deployés pour faciliter le streaming adaptatif. Un streaming adaptatif est un flux en direct qui s'adapte à la bande passante disponible de l'utilisateur, typiquement, la qualité du stream peut changer en temps réel pour utiliser plus ou moins de bande passante. Le streaming adaptatif est souvent utilisé en conjonction avec le live streaming, où une diffusion fluide de l'audio et vidéo est primordiale.

Les principaux encodages utilisés pour le streaming adaptatif sont HLS et MPEG-DASH. MSE a été conçu avec DASH en tête, il définit les flux d'octets selon ISOBMFF et M2TS (deux formats supportés par DASH, et le dernier par HLS aussi). Si vous êtes interessé par les différents standards, de manière générale, que vous cherchiez une certaine flexibilité ou souhaitiez supporter la plupart des navigateurs modernes, DASH est probablement la meilleure solution.

Note: Actuellement, Safari ne prend pas en charge DASH, cependant dash.js marche sur les nouvelles versions de Safari prévues pour être publiées avec OSX Yosemite.

DASH fournit également un certain nombre de profils, y compris des profils à la demande simples, sans pré-traitement ni splitting des fichiers multimédia. Il existe un certain nombre de services en ligne qui vous permettront de convertir vos média en HLS ou DASH.

Pour plus d'informations, voir Live streaming web Audio et Vidéo.

Débugger les problèmes Audio / Vidéo

Vous avez des problèmes de lecture audio ou vidéo? Essayez la checklist suivante.

Est-ce que le navigateur prend en charge les formats fournis?

Utilisez les fichiers suivants pour vérifier le support de votre format:

Si un de ces fichier n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Considérez utiliser un format différent ou un contenu de secours (Flash).

Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a deux problèmes possibles:

Le serveur ne fournit pas le type MIME correct du fichier

Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier .htaccess:

# AddType TYPE/SUBTYPE EXTENSION
 
AddType audio/mpeg mp3
AddType audio/mp4 m4a
AddType audio/ogg ogg
AddType audio/ogg oga
 
AddType video/mp4 mp4
AddType video/mp4 m4v
AddType video/ogg ogv
AddType video/webm webm
AddType video/webm webmv

Votre fichier n'est pas encodé correctement

Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils souivants, qui se sont avérés être généralement fiables:

  • Audacity - Éditeur et enregistreur audio gratuit
  • Miro - Lecteur audio et vidéo open-source et gratuit
  • Handbrake - Transcodeur vidéo open-source
  • Firefogg - Encodage audio et vidéo pour Firefox
  • FFmpeg2 - Encodeur en ligne de commande complet
  • Libav - Encodeur en ligne de commande complet
  • Vid.ly - Video player,transcoding and delivery
  • Internet Archive - Transcodage et stockage gratuit

Customiser votre Lecteur Media

Vous pouvez vouloir un lecteur audio ou vidéo qui ait le même aspect sur tous les navigateurs, ou simplement vouloir l'adapter à votre site. La technique générale pour y parvenir est d'omettre l'attribut controls afin que les contrôles par défaut du navigateur ne s'affichent pas, et de créer vos propres contrôles en HTML et CSS, avec du JavaScript pour lier vos contrôles à l'API audio/vidéo.

Si vous avez besoin de quelque chose en plus, il est possible d'ajouter des fonctionnalités qui ne sont pas présentes par défaut dans les lecteurs, tels que la vitesse de lecture, le choix de la qualité ou mêmes les spectres audio. Vous pouvez également décider de rendre votre lecteur responsive — par exemple, vous pouvez enlever la barre de progrès sous certaines conditions.

Vous pouvez détecter les événements de clic, de toucher et/ou de clavier pour déclencher des actions telles que lecture, pause et stop. Il est souvent souhaitable d'ajouter des raccourcis clavier pour plus de commodité et d'accessibilité pour l'utilisateur.

Un exemple rapide — d'abord, configurez votre audio et vos contrôles personnalisés en HTML:

  <audio id="my-audio" src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio>
  <button id="my-control">play</button>

Ensuite, ajoutez un peu de JavaScript pour détecter les événements afin de lire et de mettre en pause l'audio:

window.onload = function() {
 
  var myAudio = document.getElementById('my-audio');
  var myControl = document.getElementById('my-control');
 
  function switchState() {
    if (myAudio.paused == true) {
      myAudio.play();
      myControl.innerHTML = "pause";
    } else {
      myAudio.pause();
      myControl.innerHTML = "play";
    }
  }
 
  function checkKey(e) {
    if (e.keycode == 32 ) { //spacebar
      switchState();
    }
  }
 
  myControl.addEventListener('click', function() {
    switchState();
  }, false);
 
  window.addEventListener( "keypress", checkKey, false );
}

Vous pouvez essayer cet exemple ici. Pour plus d'informations, voir Customiser votre propre lecteur audio.

Bibliothèques JavaScript Audio/Vidéo

Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plus populaires permettent de choisir un design de lecteur cohérent sur tous les navigateurs et fournissent un contenu de secours pour les navigateurs qui ne prennent pas en charge l'audio et vidéo nativement. Le contenu de secours utilise souvent les plugins Adobe Flash ou Microsoft Silverlight. D'autres fonctionnalités telles que les éléments <track> pour les sous-titres peuvent également être fournies par les bibliothèques média.

Audio uniquement

Vidéo uniquement

  • flowplayer: Gratuit, avec un watermark du logo flowplayer. Open source (licence GPL.)
  • JWPlayer: Nécessite de s'inscrire pour télécharger. Édition Open Source (Liecence Creative Commons.)
  • SublimeVideo: Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN.
  • Video.js: Gratuit et Open Source (Licence Apache 2.)

Audio et Vidéo

Web Audio API

Tutoriels Basiques

Creating a cross-browser video player
A guide to creating a basic cross browser video player using the <video> element.
Video player styling basics
With the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.
Cross-browser audio basics

This article provides a basic guide to creating an HTML5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the Media API.

Media buffering, seeking, and time ranges
Sometimes it's useful to know how much <audio> or <video> has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using TimeRanges, and other features of the media API.
HTML5 playbackRate explained
The playbackRate property allows us to change the speed or rate at which a piece of web audio or video is playing. This article explains it in detail.
Using the Web Audio API
Explains the basics of using the Web Audio API to grab, manipulate and play back an audio source.

Tutoriels Streaming de médias

Live streaming web audio and video
Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started.
Setting up adaptive streaming media sources
Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)
DASH Adaptive Streaming for HTML 5 Video
Details how to set up adaptive streaming using DASH and WebM.

Tutoriels Advancés

Adding captions and subtitles to HTML5 video
This article explains how to add captions and subtitles to HTML5 <video>, using Web_Video_Text_Tracks_Format and the <track> element.
Writing Web Audio API code that works in every browser
A guide to writing cross browser Web Audio API code.
H.264 support in Firefox
This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.
Easy audio capture with the MediaRecorder API
Explains the basics of using the MediaRecorder API to directly record a media stream.

Note: Les versions de Firefox OS 1.3 et plus supportent le protocole RTSP pour diffuser des vidéos en streaming. Une solution de secours pour les anciennes versions serait d'utiliser <video> avec un format pris en charge par Gecko (comme WebM).

Réferences

 

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt, chrisdavidmills
Dernière mise à jour par : a-mt,