User Tools
2016_2017:s1:webdoc:td4
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
2016_2017:s1:webdoc:td4 [2016/11/21 11:12] logre [Insertion d'une vidéo / de son] |
2016_2017:s1:webdoc:td4 [2016/11/28 18:05] (current) logre [[TD4] Multimédia et projet] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== [TD4] Multimédia et projet ====== | + | ====== [TD4] Multimédia et autres balises ====== |
| L'objectif de ce TD est de vous donnez quelques outils supplémentaires en HTML et CSS pour alimenter vos pages web. | L'objectif de ce TD est de vous donnez quelques outils supplémentaires en HTML et CSS pour alimenter vos pages web. | ||
| Line 14: | Line 14: | ||
| <code html> | <code html> | ||
| - | <video src="sintel.webm"></video> | + | <video src="sample.webm"></video> |
| </code> | </code> | ||
| Line 27: | Line 27: | ||
| * metadata : charge uniquement les métadonnées (durée, dimensions, etc.). | * metadata : charge uniquement les métadonnées (durée, dimensions, etc.). | ||
| * none : pas de pré-chargement. | * none : pas de pré-chargement. | ||
| + | |||
| + | <note>Les proportions de la vidéo sont **toujours** conservées. Définissez une largeur ou une hauteur, le navigateur fera en sorte de ne pas dépasser les dimensions indiquées mais il conservera les proportions.</note> | ||
| + | |||
| + | 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="sample.jpg" width="600"> | ||
| + | <source src="sample.mp4"> | ||
| + | <source src="sample.webm"> | ||
| + | <source src="sample.ogv"> | ||
| + | </video> | ||
| + | </code> | ||
| + | |||
| + | Pour l'audio, il s'agit de la même chose : | ||
| + | <code html> | ||
| + | <audio src="musique.mp3"></audio> | ||
| + | </code> | ||
| + | |||
| + | Testez l'insertion d'une vidéo extérieure avec ce lien : http://www.i3s.unice.fr/~logre/docs/my_vid.mp4 | ||
| ===== Tableaux ===== | ===== Tableaux ===== | ||
| La déclaration d'un //tableau// se fait avec la balise conteneur ''<table>''. | La déclaration d'un //tableau// se fait avec la balise conteneur ''<table>''. | ||
| Line 183: | Line 201: | ||
| * Intégrez cette image sur votre page {{ :2015_2016:s1:webdoc:plan_iut_nice.jpg?nolink&450 |prenez celle-ci}} | * Intégrez cette image sur votre page {{ :2015_2016:s1:webdoc:plan_iut_nice.jpg?nolink&450 |prenez celle-ci}} | ||
| * Utilisez l'outil précédent pour créer une map dans cette image. lorsque l'on clique sur l'icone de Nice on est redirigé vers la page de présentation de l'iut Nice (http://www.iut.unice.fr/formations/site/id/4_site-de-nice) de même pour Sophia (http://www.iut.unice.fr/formations/site/id/5_sophia-antipolis). | * Utilisez l'outil précédent pour créer une map dans cette image. lorsque l'on clique sur l'icone de Nice on est redirigé vers la page de présentation de l'iut Nice (http://www.iut.unice.fr/formations/site/id/4_site-de-nice) de même pour Sophia (http://www.iut.unice.fr/formations/site/id/5_sophia-antipolis). | ||
| - | * Ajouter cette image devenue active à votre page web (a priori dans la zone de démonstration de vos connaissances). | ||
| </box> | </box> | ||
2016_2017/s1/webdoc/td4.1479723141.txt.gz · Last modified: 2016/11/21 11:12 by logre
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
