Cours HTML5 : l’audio et la vidéo

Animations

¨   Implémenter des animations est la tâche la plus courante dans le développement de jeux

¤  Les principes appris dans le développement de ce jeu simple pourront être appliqués à la plupart des jeux

¨   Jeux HTML5 – beaucoup de discutions autour de l'élément canvas

¤  On peut faire des traitements similaires en utilisant des techniques (HTML, CSS et

JavaScript) plus traditionnelles

n Jeux basés sur le DOM – plus grande compatibilité avec les navigateurs

¤  On utilisera canvas plus tard

Mouvement d'une bulle

¨   Buts:

¤  1) Déplacer une bulle d'un point A vers un point B, en ligne droite, à vitesse constante

¤  2) Déterminer la position exacte des points A et B

n  Le joueur lance des bulles à partir de la même position – le point A aura toujours les mêmes coordonnées pour chaque nouvelle bulle tirée

n  Le point B correspond au point à l'écran où l'utilisateur a cliqué – il faut récupérer les coordonnées de la souris lors de clic de l'utilisateur dans la zone de jeu

¨   On va commencer par implémenter le mouvement d'un point A vers un point

B

¤  On doit calculer l'angle de tir en se basant sur les positions relatives de points A et B

¤  Avec l'angle de tir, on peut déplacer la bulle dans une direction donnée, aussi loin que nécessaire – calculé avec précision plus tard

n  Pour l'instant ce sera vers un point situé en dehors de l'écran

Remarques sur le mouvement des bulles

¨   Dans la version finale, la bulle ne s'arrêtera pas là où l'utilisateur a cliqué

¤  Elle va continuer jusqu'à rencontrer d'autres bulles

¤  On va gérer les collisions par la suite

¨   Une fois qu'on aura implémenté le mouvement point-à-point, il sera plus facile de l'extrapoler et continuer à déplacer la bulle dans la même direction

Théorie Les sprites CSS

¨   Un sprite CSS est un élément 2D du jeu qui peut se déplacer à l'intérieur d'une zone du jeu

¤  Fait partie d'une scène plus grande

¤  Son mouvement n'affecte pas les données en arrière-plan

¤  Dans notre cas, la bulle au point A est notre seul sprite

¨   Un sprite (dans cette approche orientée DOM) est un élément HTML

(souvent un ensemble de ) avec un style CSS

¨   Le déplacement d'un tel élément sans modifier le reste de l'écran est facile

¤  Un élément HTML ayant une position absolue définie via le CSS est affiché indépendamment des éléments HTML l'entourant

¤  Le navigateur affiche les différents éléments à l'écran et gère leurs intersections – si on supprime un élément, le navigateur sait qu'il faut afficher l'élément qui se trouve en dessous

Rappels trigonométrie

¨ On peut calculer l'angle de tir d'une bulle en utilisant la fonction arctan (tangente inverse)

Déplacer un sprite CSS

¨    Pour déplacer un élément en manipulant le DOM, on doit seulement modifier les valeurs de ses propriétés CSS top et left ¤ Pour chaque étape intermédiaire composant le mouvement ¨ Il est possible d'animer des sprites de 2 manières:

¤  En utilisant des animations JavaScript

¤  En utilisant les transitions CSS3 (plus tard)

¨    La méthode animate de jQuery permet d'animer le déplacement d'un objet

¤  Calcule la différence entre les valeurs de départ et d'arrivée

¤  Modifie les valeurs des propriétés top et left pour les étapes intermédiaires ¤ Remarque:

n Cette méthode ne fonctionne pas avec des propriétés CSS ne prenant pas des valeurs numériques (e.g. faire une transition de couleur sur un arrière-plan)

Théorie La méthode animate de jQuery

¨ Arguments de la méthode animate:

¤  Propriétés CSS à animer

n  Souvent top et left, mais toute propriété ayant des dimensions simples en pixels peut être utilisée (e.g. font-size, width, height, border-width, margin-left) ¤ Durée en millisecondes de l'animation

n  Par défaut elle est fixée à 1s, avec une vitesse de 1000 pixels par seconde

n  La distance de déplacement d'une bulle dépendra de l'état du jeu, mais aussi des éventuels objets avec lesquels la bulle va entrer en collision

n  Pour l'instant, la durée telle qu'elle est définie suffit

¤  Easing: définit comment un objet transite de son état de départ à son état final

n  Permet de faire varier l'accélération et la décélération par rapport à un tracé n Pour le mouvement:

n  linear résulte en une vitesse constante du début à la fin

n  swing ajoute une accélération au début et une décélération à la fin

Ajout de sprites

¨   Soit l'image suivante définissant des bulles

¨   On va utiliser 4 couleurs de bulles et chaque bulle pourra avoir 4 états

¤ Pour aller plus vite, on utilise un seul fichier PNG contenant les 16 images possibles

¨   Via le CSS on va modifier la position de l'image d'arrière-plan

¨   Plus rapide que de placer les images dans une balise

 

Animations CSS type explosion (1)

¨   Déplacer les sprites sur l'écran est un type d'animation

¨   Nous voulons maintenant modifier la manière dont les sprites sont affichés

¤ Nous allons utiliser les autres images d'états de bulles présentes dans le fichier

¨   Technique: pour afficher une animation type explosion, afficher les 4 images à la suite, en déplaçant à chaque fois l'image d'arrière-plan de 50px vers la gauche

¨   Au lieu d'appliquer l'effet explosion à un groupe de bulles, nous allons l'appliquer à chaque bulle individuellement

Animations CSS type explosion (2)

¨ Pour faire exploser chaque bulle individuellement, on doit modifier le corps de la fonction exploserBulles(…) dans

$.each(listeBulles, function() { var bulle = this; setTimeout(function() { bulle.animerExplosion();

}, temps);

etatJeu.exploserBullePos(this.getLignes(), this.getColonnes()); setTimeout(function() { bulle.getSprite().remove();

}, temps + 200);

L'explosion de la 1^e bulle doit débuter dès que la collision est détectée. Les explosions des autres bulles du groupe seront retardées de 60ms.

temps += 60;

}); };

Animations CSS type explosion (3)

¨ Ajoutez la fonction animerExplosion(…) dans

Détecter des collisions

¨   On calcule les collisions de 2 manières:

¤  Option 1: on déplace un sprite de quelques pixels pour chaque image et on essaie de déterminer s'il y a superposition avec d'autres sprites

n Si oui, on sait qu'on a touché une autre bulle

¤  Option 2: on utilise la géométrie pour calculer où il peut y avoir une collision entre un sprite et notre bulle, avant même qu'on la déplace

¨   La 1^e option peut convenir pour les jeux d'arcade rapides

¤  Les objets se déplacent vite, les détections de collisions se produisent après que l'objet se soit déplacé de plusieurs pixels (depuis la dernière détection) ¨ La 2^e option est plus précise si faisable

¤  C'est le cas pour notre jeu, mais pas pour des jeux où les sprites vont avoir des formes plus complexes

Géométrie d'une collision

 

Déterminer la bonne collision

Détecter une collision

 

Calcul d'une collision

¨   Calcul du vecteur de la bulle du joueur

¤  Equation du cercle: ?−?_?² + (?−?_? )²=?²

n  x et y sont des points sur la circonférence du cercle

n  c_x et c_y sont les coordonnées du centre du cercle

n  r est le rayon du cercle

¤  Equation de la bulle lancée:  ???? ==???? ++??????

n  p_x et p_y sont des points sur la trajectoire du centre de la bulle

n  Calculés dans la méthode anímate de jQuery (équation standard pour un point se déplaçant sur une ligne)

¨   Calcul du point de cette trajectoire le plus proche du centre de la bulle à tester pour collision

 

Avantages de CSS

¨   Ensemble d'attributs pour les transformations et transitions permettant d'animer les modifications apportées aux propriétés CSS

¤ e.g. coordonnées top ou left d'un élément

¨   Au lieu d'utiliser JavaScript pour créer des animations image par image, les transitions CSS sont définies dans les feuilles de style associées au document

¤  Une animation est débutée suite à une seule modification d'une propriété CSS

¤  Au lieu d'avoir plusieurs modifications incrémentales d'une propriété (comme le veut JavaScript)

¨   Les animations CSS sont gérées par le moteur d'affichage du navigateur

¤  Pas par l'interpréteur JavaScript – libère du temps processeur pour exécuter du code JavaScript par exemple

¤  Si processeur graphique, les effets sont entièrement gérés par celui-ci – plus d'images par seconde lors de l'affichage des animations

3.1 TRANSITIONS CSS

Les transitions CSS

¨ Une transition CSS permet de faire varier une ou plusieurs propriétés CSS d'un élément sur une période de temps donnée

¤  La modification de la propriété left d'un élément du DOM de 50px à 500px aura pour effet de changer immédiatement sa position à l'écran

¤  En appliquant une transition, on peut rendre cette modification plus graduelle ¨ Une transition CSS spécifie les éléments suivants:

¤  La (ou les) propriété(s) CSS à animer

n  Toutes propriété CSS prenant une valeur numérique (e.g. left, color)

n  Pas pour les propriétés CSS prenant des valeurs booléennes (e.g. visbility:hidden et visibility:visible) – résolu si on anime opacity de 0 à 1

n  Liste de l'ensemble des propriétés CSS pouvant être animées:

¤  Comment l'animation doit se produire

¤  Combien de temps doit durer l'animation

Prise en charge des transitions CSS3

Source: -transitions

Transitions CSS de base

¨   5 propriétés CSS peuvent être utilisées pour les transitions:

¨   Les moteurs récents implémentent la spécification

¨   Sur certaines des anciennes versions, tous les mots-clés spécifiques sont préfixés:

¤ _webkit- sous WebKit (Chrome, Safari), de _-moz- chez Gecko (Mozilla), _-ms- pour Microsoft, et _-opour Opera.

Comment écrire une transition ?

Syntaxe pour la propriété transition:

transition:[propriété] [durée] [fonction_interpolation] [retard]

Exemple 1

Transition lors du survol d'un élément HTML

¨   Avant la transition

¨   Après la transition

¨   Code HTML de l'élément à animer

¨   Code CSS pour appliquer la transition sur les 2 propriétés considérées

Exemple 2

Transition lors du survol d'un élément HTML

¨   Avant la transition

¨   Après la transition

¨   Code HTML de l'élément à animer

¨   Code CSS pour appliquer la transition sur une propriété (font-size)

¨   Code CSS pour appliquer la transition sur toutes les propriétés

¨   Code CSS pour appliquer la transition sur toutes les propriétés

Lorsque l'utilisateur clique sur un élément on modifie la valeur de la hauteur (de 0 à 120px) pour la  cible (pseudo-classe CSS div:target).

Remarques sur l'interpolation

Permet de spécifier comment (à quelle vitesse) doit la valeur d'une propriété doit être modifiée

¤ Rythme constant, ou accéléré au début et ralenti à la fin

S'applique à toutes les propriétés qu'on souhaite animer

¤ Y compris la couleur

Exemple d'application à Tir Bulles Déplacement du bouton "nouveau jeu"

¨ Nous voulons déplacer le bouton "Nouveau jeu" vers le bas de l'écran ¨ Ajoutez le code suivant à dans la classe .btn_debut_jeu

¤  Ligne 79:

n  all spécifie à quelles propriétés on applique la transition CSS (ici toutes)

n  .8s spécifie la durée de la transition en secondes

n  ease-in-out précise le type d'interpolation utilisé (accélération initiale et décélération finale)

n  1s spécifie un délai de une seconde avant le début de l'animation

¤  Lignes 80-82 on spécifie la même transition pour tous les types de navigateurs

Changer la couleur des boutons

¨   Nous allons définir une transition CSS pour animer la couleur d'un bouton

¨   Ajoutez le code suivant à

                                                                                .btn_debut_jeu:

hover

¨   Nous utilisons une interpolation ease-in-out

¤  Possibilité d'utiliser ease, linear, ease-in ou ease-out

¨   Toutes sont des alias pour des définitions spécifiques de cubic-bezier

¤  ease-in-out correspond à cubic-bezier(0.42, 0, 0.58, 1.0)

Classe                                          Pseudo-classe

Remarques sur les courbes de Bézier

...

3.2 TRANSFORMATIONS CSS DE BASE

Introduction aux transformations CSS

¨   Une transformation CSS permet de manipuler la forme d'un objet

¤  Translation de coordonnées 2D (x,y) ou 3D (x,y,z)

¤  Mise à l'échelle de dimensions selon les axes x, y et z

¤  Rotation d'un angle donné sur un des axes x, y et z

¤  Inclinaison selon les axes x ou y

¤  Ajout d'une perspective 3D

¨   Les transformations peuvent être animées avec des transitions

¨   Dans la plupart des navigateurs il est possible de modifier un objet en 2D/3D

¤  Nous allons nous concentrer sur les transformations 2D (seuls les navigateurs webkit supportent les transformations 3D)

¤  Pour les transformations 3D: ¨ Référence:

Prise en charge de CSS3 Transforms

¨ 2D – source:

¨ 3D – source:

Propriétés CSS pour les transformations 2D

¨   Propriétés CSS

¨   Remarques:

¤ Par défaut, le point d'origine d'une transformation est placé au milieu de l'élément à transformer

n 50% de la largeur, et 50% de la hauteur de l'élément

Méthodes CSS pour les transformations 2D

Exemple Appliquer un effet miroir à une image

¨   Transformation souhaitée

¤ Appliquer une rotation avec une origine différente à l'image initiale

¨   Code HTML de l'élément à transformer

¨   Code CSS pour appliquer la transformation souhaitée sur l'image

On définit une transition de 2s pour toutes les modifications apportées aux élément ayant pour classe .image1.

¨   Code CSS pour appliquer la transformation souhaitée sur l'image

Remarques additionnelles

¨   Appliquer l'effet ease-in-out à toutes les propriétés CSS pouvant recevoir des transitions, avec la même durée:

¤  transition: all .3s ease-in-out

¨   Si on souhaite avoir des effets et des durées différentes:

¤  transition: background-color .2s ease-in-out, transform 0.2s linear;

¤  Cette solution permet de réduire les effets de bord, lorsque vous modifies les valeurs d'autres propriétés CSS que vous ne souhaitez pas animer

¨   Lorsqu'on applique des transitions à des propriétés transform individuelles, on doit quand même définir les transitions associées pour les autres navigateurs

¤  transition: background-color .3s ease-in-out, transform .2s ease-inout;

¤  -moz-transition: background-color .3s ease-in-out, -moz-transform .2s ease-in-out;

¤  -webkit-transition: background-color .3s ease-in-out, -webkittransform .2s ease-in-out;

¤  -ms-transition: background-color .3s ease-in-out, -ms-transform .2s ease-in-out;

Exemple de transformation 3D (1)

¨ Soit le code HTML et le code CSS ci-dessous

 

Exemple de transformation 3D (2)

¨   Si on modifie le code CSS comme indiqué ci-dessous

¨   On obtient l'affichage suivant:

Inconvénients des transitions CSS

Plus on ajoute des animations à un élément, plus les transitions CSS sont difficiles à composer

•  Exemple: déplacer un élément de 100px sur 1s et augmenter sa taille de 10px sur 2s

•  Nécessite la définition de transitions CSS différentes pour chacune des propriétés à animer

•  Il faut pouvoir faire continuer la mise à échelle de l'élément après son déplacement (très difficile si vous souhaitez déplacer cet élément à nouveau)

L'interpolation peut altérer la manière dont le mouvement est perçu, mais ce mouvement est toujours effectué en ligne droite

•  Un mouvement selon une courbe est une suite de mouvements sur des petits segments – dans ce cas, on peut tout aussi bien utiliser JavaScript

Une fois démarrée, il est impossible d'interroger et de modifier une transition CSS

•  Le navigateur gère la transition et la mise à jour de la position de l'élément, dès que la propriété CSS à animer est modifiée

•  L'élément peut n'être affiché que jusqu'à la moitié du trajet, mais le DOM dira qu'il a terminé son déplacement – il faut attendre la fin d'une animation pour pouvoir récupérer la position d'un élément

3.3 ANIMATIONS CSS3

Animations CSS3

¨   Les animations CSS3 vous permettent de créer des animations image par image

¤  Similaire au fonctionnement de Flash

¤  Peuvent être simples ou complexes, selon le nombre de propriétés à animer

¨   Syntaxe pour définir une animation CSS3

¤  animation: [nom] [durée] [vitesse] [retard] [itérations] [direction];

Propriétés CSS3 à utiliser pour définir une animation

Exemple – pas de définition des images clés Déplacer un titre et changer sa couleur

¨   Avant la transition – on débute en bleu, avec une marge gauche à 20%

¨   Après la transition – on finit en rouge, avec une marge gauche à 60%

¨   Code HTML de l'élément à animer

¨   Code CSS pour appliquer la transition sur les 2 propriétés considérées

Exemple – définition des images clés

¨   Code CSS pour appliquer la transition sur les 2 propriétés considérées

3.4 FILTRES CSS3 Filtres CSS3

¨   Les filtres CSS3 permettent de changer l'apparence d'une image

¤  Après qu'elle ait été chargée dans le navigateur, sans modifier le fichier d'origine

¤  Impossible à coupler avec des transitions

¨   Syntaxe

¤  filter: filtermethod(valeur)

¨   Premier navigateur à prendre en charge les filtres CSS3: Firefox 35 (2015)

Source: -filters

Méthodes CSS3 à utiliser pour définir un filtre

Exemple 1

Inverser les couleurs d'une image

¨   Code CSS du filtre

¨   Code CSS du filtre

4.1 FORMATS ET CODECS VIDÉO ET AUDIO

Définitions

¨   Un type de média est un conteneur pour plusieurs composants, y compris:

¤  Une piste vidéo encodée

¤  Une ou plusieurs pistes audio encodées

¤  Des métadonnées

¤  Des marqueurs

¨   Pour lire un type de média, un navigateur nécessite une lecteur média pour ce type

¨   Pour des types de médias spécifiques, les navigateurs nécessitent des plugins spéciaux

¨   Un navigateur supporte nativement un type de média s'il n'a pas besoin d'un plugin pour lire ce type de média

Types de médias

¨   Exemples: MPEG, AVI, MP3, etc.

¨   Les types de médias représentent des conteneurs d'informations/données qui sont exploités par les lecteurs médias afin de lire leur contenu

¤  Exemple: un fichier MPEG va contenir une piste vidéo, mais aussi une ou plusieurs pistes son

¨   Un type de média peut aussi contenir:

¤  des marqueurs – pour synchroniser la piste vidéo avec la (ou les) piste(s) audio

¤  des métadonnées – titre de la vidéo, images en lien avec la vidéo, longueur totale, droits numériques associés à l'œuvre, etc.

¨   Pour certains types de médias, le navigateur aura besoin d'un plugin

¤  Souvent édités par les éditeurs du lecteur média – Apple fournit le plugin QuickTime, Adobe fournit le Flash Player plugin, etc.

¨   Si un navigateur supporte un type de média sans nécessiter de plugin, on dit que le navigateur supporte ce type "nativement"

Types de médias vidéo

Types de médias audio

Etapes du processus de lecture d'un type de média par un lecteur média

Codecs vidéo (1)

¨   A l'intérieur d'un type de média, la piste vidéo est encodée avec un type spécifique de code

¨   codec = algorithme de COmpression et DECompression de la vidéo (ou COdage et DECodage)

¨   Pas de codec vidéo précis prévu dans la spécification HTML 5 ¨ Plusieurs codecs sont supportés par les navigateurs:

Codecs vidéo implémentés par la balise 

Theora          Ogg reconnu par la balise 

 

Liens utiles: ,

 

webM / WebM_{Safari, les autres navigateurs n'en ayant pas besoin, pas plus que les logiciels comme VLC ou Miro.}a un conteneur Matroska, comme Theora est celui de Ogg. Des plugins WebM sont disponibles pour IE et

 

VP8 / VP9    Liens utiles:

 

H.264   Soutenu par Apple et Microsoft, qui font partie des ayants droit, largement utilisé dans le monde de la vidéo. _{Son utilisation est payante dans la plupart des cas, d'où une implémentation restreinte dans les navigateurs.}

Léger avantage sur WebM quand à la qualité de l'image mais cela tiendrait à son implémentation plus qu'au format. Son successeur H.265 est encombré de brevets.

 

Thor             Lancé par Cisco en tant qu'alternative à H.265, totalement gratuit et open-source

 

Liens utiles:

Codecs audio (1)

¨   Il existe des douzaines de codecs audio disponibles

¤ Il y a plus de codecs audio que de codecs vidéo – en lien avec le marché de la musique en ligne (mobiles, smart TVs, consoles, etc.) ¨ Un codec audio réalise les tâches suivantes:

L'envoyer au

Décoder une portion La transformer en périphérique de d'un fichier audio ou une onde sonore lecture de son du vidéo, audible,terminal (onde

transformée en son)

¨   Différence entre audio et vidéo: l'audio peut stocker plusieurs canaux, permettant au son d'être transmis à différentes enceintes au même moment.

¤ La plupart des fichiers audio contiennent 2 canaux (gauche/droite)

¤ Il existe des types de média vidéo qui ont plusieurs canaux (5.1 ou 7.1)

Codecs audio (2)

¨ Les codecs audio ont souvent le même nom que le type de média auquel ils sont associés

Support des codecs audio et vidéo dans les navigateurs (1)

¨ Le problème lorsqu'on ajoute de l'audio ou de la vidéo dans un site Web c'est qu'il n'existe pas une combinaison unique de types audio et vidéo qui fonctionne sur l'ensemble des navigateurs aujourd'hui

Support des codecs audio et vidéo dans les navigateurs (2)

¨ Une solution à ce problème est d'encoder vos médias au format Flash

(*.swf) et d'utiliser le plugin Flash Player du navigateur pour lire le média

¤  Problème 1: vous forcez les utilisateurs à utiliser un plugin pour lire vos médias

n  Même si le plugin est installé sur environ 97% des navigateurs, ce plugin consomme des ressources et il reste quand même 3% d'utilisateurs qui ne pourront pas lire le média

¤  Problème 2: cela n'est pas adapté pour les terminaux mobiles ne supportant pas

Flash (e.g. iPhone)

n  Segment représentant plus de 50% du trafic Internet, mais pourtant ignoré

¤  Problème 3: le lecteur Flash n'a pas un comportement stable dans tous les navigateurs (crashe parfois)

n  En effet, les éléments audio et vidéo de HTML5 permettent d'éliminer le besoin de Flash

Codecs vidéo et audio pour HTML5

¨   Jusqu'à récemment, le principal challenge pour la vidéo avec HTML5 était la division au niveau de la prise en charge des codecs vidéo:

 

¤  Problème résolu par Firefox en supportant H.264 sous Windows (22+), Linux (26+) et Mac (35+)

¤  H.264 peut maintenant être lu partout, même sous IE8 et Opera en utilisant un conteneur Flash

¨   Pour les futurs codecs, la situation est inversée:

¤  VP9 open-source est pris en charge par plusieurs navigateurs, mais pas HEVC

¤  Or la combinaison VP9/HEVC permet d'avoir la même qualité vidéo que

H.264/VP8 en utilisant la moitié de la bande passante

Codecs vidéo et audio pour HTML5

Prise en charge de l'audio et de la vidéo par les navigateurs actuels

1. Firefox supporte

H264/AAC/MP3 sur OSX à partir de la version 35. 2. Décodage logiciel seulement, impacte la performance et la durée de vie de la batterie.

3.      canPlayType() ne retourne rien sur Vorbis, mais lecture de l'audio

4.      Android Lollipop contient un décodeur logiciel qui lit le H265 dans Chrome.

Source:

Types MIME

¨   Les types MIME (Multipurpose Internet Media Extension) permettent d'identifier le contenu d'une fichier audio ou vidéo

¤ Un type MIME est composé d'au moins deux parties : un type et un sous-type et d'un ou plusieurs autres champs au besoin – e.g. application/javascript

¨   Pour s'assurer que votre serveur peut lire les types de fichiers associés, il faut modifier le contenu du fichier .htaccess (ou l'équivalent si serveur différent de Apache) et ajouter les types MIME associés

Encoder des médias

4.2 LES BALISES HTML TRADITIONNELLES

Eléments HTML historiques

¨ De par le passé, plusieurs éléments HTML permettaient d'intégrer des

4.2.1

¨   Durant des années, ce fut la balise standard pour intégrer des médias dans une page Web

¨   Un élément  a généralement 4 attributs:

¤  L'attribut type spécifie le type MIME

¤  L'attribut data précise l'URL du fichier ou du flux à lire

¤  Les attributs width et height spécifient la largeur et respectivement la hauteur soit du type média soit du lecteur média

n  Pour un fichier Flash, ces attributs font référence au fichier. Pour les autres types de médias, ils s'appliquent au lecteur média

n  Pour un fichier qui n'a pas de visuel, ces attributs peuvent être omis, ou définis à 0

n  Par exemple, pour la lecture en arrière-plan d'un fichier audio

Balise 

¨   Pour chaque élément  il est possible de déclarer plusieurs éléments afin de spécifier des valeurs pour le lecteur média

¤  Si un lecteur média ne prend pas en charge un certain paramètre, il va simplement l'ignorer

¨   L'élément dispose de 2 principaux attributs:

¤  L'attribut name spécifie le nom du paramètre pour un lecteur média en particulier

¤  L'attribut value permet de préciser la valeur du paramètre nommé précédemment

Problèmes avec la balise 

¨   Cette balise ne permet pas de préciser le lecteur média à utiliser

¤  On dépend des lecteurs que l'utilisateur  installé sur son poste

¤  Parmi ceux-ci encore faut-il qu'il y en ait un capable de lire le type MIME précisé par la balise 

¨   Pour cette raison, l'utilisation de la balise 

¨   La plupart du temps, cela représente une solution pour encapsuler les types médias tels que Flash, pour les navigateurs ne prennant pas en charge les balises HTML5 

4.2.2 Balise 

¨   Pas spécifié dans les standards HTML précédents, mais supporté par la plupart des navigateurs aujourd'hui et intégré dans la spécification HTML5

¨   Un élément  a généralement 4 attributs (comme pour ):

¤  L'attribut type spécifie le type MIME

n Si pas de type MIME précisé, le fichier sera ouvert avec le lecteur média par défaut du navigateur, selon l'extension du fichier

¤  L'attribut src précise l'URL du fichier ou du flux à lire

¤  Les attributs width et height spécifient la largeur et respectivement la hauteur soit du type média soit du lecteur média

¨   D'autres attributs spécifiques à différents lecteurs médias sont pris en charge

Balise 

¨   Principale différence avec  - tous les paramètres sont codés en tant qu'attributs

¨   Comme pour  on ne précise pas le lecteur média à utiliser ¤ D'où une utilisation sur le déclin aussi

¨   Exception: utilisation de  pour lire des vidéos YouTube

¤  Possible d'utiliser l'élément , mais l'utilisation de  est bien plus simple (pas besoin de JavaScript)

¨   La prise en charge native d'éléments multimédia par les navigateurs offre les avantages suivants:

¤  Plus besoin de plugins

¤  Gain en rapidité – tout ce qui sera pris en compte nativement par un navigateur sera toujours plus rapide qu'une solution tierce

¤  Contrôles natifs fournis par le navigateur

¤  Intégration automatique des contrôles clavier

Nouvelles balises HTML5 pour le multimédia

4.3.1 LA BALISE 

Balise 

¨   Elle permet d'encapsuler dans une page Web des fichiers ou des flux audio

¨   Utilisation:

¨   La balise  comprend des attributs supplémentaires comme preload, autoplay, loop et controls

¨   Un élément  n'affichera rien sur la page, à moins que les contrôles soient affichés

¤  Même si les contrôles ne sont pas affichés à l'écran, il est possible de les implémenter grâce à l'API Media Elements – utile lorsque vous souhaitez que votre site ait du son indépendamment des contrôles utilisateur ¨ Implémente des balises source en tant qu'éléments enfants

¤  Tout élément enfant qui n'est pas de type source sera traité comme une alternative pour les navigateurs ne prennant pas en charge cette balise

Prise en charge de la balise 

Attributs de la balise 

Attributs de la balise 

Exemples de contrôlés natifs

  Opera 11.50              IE9

Exemples basiques

¨   Généralement, la lecture en boucle, la lecture auto et cacher les contrôles sont déconseillés

¨   Exemple 1: couper le son du fichier lors de son chargement

¨   Exemple 2: empêcher le pré-chargement de la source audio

¨   Exemple 3: demander le pré-chargement des métadonnées seules

Lecture audio avec sources différentes

¨   Problème: fournir une source audio dans 2 formats à la fois Ogg Vorbis et MP3

¨   Solution: utiliser l'élément en conjonction avec l'élément 

Lecture audio avec support arrière

¨   Problème: permettre la lecture de la source audio sur des navigateurs anciens (e.g. IE6 à 8) ou ne supportant pas HTML5

¨   Solutions:

¤ Soit fournir directement le lien vers la source audio, pour que l'utilisateur la télécharge

Lecture audio avec support arrière

¨ Problème: permettre la lecture de la source audio sur des navigateurs anciens (e.g. IE6 à 8) ou ne supportant pas HTML5

¨ Solutions:

¤  Soit fournir directement le lien vers la source audio, pour que l'utilisateur la télécharge

¤  Soit passer par une encapsulation avec une balise 

Firefox 5           Safari 5.0.5   Chrome 12

4.3.2 LA BALISE 

Balise 

¨   Elle permet d'encapsuler dans une page Web des fichiers ou des flux vidéo ¨ Utilisation:

¨   La balise  comprend des attributs supplémentaires par rapport à la basie , comme poster, width, et height

¤ Les autres attributs sont identiques à ceux de la balise 

Prise en charge de la balise  

Source:

Attributs supplémentaires de la balise

Exemples de contrôlés natifs

 Opera 11.50              IE9

Exemples d'utilisation de 

¨   Généralement, la lecture en boucle, la lecture auto et cacher les contrôles sont déconseillés

¨   Exemple 1: couper le son du fichier lors de son chargement

¨   Exemple 2: empêcher le pré-chargement de la source audio

¨   Exemple 3: préciser des dimensions pour l'élément 

Lecture vidéo avec sources différentes

¨   Problème: fournir une source vidéo dans plusieurs formats à la fois (MP4,

OGG et WebM)

¨   Solution: utiliser l'élément en conjonction avec l'élément

¨   L'attribut type est déplacé sur l'élément au lieu de 

¤ type peut aussi contenir les informations relatives au codec utilisé pour encoder le fichier ou le flux vidéo

Lecture audio avec support arrière

¨   Problème: permettre la lecture de la source audio sur des navigateurs anciens (e.g. IE6 à 8) ou ne supportant pas HTML5

¨   Solutions:

¤ Soit fournir directement le lien vers la source audio, pour que l'utilisateur la télécharge

Lecture vidéo avec support arrière (1)

¨   Fournir un lien vers le fichier vidéo pour le télécharger

Télécharger la vidéo: snowy-tree.mp4

¨   Encapsuler la vidéo dans Flash, en utilisant une balise  ou 

Lecture vidéo avec support arrière (1)

¨   C'est mieux d'utiliser une balise , car même si le navigateur ne supporte pas le plugin spécifié par la balise , son contenu sera lu par tous les navigateurs

¤ Dans l'exemple précédent, la valeur de la balise sera lue par les navigateurs, même s'ils ne comprennent pas la valeur précisée dans l'attribut type de l'élément 

¨   Il est aussi possible de combiner les 2 solutions vues précédemment

4.3.3 LA BALISE

Balise présentation

¨   Elle permet de préciser des sources différentes pour un même élément

 ou  ¨ Utilisation:

Désolé, votre navigateur ne supporte pas la balise audio.

¨   Le navigateur lancera la lecture du premier format reconnu, et ignorera les formats non-reconnus

¤ Si aucun format n'est reconnu, le navigateur affichera le texte en dessous

Attributs de la balise

Exemple d'utilisation de Avec les requêtes média

¨   Vidéo pour tous les terminaux ayant une largeur de min 600px

¨   Ajuster la taille de la vidéo à la taille de l'écran

4.3.4 LA BALISE

Balise présentation

¨ Elle permet de préciser des éléments textuels synchronisés pour les éléments médias (e.g. sous-titres, descriptions, transcriptions) ¨ Utilisation:

Prise en charge de la balise

Source:

Attributs de la balise

Attributs de la balise