2016_2017:s1:webdoc:td4
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
2016_2017:s1:webdoc:td4 [2016/11/21 09:55] – logre | 2016_2017:s1:webdoc:td4 [2016/11/28 17:05] (current) – [[TD4] Multimédia et projet] logre | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== [TD4] Multimédia et projet | + | ====== [TD4] Multimédia et autres balises |
+ | L' | ||
+ | |||
+ | Comme toujours, l' | ||
+ | |||
+ | Au delà de ces aspects d' | ||
+ | Ainsi, vous arriverez au prochain TD avec un plan de votre site, une ébauche de style, de layout et de contenu que vous souhaitez mettre en place afin que votre encadrant de TD puisse vous conseiller sur la difficulté relative de vos objectifs. | ||
+ | |||
+ | ===== Insertion d'une vidéo / de son ===== | ||
+ | |||
+ | Beaucoup d' | ||
+ | Il existe en HTML5 une balise dédiée : < | ||
+ | |||
+ | <code html> | ||
+ | <video src=" | ||
+ | </ | ||
+ | |||
+ | Par défaut, aucun contrôle ne permet de lancer la vidéo. Il faut pour cela ajouter quelques attributs (la plupart sont les mêmes que pour la balise < | ||
+ | * **poster** : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le navigateur prend la première image de la vidéo. Mais s'agit souvent d'une image noire ou peu représentative de la vidéo. Vous pouvez tout simplement faire une capture d' | ||
+ | * **controls** : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. Ce seront les contrôles par défaut définis par votre navigateur. | ||
+ | * **width/ | ||
+ | * **loop** : jouer la vidéo en boucle. | ||
+ | * **autoplay** : démarrer la lecture de la vidéo dés le chargement de la page. | ||
+ | * **preload** : indique comment ce qui peut être pré-chargée dès le chargement de la page : la vidéo, uniquement les métadonnées ou rien du tout. Cet attribut peut prendre les valeurs : | ||
+ | * auto (par défaut) : le navigateur décide. | ||
+ | * metadata : charge uniquement les métadonnées (durée, dimensions, etc.). | ||
+ | * none : pas de pré-chargement. | ||
+ | |||
+ | < | ||
+ | |||
+ | Tous les navigateurs ne lisent pas tous les formats de vidéos. Pour pallier ceci, vous pouvez indiquer plusieurs sources de vidéo à votre balise : | ||
+ | <code html> | ||
+ | <video controls poster=" | ||
+ | <source src=" | ||
+ | <source src=" | ||
+ | <source src=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Pour l' | ||
+ | <code html> | ||
+ | <audio src=" | ||
+ | </ | ||
+ | |||
+ | Testez l' | ||
===== Tableaux ===== | ===== Tableaux ===== | ||
La déclaration d'un //tableau// se fait avec la balise conteneur ''< | La déclaration d'un //tableau// se fait avec la balise conteneur ''< | ||
Line 157: | Line 201: | ||
* Intégrez cette image sur votre page {{ : | * Intégrez cette image sur votre page {{ : | ||
* Utilisez l' | * Utilisez l' | ||
- | * Ajouter cette image devenue active à votre page web (a priori dans la zone de démonstration de vos connaissances). | ||
</ | </ | ||
2016_2017/s1/webdoc/td4.1479722146.txt.gz · Last modified: 2016/11/21 09:55 by logre