Au commencement...

Rien ne semble plus naturel que de lancer un fichier vidéo ou audio sur le web, pourtant on oublie souvent qu’avant d’arriver à maturité, notre environnement multi-média internet a subi une longue évolution, fruit d’une âpre concurrence entre les principaux acteurs du marché.

Depuis l’arrivée de HTML5 en 2011 l’intégration vidéo a pu se passer de Flash et de nouvelles méthodes se sont mises en place tant pour l’audio que pour la vidéo . La nécessité du plugin Flash pouvait poser des problèmes auparavant (en particulier avec les appareils IOS ). Tout se fait désormais nativement avec une balise video ce qui améliore entre autre les performances. Cette nouvelle norme a amené de nombreuses balises inédites,une déclaration de Doctype simplifiée et mémorisable, en outre HTML5 permet de travailler hors ligne. Depuis 2014 le HTML5 va permettre d’intégrer directement du contenu multi-média et devenir le nouveau standard d’intégration multi-média.

Un sigle barbare est devenu de plus en plus fréquent sur les internets moderne ; l’User Generated Content (UGC). Le Contenu généré par les utilisateurs se réfère à un ensemble de médias dont le contenu est principalement, soit produit soit directement influencé par les utilisaterurs finaux. Il est opposé au contenu traditionnel produit, vendu ou diffusé par les entreprises de média traditionnelles (source: Wikipédia)L’explosion de YouTube depuis une dizaine d’années ainsi que la facilité a héberger des fichiers MP3 a permis a l’utilisateur moyen de devenir un créateur de contenu, se réappropriant ce qui était jusque là réservé à une oligarchie audio-visuelle.

Cette page aura pour but de découvrir comment fonctionne l’intégration multi-média sous HTML5 et de faire participer (de façon plus ou moins ludique) les membres de la promotion 2 de Simplon.co Lyon dans le cadre d’un atelier.

La vidéo

Il faut remonter à la toute fin des années 80 pour assister aux balbutiements du multi-média sur la toile. Développé par Apple en 1989 Quicktime apparaît sur Mac dès 1991 , puis en 1992 sur Windows.Il va connaître un grand succès dans les années 90 même si il sera concurrencé par Realplayer à partir de 1995. Premier lecteur à pouvoir lire des vidéos en streaming, ce logiciel open-source sera très présent à la fin des années 90. Durant cette période pionnière il n’existait pas de lecteur universel, chacun avait ses propres CODECS et technologies ce qui a compliqué le développement de la vidéo en streaming. Si le MP3 et le MPEG1 sont supportés très tôt, Real a son propre CODEC le RealMedia< (qui regroupe CODECS vidéos et audios) tandis que le lecteur d’Apple possède de son côté le format de fichier .mov.

En 1993 une petite Startup du nom de FutureWave crée un logiciel de dessin vectoriel, Smartsketch. Remanié en 1995 ce soft intéressera Macromedia qui un an plus tard rachetera la société ; ainsi va naître la révolution Flash. Le phénomène prend très rapidement de l’ampleur, devenant une des technologies majeures des internets dès le début des années 2000. En 2002 près de 92 % des internautes sont en contact avec Flash qui bien au-delà du dessin vectoriel est devenu à la fois un environnement de développement intégré, un lecteur vidéo et un logiciel d’animation.

Durant la première moitié de la décennie 2000 Flashplayer va devenir le principal vecteur de contenu vidéo sur la toile. Supportant le MP3 dès la fin des années 90 il faudra pourtant attendre 2006 pour lire le H264 (format vidéo le plus répertorié) sur Flashplayer.

Malgré de nombreux avantages la technologie Flash posait de sérieux problèmes de sécurité si bien qu’Apple décidera de ne pas l’utiliser pour ses téléphones et tablettes ce qui marquera le début de l’abandon progressif de la technologie. Parallèlement un petit site de vidéos en streaming va apparaître en 2005 et bousculer un peu les habitudes, et même si il n’est pas pionnier Youtube saura très vite s’imposer, d’autant plus après son rachat par Google en 2006. Grâce à ses fonctionnalités d’intégration il va devenir très facile d’utiliser de la vidéo sur un site perso/blog.

title
album
artiste

title
album
artiste

title
album
artiste

Les balises et attributs

La prise en compte de la lecture de l'élément video et audio sans plug-in n'est effective qu'à partir de la version 9.0 de Internet Explorer, ce n'est toujours pas le cas pour Opéra mini.

Les deux balises audio et video s'emploient de la même manière. La bonne pratique nous amènera à préférer la balise source à l'attribut src de la balise mère qui permettra au navigateur de choisir son format. La balise video permet en plus l'usage d'un attribut poster qui donne la possibilité d'afficher une image représentant la vidéo, très pratique très répandue.

Les attributs disponibles :

autoplay

lecture auto du média dès chargement de la page

loop

lecture en boucle du média

preload

contrôle le chargement

none
metadata
auto

controls

barre de contrôle de lecture du navigateur

poster

affiche une image définie (vidéo seulement)

muted

état par défaut du son (et conseillé)

Formats Audios et Vidéos
	Vidéos			Audios
	WebM	OGG Theora	H.264 / MP4	MP3	Wav	AAC	WebM Vorbis	OGG Vorbis
Internet Explorer			9.0	9.0		9.0
Firefox	4.0	3.5		W21 – L24	3.5	W21 – L24	4.0	3.5
Chrome	6.0	3.0		X	X	X	X	9
Safari			3.1	3.1	3.1			X
Opéra	10.6	10.5		14.0	11.0	14.0	10.6	10.5
Androïd	2.3	2.3	3.0		4.1	4.1
iOS			3.0	X		X

sources (wikipedia audio, wikipedia video, developers Androïd, iOS Developer).

Les frameworks

Cependant, hormis le fait de pouvoir juste mettre un simple élément audio ou vidéo sur sa page, le manipuler grâce à JavaScript, on peut aussi faire appel à des frameworks qui peuvent nous faire économiser un peu de temps car en général, le style est déjà pris en main.

En voici quelques uns:

audio.js

audio.js utilise la balise audio et un lecteur flash invisible pour imiter la balise audio dans les navigateur. On peut customiser le css entre autres.

video.js

Librairie open-source et aussi connu sous le nom de HTML5 Video Player. Elle suporte le HTML5 ainsi que le Flash ainsi que Youtube et Viméo. Possède une bonne communauté.

popcorn.js

Framework écrit en JavaScript par des réalisateurs, des développeurs web et n'importe qui voulant créer des médias intéractifs. Popcorn.js fait partie du projet Mozilla's Popcorn

projekktor.js

Librairie open-source, écrite en JavaScript. Simplifie l'intégration et le travail avec les vidéos dans le web en gérant les compatibilités entre navigateurs.

Mediaelement.js

Ecrite en jQuery. Elle fonctionne en imitant le MediaElement Native de HTML5 via des plugins en Flash et Silverlight.

                                      
                                    
window.onload = function(){
    var myAudio = document.getElementById('my-audio');

    myAudio.addEventListener('progress', function() {
        var bufferedEnd = myAudio.buffered.end(myAudio.buffered.length - 1);
        var duration =  myAudio.duration;
        if (duration > 0) {
            document.getElementById('buffered-amount').style.width = ((bufferedEnd / duration)*100) + "%";
        }
    });
    myAudio.addEventListener('timeupdate', function() {
        var duration =  myAudio.duration;
        if (duration > 0) {
            document.getElementById('progress-amount').style.width = ((myAudio.currentTime / duration)*100) + "%";
        }
    });

API native

Enfin, Il n'est pas nécessaire d'utiliser les élements audio et vidéo. On peut s'amuser à tout créer depuis JavaScript!

On peut le faire à l'aide de l' API native des éléments audio et video. Il faut tout de même s'assurer que le navigateur interprète le format video avec son codec aussi. Il y a deux manière de procéder:

en employant des éléments sourceque nous ajouterions au DOM en pointant vers les divers fichiers nécessaires,
ou avec canPlayType, qui nous dira si il prend tel ou tel format en compte

Par exemple, avec le type webm, on veut vérifier si le navigateur est capable de le lire, on fera : if (videoAPI.canPlayType("video/webm")) { execution du code}

Illustrons ça à droite avec du code.

L' audio

L’industrie musicale a subi plus de mutations en une petite quinzaine d’années que durant les cinq décennies précédentes. L’explosion des communications en général et d’internet en particulier en est le principal facteur, bousculant nos modes de consommation et transformant en service ce qui a pendant des années été lié à un support physique fort ( la même constatation pourrait être faite pour le cinéma et dans une moindre mesure la littérature).

Si la musique a su devenir omniprésente sur la toile c’est en grande partie grâce aux formats de compression que l’on peut classer en deux grandes familles, avec ou sans pertes. Le principal représentant de la compression sans pertes est le FLAC( Free Lossless Audio Codec, 2003). Format ouvert et réduisant la taille des fichiers de 30 à 70 % selon le type (les ondes régulières auront un meilleur taux de compression) il est très utilisé pour l’archivage des données.

Toutefois ce seront les formats avec pertes qui vont vraiment permettre la diffusion et l’échange (parfois illégal) de fichiers musicaux de façon massive. Issu du projet Digital Audio Broadcasting et finalisé en 1992 Le Mpeg 1/-Audio Layer 3 (plus connu sous le sobriquet de MP3) est sans aucun doute le plus connu.Permettant une compression de l’ordre de 10 pour 1 il sera utilisé principalement entre les fréquences de 192kbits(1/7.5) et 320kbits(1/4.4), durant les années 2000 d’autres formats plus performant vont voir le jour (OGG vorbis en particulier) mais n’arriveront pas a s’imposer massivement vu l’omniprésence du mp3.

La légèreté des fichiers sons leur permet d’être intégrés facilement dans des sites web et la lecture en streaming est petit à petit devenu la norme.

                                      
<video controls poster="image.png" autoplay>
  <source src="video.mp4" />
  <source src="video.webm" />
  <source src="video.ogv" />
  votre navigateur ne reconnait pas ce format
</video>
<audio controls loop>
  <source src="audio.ogg" />
  <source src="audio.mp3" />
  votre navigateur ne reconnait pas ce format
</audio>

Les formats Audio/Vidéo et conversions

Deux types de flux.

En natif audio, le format wave(Window) est le plus répandu et lisible par tous les navigateurs, à l'instar du format AIFF(Mac). Cependant, le wave est trop lourd et déconseillé pour le web. Il existe donc les formats compressés et le plus connu est le format mp3. Cependant, mp3 fonctionne mal avec Mozilla. Les alternatives :

AAC
OGG

Les fichiers musicaux auxquels on accède sur internet sont définis par trois principales caractéristiques: la quantification, la fréquence d'échantillonage et le nombre de voies.

La quantification s'exprime en bits (8, 16 ou 24) et la fréquence d'échantillonnage en Hz, la qualité sonore d'une piste correspondra au produit de ces deux éléments. Le nombre de voies est plus explicite et définit... le nombre de voies!

Du côté de la Video, il faut prendre en compte deux choses: Le format vidéo se présente sous deux aspects: - le conteneur (.avi, .mp4, .ogv...); - le codec (divx, xvid,...) De plus, la Video contient de l'audio (codec particulier).

Les paramètres sur lesquels il faut s'attarder :

Audio : fréquence d'échantillonnage (11,025Khz, 22,050Khz, 44,100Khz)
Audio: encodage 8 (bruit de fond), 16 (qualité CD) ou 24 bits (qualité studio)
Audio : mono ou stéréo (2x plus lourde)
Vidéo : nombre d'image clé (25 images/s en PAL et 30 pour le NTSC)
Vidéo : réduire la taille de l'image (éviter la grande résolution)
Vidéo : débit des données (Ko ou Kbit)

Contrôle du flux par JavaScript

Lorsqu'on fait appel à de la vidéo ou à de l'audio, on peut toujours intéragir avec cet élément grâce à JS et le contrôler.

Essayons avec une balise audio et une div. On place un identifiant, ici my-audio. Afin de rendre l'exemple plus complet, on ajouté deux div: une .buffering et une .progress. Elles vont nous permettre d'afficher la progression de la lecture.

On interviendra à l'aide du DOM et des propriétés buffered et duration.

La propriété buffered renvoi un objet timeRange, une mémoire tampon. La propriété duration retourne la longueur du média en seconde.

On ajoute ensuite un addEventListener à buffered qui permettra d'augmenter la largeur de la .buffered en même temps que l'avancement de la lecture.

Le site W3schools permet de voir toutes les possibilités qu'offre le DOM : HTML Audio/Video DOM Reference

                                  
                                  
var objvideoAPI = null;
var lavideoAPI = document.getElementById("lavideo");
var commandeAPI = document.getElementById("commande");
function ajouteVideo() {
  if (objvideoAPI == null) {
    objvideoAPI = document.createElement('video');
      if (objvideoAPI.canPlayType("video/webm")){
        objvideoAPI.setAttribute("src","videos/earth.mp4")
        objvideoAPI.play()
        lavideoAPI.appendChild(objvideoAPI)
        commandeAPI.textContent = "Rejoue";
      }
    } else {
  objvideoAPI.play()
  }
}

méd:as