Donnees Multimedia

Voir au format PDF

Vous êtes ici : >> HTML-CSS / Donnees Multimedia

Temps d'étude : 1h.

Niveau : Facile.

Tags : Donnees Multimedia

Fichier(s) utile(s) pour ce cours : /

Qu'est-ce que la balise <iframe> ?

La balise iframe était à l'origine présente pour permettre d'intégrer un document dans un autre.
Imaginez que vous ayez 2 pages : page A et page B

Avec la balise iframe il est possible d'incorporer la page B dans le contenu de la page A.

Généralement, nous évitons de nous servir de la balise iframe de cette manière, nous l'utilisons plutôt pour intégrer une ressource type : GoogleMap, Animation, etc.

Exemple :

pageB.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Iframe</title>
				<link rel="stylesheet" href="iframe.css">
			</head>
			<body>
				<p>Voici le contenu de ma page B</p>
			</body>
		</html>

pageA.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Iframe</title>
				<link rel="stylesheet" href="iframe.css">
			</head>
			<body>
				<p>Bonjour et bienvenue sur la page A</p>
				<iframe src="pageB.html" width="" height=""></iframe>
			</body>
		</html>

Résultat

Bonjour et bienvenue sur la page A

Voici le contenu de ma page B

Insérer une GoogleMap dans une page web

Pour cela, il faut vous rendre à l'adresse suivante : Google Maps
Saisir votre adresse dans la case de saisie de google :

explications Html / Css

Une fois que vous avez cliqué sur le lien "partager ou intégrer", une nouvelle fenêtre s'ouvre :

Nous allons donc choisir d'intégrer la carte et allons copier le code-source <iframe> pour le coller dans notre code html.

Voici ce que pourrait donner notre code html :

googleMap.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma GoogleMap</title>
				<link rel="stylesheet" href="gmap.css">
			</head>
			<body>
				<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2625.346257453956!2d2.3566772999999896!3d48.8516073!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e671fcbd4e8ee5%3A0x56c004e969467530!2s%C3%8Ele+Saint-Louis%2C+75004+Paris!5e0!3m2!1sfr!2sfr!4v1430829876812" width="600" height="450" frameborder="0" style="border:0"></iframe>
			</body>
		</html>

Ce code doit être adapté en fonction du lieu que vous souhaitez cibler

Résultat

Les valeurs pour les attributs width(largeur) et height(hauteur) peuvent être changées.

Insérer une vidéo YouTube dans une page web

Pour insérer une vidéo YouTube dans une page web, vous devez vous rendre sur le site officiel de YouTube.

Rentrez dans l'une des vidéos de votre choix et cliquez ensuite sur la partie "partager" et "intégrer" :

explications Html / Css

Copiez le code-source pour le récupérer et saisissez le dans un fichier de code :

YouTube.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Vidéo YouTube</title>
				<link rel="stylesheet" href="yt.css">
			</head>
			<body>
				<iframe width="560" height="315" src="https://www.youtube.com/embed/0AAsU-02d4c" frameborder="0" allowfullscreen></iframe>
			</body>
		</html>

Noter qu'il faut parfois vérifier la présence du protocole http:// en début d'url (pas toujours fourni par YouTube) et l'écrire soi-même si cela est nécessaire.

Les valeurs pour les attributs width(largeur) et height(hauteur) peuvent être changées.

Résultat

Pour faire démarrer une vidéo YouTube à un moment précis ou un temps donné, vous pouvez utiliser le complément : ?start=10 (10 pour 10 secondes).

YouTube2.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Vidéo YouTube</title>
				<link rel="stylesheet" href="yt.css">
			</head>
			<body>
				<object width="560" height="315"><embed src="http://www.youtube.com/v/nSWfyx7pgfk&hl=fr&fs=1&start=10"  allowfullscreen="true"></embed></object>
			</body>
		</html>

Noter ici l'utilisation de la balise <object> et <embed>.

Vous n'avez qu'à remplacer le code de la video : nSWfyx7pgfk par le votre et vous pourrez ainsi garder la même structure de code.

Résultat

Pour lancer et démarrer une vidéo YouTube automatiquement : ?autoplay=1 ou &autoplay=1.

YouTube3.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Vidéo YouTube</title>
				<link rel="stylesheet" href="yt.css">
			</head>
			<body>
				<object width="560" height="315"><embed src="http://www.youtube.com/v/nSWfyx7pgfk&hl=fr&fs=1&start=10&autoplay=1"  allowfullscreen="true"></embed></object>
			</body>
		</html>

Généralement, les sites web publient des videos grâce à YouTube plutôt que des fichiers locaux, pour plusieurs raisons:

Stocker sur YouTube, le fichier ne prend pas de place sur notre serveur (avec plusieurs video de 50 ou 100 mo, cela grimpe vite).

YouTube fournit une visibilité supplémentaire, les videos seront visitées sur votre site mais aussi sur celui de YouTube avec le trafic que l'on connait.

On profite des fonctionnalités YouTube, on a pas besoin de développer le lecteur et pas non plus le bouton de partage, des partenaires peuvent prendre notre video et la partager aussi (si on le souhaite).

Intégrer une vidéo locale avec la balise <video>

Pour intégrer notre propre vidéo, nous allons nous servir de la balise <video> ayant fait son apparation lors de la dernière mise à jour du langage (html5).

Si vous souhaitez réaliser ces tests, vous aurez besoin de récupérer 3 fichiers : CIC - Fichier1 - CIC - Fichier2 - CIC - Fichier3.

Intégrer une vidéo au format .ogv

video.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Vidéo Perso</title>
				<link rel="stylesheet" href="video.css">
			</head>
			<body>
				<p>cic.ogv</p>
				<video preload controls poster="cic.gif"> <!-- video ogv -->
					<source src="cic.ogv" type="video/ogg">
				</video>
				
			</body>
		</html>

Intégrer une vidéo au format .webm

video.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Vidéo Perso</title>
				<link rel="stylesheet" href="video.css">
			</head>
			<body>
				<p>cic.webm</p>
				<video preload controls poster="cic.gif"> <!-- video webm -->
					<source src="cic.webm">
				</video>
				
			</body>
		</html>

Intégrer une vidéo au format .mp4

video.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Vidéo Perso</title>
				<link rel="stylesheet" href="video.css">
			</head>
			<body>
				<p>cic.mp4</p>
				<video preload controls poster="cic.gif"> <!--video mp4 -->
					<source src="cic.mp4">
				</video>
				
			</body>
		</html>

Intégrer une vidéo compatible sous différents formats

video.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Vidéo Perso</title>
				<link rel="stylesheet" href="video.css">
			</head>
			<body>
				<p>cic</p>
				<video preload controls autoplay poster="cic.gif"> <!-- video ogv, webm, mp4 : 1 seule video avec 3 sources différentes-->
					<source src="cic.ogv" type="video/ogg">
					<source src="cic.webm">
					<source src="cic.mp4">
				</video>				
			</body>
		</html>

Les attributs de la balise <video>

La balise <video> nous permet d'intégrer plusieurs attributs comme preload pour permettre un préchargement avant que l'internaute clique sur lecture.

Si vous n'ajoutez pas l'attribut preload, la vidéo sera chargée uniquement au moment où l'internaute cliquera sur "lecture".

L'attribut controls nous permet d'obtenir la barre de contrôle (lecture, pause, etc).

L'attribut autoplay permet de démarrer automatiquement la vidéo.

L'attribut loop (non présent dans cet exemple) permet d'effectuer une répétition sur la lecture de la vidéo.

L'attribut poster permet de recouvrir la vidéo par une image de notre choix plutot qu'avoir l'aperçu de la première seconde de vidéo.

La balise <source> nous permet de préciser le fichier que l'on doit lire.

Attention
Pensez à faire des tests de compatibilité sur différents navigateurs !!

Lors du dernier exemple, nous démarrons avec une source ogv, si le navigateur ne peut pas lire ogv, il essaiera de lire la source webm, si ce n'est pas possible il tentera de lire la source mp4.

Cela lui permettra d'avoir plusieurs options afin d'être sûr que la video puisse se lire.

Résultat

Intégrer une vidéo en background

C'est à la mode ! intégrer une vidéo en fond de page avec la balise video de html5. Pour se faire, il faut faire attention à ne pas prendre une vidéo trop lourde en terme de poids.

Récupérons ce fichier : videoBackground.webm

Ecrivons le code :

video-fond.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Vidéo en Fond</title>
				<link rel="stylesheet" href="video-fond.css">
			</head>
			<body>
				<video autoplay loop poster="videoBackground.jpg">
					<source src="videoBackground.webm" type="video/webm">
					<source src="videoBackground.mp4" type="video/mp4">
				</video>
				<div class="contenu">
					<p>Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... 
					Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... 
					Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... 
					Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... 
					Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... 
					Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... 
					Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... Le texte ... </p>
				</div>
			</body>
		</html>

La balise <video> nous permet de déclarer l'intégration d'une vidéo et la balise <source> permet de préciser le chemin de la vidéo à lire.

L'attribut autoplay permet la lecture automatique.

L'attribut loop permet d'effectuer une lecture en boucle (répétition).

video-fond.css :

		video{
		position: fixed;
		top: 0;
		left: 0;
		min-width: 100%;
		min-height: 100%;
		z-index: -1000;
		background: url(videoBackground.jpg) no-repeat;
		background-size: cover;
		/* width: auto; height: auto; */
		}
		div{
		font-family: arial;
		background: rgba(255,255,255,0.3);
		width: 500px;
		min-height: 300px;
		float: right;
		margin: 150px 0 0 0;
		padding: 20px;
		border-radius: 10px;
		border: 1px solid #c0c0c0;
		}

Décryptons ensemble le code css :

Video: background cela permet d'éviter un fond noir lorsque la première lecture se termine et que la 2e redémarre avec loop

Video: background-size: cover; cela permet au background de couvrir tout l'écran

Video: position : fixed; -- maintien la video fixée même si l'on descend dans la page web avec l'ascenceur (scroll).

Video: top : 0 ; -- permet d'être à 0 pixel du haut et ainsi éviter un décalage.

Video: left : 0; -- permet d'être à 0 pixel de la gauche et ainsi éviter un décalage.

Video: min-width: 100%; -- largeur minimum

Video: min-height: 100%; -- hauteur minimum

Video: z-index : -1000; permet de définir une valeur qui détermine la position de l'élément au niveau de la superposition (premier plan, second plan).

div : background: rgba(255,255,255,0.3); -- permet d'avoir un fond atténué.

div : width: 500px; largeur

div : min-height: 300px; hauteur minimum

div : float: right; élément flottant

div : margin: 150px 0 0 0; marges extérieures

div : padding: 20px; marges intérieures.

div : border-radius: 10px; bordure arrondie

div : border: 1px solid #c0c0c0; bordure

Résultat

Intégrer une musique audio avec la balise <audio>

Pour intégrer une musique ou un son audio dans une page web en html, nous allons utiliser la balise <audio>.

Pour que l'exemple fonctionne, vous allez avoir besoin du fichier suivant : Son mp3 a télécharger+ Son Ogg a télécharger

Le code :

audio.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon son audio</title>
				<link rel="stylesheet" href="audio.css">
			</head>
			<body>
				<audio src="son.mp3" controls preload></audio>
				<audio src="son.ogg" controls></audio> 
			</body>
		</html>

Nous ajoutons notre musique au format mp3 et pouvons également l'ajouter au format .ogg pour les navigateurs ne supportant pas l'extension mp3.

controls est un attribut qui permet d'utiliser les contrôles audios classiques (lecture, pause...).

autoplay est un attribut qui permet d'utiliser les contrôles audios classiques (lecture, pause...).

preload permet un préchargement avant que l'internaute clique sur lecture.

L'attribut preload peut prendre 3 valeurs :
none = pas de préchargement (économise donc de la bande passante si le contenu audio n'est pas lu)
auto = préchargement
metadata = préchargement mais uniquement des métadonnées du fichier audio.

Résultat

Intégrer une animation Flash

Pour intégrer une animation flash dans une page web en html, nous allons utiliser la balise <object>.

Il faut savoir que les produits Apple (iphone, ipad) ne supportent pas la technologie flash et donc que cette technologie est de moins en moins utilisée (pareil pour les langages AS ActionScript).

Pour que l'exemple fonctionne, vous allez avoir besoin du fichier suivant : Animation a télécharger

Ecrivons le code :

animationFlash.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon son audio</title>
				<link rel="stylesheet" href="animationFlash.css">
			</head>
			<body>
				<object>
					<embed src="animation.swf"></embed>
				</object>
			</body>
		</html>

La balise <object> permet de définir une zone d'animation.

La balise <embed> permet de préciser la source de l'animation.

Autre exemple :

animationFlash2.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon son audio</title>
				<link rel="stylesheet" href="animationFlash.css">
			</head>
			<body>
				<object type="application/x-shockwave-flash" data="animation.swf" width="800" height="250">
					<param name="movie" value="animation.swf">
					<param name="wmode" value="transparent">
					<param name="quality" value="high">
					<p>L'animation flash n'est pas prise en charge</p>
				</object>
			</body>
		</html>

Résultat

Allez au chapitre suivant : 18. Balises Html Et Proprietes Css