Differences

This shows you the differences between two versions of the page.

--- 2016_2017:s1:webdoc:td4 [2016/11/21 10:12] – [Insertion d'une vidéo / de son] 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'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>
-<video src="sintel.webm"></video>
+<video src="sample.webm"></video>
 </code>
@@ Line 27: / Line 27: @@
     * metadata : charge uniquement les métadonnées (durée, dimensions, etc.).
     * 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 =====
 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}}
   * 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>