.... ... ...
¨ 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
¨ 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
¨ 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
¨ 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
¨ On peut calculer l'angle de tir d'une bulle en utilisant la fonction arctan (tangente inverse)
¨ 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)
¨ 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
¨ 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
¨ 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
¨ 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 1e 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;
}); };
¨ Ajoutez la fonction animerExplosion(…) dans
En se basant sur le type de bulle, la fonction calcule la valeur de la position haute de l'image d'arrière-plan. On ajoute ensuite une transformation CSS (rotation) pour faire tourner la bulle d'un angle aléatoire. La fonction permettant de décaler l'image d'arrière-plan est appelée 4 fois,
chaque appel étant retardé de 25ms. Enfin le Ana ROXIN | M1 Multimédia | HTML5 et CSS3 pour le multimédiasprite est supprimé du DOM. Semestre Printemps 2017
¨ 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 1e 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 2e 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
Déterminer la bonne collision
Détecter une collision revient à détecter lorsqu'un vecteur partant du centre de la bulle lancée va couper un cercle de rayon 2*R. Ce cercle constitue la zone de collision d'une bulle affichée dans la grille du jeu.
La figure est transformée en une formule mathématique utilisant des vecteurs.
Le code sera dans un fichier à part
¨ Calcul du vecteur de la bulle du joueur
¤ Equation du cercle: ?−??2 + (?−?? )2=?²
n x et y sont des points sur la circonférence du cercle
n cx et cy sont les coordonnées du centre du cercle
n r est le rayon du cercle
¤ Equation de la bulle lancée: ???? ==???? ++??????
n px et py 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
¨ 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
¨ 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
Source: -transitions
¨ 5 propriétés CSS peuvent être utilisées pour les transitions:
|
Propriété CSS |
Description |
|
transition |
Raccourci pour spécifier les propriétés suivantes |
|
transition-property |
Spécifier la (ou les) propriété(s) CSS à laquelle (auxquelles) s'applique la transition |
|
transition-duration |
La durée de la transition en secondes ou millisecondes |
|
transition-timing-function |
Le type de courbe pour l'interpolation. Valeurs possibles: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier |
|
transition-delay |
Le délai à appliquer avant le début de la transition (en secondes ou millisecondes) |
¨ 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).
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
¨ 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
¨ 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...
3.2 TRANSFORMATIONS CSS DE BASE
¨ 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:
¨ Propriétés CSS
|
Propriété CSS |
Description |
|
transform |
Permet d'appliquer une ou plusieurs transformations à un élément HTML |
|
transform-origin |
Spécifie le point d'origine pour la transformation considérée |
¨ 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éthode CSS |
Description |
|
rotate(angle) |
Rotation d'un élément de l'angle spécifié |
|
rotateX(angle) rotateY(angle) |
Rotation d'un élément à la verticale, respectivement à l'horizontale |
|
scaleX(valeur) scaleY(valeur) |
Mise à l'échelle horizontale (modifie la largeur), respectivement verticale (modifie la hauteur) |
|
scale(valeur-x, valeur-y) |
Mise à l'échelle d'un élément en modifiant sa largeur et son hauteur |
|
skewX(angle) skewY(angle) |
Rotation d'un élément sur l'axe X et respectivement Y |
|
skew(angle-x, angle-y) |
Rotation d'un élément sur les axes X et Y |
|
translateX(valeur) translateY(valeur) |
Déplacement d'un élément horizontalement (à gauche ou à droite) et respectivement verticalement (en haut et en bas) |
|
translate(valeur-x, valeur-y) |
Déplacement d'un élément haut/bas et droite/gauche |
|
matrix(a,b,c,d,e,f) Ana ROXIN | M1 Multimédia | HTML5 et CSS3 |
6 valeurs de la matrice pour appliquer les transformations pour le multimédia Semestre Printemps 2017 précédentes avec une seule méthode |
¨ Transformation souhaitée
¤ Appliquer une rotation avec une origine différente à l'image initiale
On affiche 2 copies de la même image côte à côte. Lorsque l'utilisateur survole l'image, elle est retournée de 180° (effet miroir). La rotation est appliquée à partir du côté droit de la 2e image, d'où l'espace blanc entre les images.
¨ 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
¨ 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;
Appliquer ces corrections dans
¨ Soit le code HTML et le code CSS ci-dessous
¨ Si on modifie le code CSS comme indiqué ci-dessous
¨ On obtient l'affichage suivant:
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
¨ 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é CSS |
Description |
|
animation |
Propriété raccourci pour spécifier en une seule lignes des valeurs pour toutes les propriétés qui suivent. |
|
animation-name |
Nom d'un sélecteur @keyframes définissant les images-clé à utiliser pour l'animation. |
|
animation-duration |
Durée de l'animation en secondes ou millisecondes |
|
animation-delay |
Durée en secondes ou millisecondes à respecter avant de débuter l'animation |
|
animation-iteration-count |
infinite soit une valeur précisant le nombre de répétitions |
|
animation-timing-function |
La courbe de vitesse à utiliser pour l'animation |
|
animation-direction |
Spécifie la direction de l'animation. Valeurs possibles: normal, reverse ou alternate. |
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
¨ 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éthode CSS |
Description |
|
blur(valeur) |
Applique un flou gaussien. Valeur en pixels |
|
brightness(valeur) |
Ajuste la luminosité, de 0% (noir) à 100% (non modifié). Les valeurs supérieures à 100% résultent en une image plus lumineuse. |
|
contrast(valeur) |
Ajuste le contraste, de 0% (noir) à 100% (non modifié). |
|
dropshadow(valeurs) |
Similaire à la propriété box-shadow. Affiche une ombre portée |
|
grayscale(valeur) |
transforme l'image en niveaux de gris. 100% totalement en niveaux de gris, 0% laisse l'image inchangée |
|
hue-rotate(angle) |
Ajuste la teinte de l'image, selon une rotation sur le cercle des couleurs. |
|
invert(valeur) |
Inverse les couleurs de l'image (100% complétement inversé, 0% laisse l'image inchangée). |
|
opacity(valeur) |
Rend l'image transparente: 0 pour une image totalement transparente, 1 pour une image inchangée. |
|
saturate(valeur) Ana ROXIN | M1 Multimédi |
Varier la saturation de l'image (0% saturée, 100% inchangée) a | HTML5 et CSS3 pour le multimédia Semestre Printemps 2017 |
|
sepia(valeur) |
Image en sépia (100% sépia, 0% inchangée) |
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
¨ 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
¨ 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"
|
Type média |
Description |
|
MPEG-4 |
Extensions *.mp4 ou *.m4v. Basé sur le type média *.mov (Apple QuickTime). Nouveau format de fichier utilisé par iTunes pour fournir des vidéos. |
|
Flash Video |
Extensions *.flv ou *.f4v. Initialement conçu par Macromedia, puis racheté par Adobe, la vidéo Flash fut le format le plus populaire pour fournir des vidéos durant la dernière décennie. |
|
Ogg |
Extension *.ogg, open-source et open-standard, nativement pris en charge par Firefox, Chrome et Opera. Ogg utilise le codec Theora pour la compression du flux vidéo. |
|
WebM |
Type de fichier relativement nouveau (*.webm), pris en charge nativement par Firefox, Chrome, Opera et IE9+. Permet la lecture de fichiers vidéo directement dans le navigateur (HTML5). Adobe a annoncé que les futures versions de Flash supporteraient le WebM. Repose sur le codec VP8. |
|
ASF |
Advanced Systems Format correspond à l'extension *.asf. Type de média propriétaire de Microsoft, spécifiquement conçu pour le streaming. Le flux vidéo d'un ASF est typiquement du WMV (Windows Media Video) |
|
Ana ROXIAVI |
N | M1 Multimédia | HTML5 et CSS3 pour le multimédiaAudio Video Interleave (*.avi) est aussi un format propriétaire de MicrosoftSemestre Printemps 2017(1992). |
|
Type média |
Description |
|
MP3 |
MPEG-1 Audio Layer 3 est un des types de médias les plus utilisés pour les fichiers audio. |
|
AAC |
Advanced Audio Coding (AAC) est le format utilisé par Apple pour fournir de l'audio sur le iTunes Store. AAC a été initialement conçu pour offrir une meilleure qualité audio que le MP3. |
|
Ogg |
Ogg est le nom du format conteneur pour l'audio, la vidéo et les métadonnées de . Vorbis est le nom d'un système de compression audio spécifiquement développé pour être contenu dans des conteneurs Ogg (possibilité d'intégrer d'autres formats e.g. FLAC ou Speex). Vorbis est comparable aux autres formats utilisés pour stocker et lire de la musique numérique, comme MP3, VQF, AAC. Il est différent de ces formats car il est complètement gratuit, ouvert, et non breveté. |
|
WMA |
Windows Media Audio (WMA) correspond aux extensions *.wma. C'est le système de compression propriétaire de Microsoft, utilisé pour encoder le flux audio des conteneurs ASF. |
¨ 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:
|
VP8/9 |
MPEG 4 |
H.264 |
Theora |
Opus |
Dalaa |
|||||
|
•Initialement développé par On2 Technologies, puis racheté par Google. •Open source, gratuit, il est équivalent en qualité à H.264.
•Aussi connu sous le nom WebM |
•Standard avec diverses implémentations. E.g. Xvid est open source mais cela n'empêche pas l'existence de brevets sur le codec. |
•Version de 1993 de MPEG 4 pour les appareils moins performants •Fournit une haute compression pour une qualité réduite. •Utilisé par Youtube pour la HD et par BluRay. |
•Codec libre et open source. •Ne supporte pas l'accélération matérielle comme le fait H.264. |
•Codec totalement libre et gratuit pour remplacer H.264. |
•Codec en cours de définition par Xiph et Mozilla •Ecrit pour être supérieur à H.265 et donc nettement plus efficace que H.264. |
Theora Ogg reconnu par la balise
Liens utiles: ,
webM / WebMSafari, 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:
¨ 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)
¨ Les codecs audio ont souvent le même nom que le type de média auquel ils sont associés
|
AAC |
FLAC |
MP3 |
Vorbis |
WMA |
||||
|
• Standard d'encodage pour le type média *.aac. • Utilisé par Apple sur tous ses produits • Aussi sur Nintendo Dsi, Wii et 3DS, Sony PS3 et Portable • Mobiles: Sony Ericsson, Nokia, Android et WebOS |
• Free Lossless Audio Codec • Gratuit, opensource
• Grand taux de compression – réduction de la taille des fichiers audio d'environ 60% |
• MPEG-1 Audio Layer 3 • Un des types de fichiers audio les plus utilisés |
• Typiquement contenu dans l'extension *.ogg • Appelé Ogg Vorbis • Supporté nativement par la plupart des installations Linux • Aussi par les navigateurs Chrome, Firefox et Opera. |
• Windows Media Audio • Contenu dans l'extension *.wma • Utilisé pour encoder les flux audio des fichiers *.asf |
¨ 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
|
Navigateur |
Types audio |
Types vidéo |
|||||
|
Ogg Vorbis |
MP3 |
AAC |
WebM |
Ogg Theora |
MP4 |
VP8 (WebM) |
|
|
Chrome |
Oui |
Oui |
Oui |
Oui |
Oui |
Oui |
Oui |
|
IE |
Non |
9.0+ |
Non |
Non |
Non |
9.0+ |
Non |
|
Firefox |
Oui |
Oui |
Oui |
Oui |
Oui |
Oui |
Oui |
|
Safari |
Non |
Oui |
Oui |
Non |
Non |
Oui |
Non |
|
Opera |
Oui |
Oui |
Oui |
Oui |
Oui |
Oui |
Oui |
¨ 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
¨ 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
|
Navigateur |
H264 |
H265 |
VP8 |
VP9 |
AAC |
MP3 |
VORBIS |
OPUS |
|
Chrome Desktop |
30+ |
– |
30+ |
30+ |
30+ |
30+ |
30+ |
33+ |
|
Internet Explorer (Windows) |
9+ |
– |
– |
– |
9+ |
9+ |
– |
– |
|
Firefox Desktop |
22+1 |
– |
20+ |
28+ |
22+1 |
22+1 |
20+ |
20+ |
|
Safari (Mac) |
3+ |
– |
– |
– |
3+ |
3+ |
– |
– |
|
Opera Desktop |
– |
– |
11+ |
16+ |
– |
– |
11+ |
12+ |
|
Safari (iOS) |
3+ |
– |
– |
– |
3+ |
3+ |
– |
– |
|
Stock Browser (Android) |
2.3+ |
– |
4.0+2 |
– |
2.3+ |
2.3+ |
4.0+3 |
– |
|
Chrome (Android) |
30+ |
– 4 |
30+2 |
– |
30+ |
30+ |
30+ |
– |
|
Internet Explorer (WinPhone) |
7.5+ |
– |
– |
– |
7.5+ |
7.5+ |
– |
– |
|
Firefox (Android)
Ana ROXIN | M1 M |
20+ ultimé |
– dia | H |
20+2 TML5 |
28+2 et CSS |
20+ pour l |
– e multim |
20+ édia |
20+ |
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:
¨ 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
|
Type média |
Type MIME |
Codec |
|
MP3 |
audio/mpeg3, audio/x-mpeg-3 |
|
|
Ogg Vorbis |
audio/ogg |
|
|
VP8 / WebM |
video/webm |
theora, vorbis |
|
Ogg Theora |
video/ogg |
theora, vorbis |
|
Flash |
application/x-shocwave-flash |
|
|
AVI |
application/x-troff-msvideo, video/avi, video/msvideo, video/x-msvideo |
4.2 LES BALISES HTML TRADITIONNELLES
¨ De par le passé, plusieurs éléments HTML permettaient d'intégrer des
¨ 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
¨ 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
¨ 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
¨ 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
¨ 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
4.3.1 LA 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
|
Attribut |
Description |
|
src |
Fournit l'adresse de la ressource média (fichier ou flux audio). Cet attribut doit contenir une URL valide vers la source audio. |
|
preload Ana ROXIN | M1 Multi |
Utilisé pour indiquer au navigateur comment pré-charger la source audio. Représente seulement une suggestion pour le navigateur, ce dernier fera ce qu'il veut (à savoir respecter les préférences utilisateur). Trois réglages possibles: 1)none: précise au navigateur de ne pas pré-charger la source audio. L'utilisateur n'est pas censé lire l'audio, pas besoin de précharger. Le chargement débutera dès que l'utilisateur cliquera sur un bouton "play". 2)metadata: précise au navigateur de pré-charger les métadonnées associées à la source audio (e.g. durée). 3)auto: c'est le navigateur qui décide s'il télécharge que les métadonnées ou la source en intégralité, ou rien du tout ! C'est le média | HTML5 et CSS3 pour le multimédia Semestre Printemps 2017 réglage par défaut de l'attribut preload, si rien n'est précisé. |
|
Attribut |
Description |
|
autoplay |
Valeur booléenne, true pour démarrer la lecture de l'audio dès que la page est chargée dans le navigateur. |
|
controls |
Valeur booléenne, true pour afficher la barre de contrôles par défaut, en dessous du fichier lu. |
|
muted |
Valeur booléenne, permettant de couper le son d'un fichier audio. Actuellement très peu pris en charge par les navigateurs. |
|
loop |
Valeur booléenne, précisant si le fichier doit être lu en boucle. A utiliser avec précaution, car cela peut devenir une nuisance. |
|
crossorigin |
Permettre ou interdire le partage d'un média sur plusieurs domaines, en utilisant la spécification CORS (Cross-Origin). Valeurs possibles: anonymous (permet l'accès anonyme à la source audio) ou usecredentials (il faut s'authentifier pour lire la source) |
|
mediagroup |
Permet de grouper plusieurs médias. Permet la lecture et la synchronisation de 2 sources audio à 2 endroits différents de l'écran |
¨ 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
¨ 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
¨ 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
¨ Problème: permettre la lecture de la source audio sur des navigateurs anciens (e.g. IE6 à 8) ou ne supportant pas HTML5
¤ 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 124.3.2 LA 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
Source:
Attributs supplémentaires de la balise
|
Attribut |
Description |
|
poster |
Permet d'afficher une image lorsqu'il n'y a pas de données vidéo disponibles. Si l'attribut poster n'est pas spécifié, le navigateur affichera la 1e image de la vidéo. Doit contenir une URL valide vers l'image. |
|
width |
Définit la largeur en pixels de l'élément |
|
height |
Définit la hauteur en pixels de l'élément |
Exemples de contrôlés natifs
Opera 11.50 IE9
¨ 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
¨ 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
¨ 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
¨ 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
¨ 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
¨ 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
|
Attribut |
Description |
|
src |
Fournit l'adresse de la ressource média, audio ou vidéo. Cela doit être une URL valide. |
|
type |
Spécifie le type de la ressource média, afin d'aider le navigateur à décider s'il peut la lire ou pas. Il est aussi possible de préciser le codec. |
|
media |
Spécifie le type de média visé pour la ressource en question (e.g. un certain type de terminal, avec une certaine largeur, etc.). La valeur de cet attribut doit être une requête média valide. |
¨ 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
¨ Elle permet de préciser des éléments textuels synchronisés pour les éléments médias (e.g. sous-titres, descriptions, transcriptions) ¨ Utilisation:
Source:
|
Attribut |
Description |
|
kind |
Spécifie le type de données fournies par la balise . Si l'attribut est omis, la valeur par défaut est subtitles. Autres valeurs possibles: § subtitles – transcription des dialogues, affichée par-dessus la vidéo § captions – transcription complète de l'audio (dialogues, sons, etc.), utile lorsque la piste son n'est pas disponible ou pour les personnes ayant des déficiences auditives § descriptions – fournit une description textuelle du composant vidéo de la ressource média, surtout à utiliser lorsque la vidéo n'est pas disponible § chapters – spécifie les titres des chapitres, et permet de naviguer à travers le contenu de la ressource média § metadata – contient plutôt des données à être utilisées dans des scripts, et non pas à afficher à l'écran |
|
src |
URL valide vers les données de la piste texte. Deux formats peuvent être utilisés: WebSRT et le WebVTT |
|
Attribut |
Description |
|
srclang |
Précise la langue de la piste texte |
|
label |
Précise un titre lisible par l'utilisateur pour la piste en question. Doit être unique parmi les différentes éléments définis pour une même ressource. |
|
default |
Informe le navigateur que l'élément en question doit être utilisé par défaut, si les préférences utilisateur ne spécifient pas autre chose. |
|
ruby |
Définit du contenu Ruby (textes courts, affichés à côté du texte principal), souvent utilisé pour les langues asiatiques pour indiquer la prononciation ou pour fournir des annotations. Plus d'informations: -ruby-1/ |
|
[hh:]mm:ss. msmsms |
Définit une étiquette temporelle à laquelle le texte devient actif – très similaire à du texte pour karaoke. |
