User Tools

Site Tools


2016_2017:s1:webdoc:td4

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Last revision Both sides next 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/25 14:04]
logre [Insertion d'une vidéo / de son]
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.txt · Last modified: 2016/11/28 18:05 by logre