Sommaire

0. Introduction : la vidéo avant 2005
1. Les années Flash Player
2. La cohabitation Flash Player / HTML5
3. Dans le détail de la balise <video>
4. Exercices
5. Les possibilités multimédia offertes par HTML5
6. Accessibilité multimédia en HTML5
7. Exercice

Introduction : La vidéo avant 2005

Contexte

Vidéo encore peu développée (faibles débits)

Aucune standardisation, avec 3 acteurs dominants

• Apple (Quicktime)
• Microsoft (Windows Media Player)
• Real Networks (RealVideo)

Nécessité d'avoir le player installé + le plugin navigateur

Introduction : La vidéo avant 2005

Démo

Introduction : La vidéo avant 2005

Pour afficher ça, on utilisait le code suivant :

<object type="video/x-ms-asf" data="videos/afroninja.mp4" width="640" height="480">
	<param name="movie" value="videos/afroninja.mp4" />
	<param name="loop" value="false" />
</object>

1. Les années Flash Player

La naissance de plateformes d'hébergement de vidéos

Youtube

• créé le 14 février 2005 par Steve Chen, Chad Hurley et Jawed Karim

• vendu à Google le 16 octobre 2006 pour 1.76 milliard de dollars

1. Les années Flash Player

La naissance de plateformes d'hébergement de vidéos

Dailymotion

• créé le 15 mars 2005 par Olivier Poitrey et Benjamin Bejbaum

1. Les années Flash Player

La naissance de plateformes d'hébergement de vidéos

Vimeo

• créé en novembre 2004 par une filiale du groupe américain InterActiveCorp

1. Les années Flash Player

Un point commun

L'utilisation de Flash pour diffuser les vidéos

1. Les années Flash Player

Pour info : la 1^ère vidéo postée sur Youtube

1. Les années Flash Player

Flash présente de nombreux avantages

• Le taux d'équipement
• Le support multi-plateformes
• Les codecs utilisés offrent une bonne qualité d'image

1. Les années Flash Player

Un taux d'équipement record dès 2003

Etude réalisée en 2003 par la société ID.fr

1. Les années Flash Player

Tout comme en 2008

Sébastien Delorme - Novembre 2008

1. Les années Flash Player

Dès 2010 : une domination contestée

Apple en trouble fête

• L'iPhone, sorti en 2007, ne supporte pas Flash
• Steve Jobs explique ses raisons en 2010 dans sa lettre ouverte à Adobe "Thoughts on Flash"

1. Les années Flash Player

"Thoughts on Flash", la lettre ouverte de Steve Jobs

Il évoque 6 raisons à l'éviction de Flash par Apple

• Les solutions Flash sont 100% propriétaires (LOL !)
• Flash n'est pas sécurisé, et peu performant sur mobile
• Flash consomme trop de batterie sur mobile
• Flash n'est pas très compatible avec le tactile
• Apple ne souhaite pas d'applications en Flash sur l'App Store
• Flash n'est pas nécessaire à la lecture de vidéos (HTML5)

2. La cohabitation Flash / HTML5

HTML5 ?

Une nouvelle sémantique

• Nouvelles balises (header, footer, section, ...), Formulaires évolués

Des fonctionnalités étendues (API)

• Géolocalisation, WebStorage, etc...

C'est aussi tout l'écosystème autour

• CSS3, Javascript, XMLHttpRequest (Ajax), SVG, WebGL...

2. La cohabitation Flash / HTML5

HTML5 arrive avec une nouvelle balise

<video src="video.mp4"></video>

Pour bien comprendre...

Composition d'un fichier vidéo

2. La cohabitation Flash / HTML5

La guerre des formats

Trois codecs vidéo en lice :

H.264, VP8, OGG Theora

2. La cohabitation Flash / HTML5

H.264 (H.265 ?)

• Codec propriétaire qu'on retrouve dans le conteneur MP4

• Soutenu par la MPEG LA. Breveté : il est possible de streamer gratuitement du h.264. Les appareils et logiciels permettant le streaming doivent payer des royalties au MPEG LA (réparties vers les 26 enteprises titulaires de brevets).

2. La cohabitation Flash / HTML5

VP8/VP9

• Codec libre qu'on retrouve dans le conteneur WEBM

• Racheté à la société On2 par Google qui a ouvert son code (projet WebM). Royaltee free. En 2010, la MPEG LA menace d'attaquer Google pour violation de brevets. Le 8 mars 2013, Google et le MPEG LA ont trouvé un accord débloquant la situation.

2. La cohabitation Flash / HTML5

Ogg Theora

• Codec libre qu'on retrouve dans le conteneur OGV

• Soutenu par la fondation Xiph.org. Non breveté. Petit poucet de la bataille : écrasé par les intérêts financiers de Microsoft et Apple, avec H.264 et par la volonté de Google de développer VP8.

2. La cohabitation Flash / HTML5

Au départ, un support inégal côté navigateurs

H.264 n'était supporté que par IE et Safari

VP8 et Ogg Theora seulement par Chrome, Firefox et Opera

Impossible de couvrir tous les navigateurs avec un seul format !

2. La cohabitation Flash / HTML5

Au départ, un support inégal côté navigateurs

L'audio n'en est pas en reste...

MP3, WAV, OGG Vorbis, Opus

2. La cohabitation Flash / HTML5

Résultat...

Il fallait :

• Insérer la vidéo diffusée en plusieurs formats
• Assurer la lecture pour les anciens navigateurs

C'est encore vrai aujourd'hui, mais plus tout à fait...

2. La cohabitation Flash / HTML5

Support du OGV (Theora) par les navigateurs

Voir sur Can I Use

2. La cohabitation Flash / HTML5

Support du WEBM (VP8) par les navigateurs

Voir sur Can I Use

2. La cohabitation Flash / HTML5

Support du MP4 (H.264) par les navigateurs

Voir sur Can I Use

2. La cohabitation Flash / HTML5

H.264 est maintenant supporté par tous les navigateurs

Même s'il n'est pas libre, cette situation nous facilite la tâche :p

Sauf quand on veut diffuser une conférence de Richard Stallman...

4. Exercices

Télécharge l'archive d'exercices

ICI

5. Les possibilités multimédia offertes par HTML5

HTML5 arrive avec une API Audio / Video

Cette API, ce sont des fonctions Javascript qui vont permettre le contrôle du player.

5. Les possibilités multimédia offertes par HTML5

Démarrer / Arrêter une vidéo (Démo)

<video id="video" src="video.mp4" width="640" height="480" ></video>
<ul>
	<li><button id="play">Lecture</button></li>
	<li><button id="pause">Pause</button></li>
	<li><button id="stop">Stop</button></li>
</ul>

<script>
var video = document.getElementById("video");

// Pour démarrer la lecture
document.getElementById('play').onclick = function() {
  video.play();
};

// Pour mettre la vidéo en pause
document.getElementById('pause').onclick = function() {
  video.pause();
};

// Pour stopper la vidéo, on la met en pause, puis on place le curseur à 0
document.getElementById('stop').onclick = function() {
  video.pause();
  video.currentTime = 0;
};
</script>

5. Les possibilités multimédia offertes par HTML5

Récupérer le temps actuel (Démo)

<video id="video" src="video.mp4" width="640" height="480" ></video>
<ul>
	<li><span id="current"></span> / <span id="total"></span></li>
</ul>

<script>

var video = document.getElementById("video");

video.addEventListener('timeupdate',function() {

	document.getElementById('current').innerHTML = video.currentTime;
	document.getElementById('total').innerHTML = video.duration;

}, false);

</script>

5. Les possibilités multimédia offertes par HTML5

Régler le son d'une vidéo avec un curseur (Démo)

<video id="video" src="video.mp4" width="640" height="480" ></video>
<input type="range" id="volume" min="0" max="1" step="0.1"/>

<script>
var video = document.getElementById("video");
document.getElementById('volume').addEventListener('change', function() {
	video.volume = this.value;
},false);
</script>

5. Les possibilités multimédia offertes par HTML5

Couper le son d'une vidéo (Démo)

<video id="video" src="video.mp4" width="640" height="480" ></video>
<ul>
	<li><button id="mute">Couper le son</button></li>
</ul>

<script>

var video = document.getElementById("video");
document.getElementById('mute').onclick = function() { 

	if(video.muted == true) { video.muted = ""; } 
	else { video.muted = "muted"; }

}

</script>

5. Les possibilités multimédia offertes par HTML5

Le support natif de la vidéo permet aux navigateurs de proposer des fonctionnalités combinées à Javascript qu'il n'était pas possible (ou difficilement) de mettre en oeuvre.

5. Les possibilités multimédia offertes par HTML5

Exemple

Un player Rich Media pour l'Université de Poitiers

5. Les possibilités multimédia offertes par HTML5

Autres possibilités

• Faire exploser une vidéo
• Player 3D
• Traitement colorimétrique à la volée
• Vidéo à fond transparent

6. Accessibilité multimédia en HTML5

Accessibilité ?

« Mettre le web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. »

Tim Berners Lee, inventeur du web

6. Accessibilité multimédia en HTML5

HTML5 permet une accessibilité accrue aux contenus multimédia

• Par le support natif des sous-titres
• Par la possibilité de la navigation au clavier

6. Accessibilité multimédia en HTML5

Des sous-titres grâce à la balise <track> et WebVTT

<video controls preload="metadata">
	<source src="video.mp4" type="video/mp4">
	<source src="video.webm" type="video/webm">
	<track label="English subtitles" kind="subtitles" srclang="en" src="subtitles-en.vtt" default>
</video>

Exemple d'intégration de sous-titres

6. Accessibilité multimédia en HTML5

Des sous-titres grâce à la balise <track> et WebVTT

WebVTT ?

C'est un type de fichier qui contient les sous-titres.

Exemple de fichier WebVTT

6. Accessibilité multimédia en HTML5

Des sous-titres grâce à la balise <track> et WebVTT

Support de WebVTT

6. Accessibilité multimédia en HTML5

L'accessiblité aux contrôles par le clavier

Pouvoir gérer la lecture, modifier le volume, passer en plein écran sans passer par la souris

Exemple

6. Accessibilité multimédia en HTML5

Exemples de players accessibles

• Acorn Media Player
• Vibeo

7. Big Challenge

Crée ton propre player, avec ta propre barre de contrôles !

• Reprends les codes donnés dans les slides de la 3e partie
• Intègre un bouton Play, Pause et Stop
• Intègre un bouton pour modifier le volume

Un tuto pas mal sur Zestedesavoir.com