Le multimédia Le multimédia - LabUnix

Transcription

25/10/2011
Le multimédia
INF2005– Programmation web– A. Obaid
Le multimédia
• Comprend le texte, l'image, le son et la vidéo.
• Sur le web, les documents multimédia peuvent être embarqués dans les pages
• Un support de plus en plus grand dans les navigateurs et HTML (notamment HTML 5).
1
25/10/2011
Formats du multimédia
• Les données multimédia sont stockées ans des fichier dits fichiers média
dits fichiers
• En fonction du type du document et la technique de codage/c, les documents sont stockés dans des fichiers qui ont différentes extensions:
– .html, .gif, .jpg. wma, .mov, .mpg, .mp3, .ogg,…
h l if j
3
Images vectorielles
• Représentées par des objets géométriques:
– Polygones, segments, vecteurs, arcs de cercles, etc.
Polygones segments vecteurs arcs de cercles etc
• Chaque objet a des attributs: couleur, coordonnées, forme, etc.
• Il ne sont pas formés de pixels comme dans le cas p
p
des bitmaps.
• Exemples : Vizio, Corell, SVG,…
2
25/10/2011
Propriétés des images
• Résolution: nombre de pixels dans une image
– Plus haute résolution = meilleure image.
g
– Exemple:
• Haute résolution : 1600 x 1200 = 1.83 Mpixel
• Basse résolution : 640 x 480 = 0.29 Mpixel
• Taille de l'image:
– Si chaque pixel occupe un octet (8 bits), une image de 640 x 480 occupe 300 kilo‐octets.
• Profondeur des couleurs
P f d
d
l
– Nombre de bits pour stocker une couleur. • 1 bit, 8 bits, 16 bits ,24 bits,…
Tailles des images et transferts
• Une image plus grande prend plus de temps de téléchargement
• Techniques:
– Augmenter le taux de compression
– Réduire la profondeur des couleurs
• Une image de 16 ou 256 couleurs pourrait faire l'affaire
– Utiliser des petites images (icônes) comme pointeurs vers les vraies images
les vraies images
…
images.html
<ul>
<li><A href="lama.jpg"> <img src="petite_lama.jpg" border=0> </a>
<li><A href="vache.jpg"><img src="petite_vache.jpg" border=0> </a>
</ul>
…
3
25/10/2011
Les couleurs
• Noir et blanc (monochrome) : 1bit/pixel
– Chaque pixel est stocké comme un bit (0 ou 1)
• Niveaux de gris : 4 bits/pixel typiquement
– Chaque pixel est représenté sur 4 bits.
– La valeur exprime le niveau (0 – 15)
• Du plus sombre (0) au plus clair (15)
• Couleurs : 8, 16 ou 24 bits/pixel. Couleurs : 8 16 ou 24 bits/pixel
– 8 bits/pixel : possibilité de 256 couleurs.
– 16 bits/pixel: possibilité de 65,536 couleurs.
– 24 bits/pixel: possibilité de 16,777, n216 couleurs.
Le images couleur
• 8 ou 24 bits pour stocker l'information de couleur du p
pixel. • Les images à 24 bits occupent un espace disque plus grand
– Un fichier image de 640 x 480 à 24 bits/pixel occupe 900 kilo‐octets • La plupart des formats d'images incorporent des algorithmes de compression pour réduire la taille de l'image.
4
25/10/2011
Compression d'images
• Les techniques de compression partent d'un bitmap:
– Tableau 2D formé de pixels représentant l'image.
p
p
g
• Techniques sans pertes (Lossless):
– La compression garde l'image intacte – On peut la restituer avec la décompression
– Exemple: GIF
• Techniques avec pertes (lossy):
– Certaines
Certaines informations sont supprimées informations sont supprimées
– La compression est plus importante (dépendamment de l'image). La taille du fichier est plus petite
– Exemple: JPEG
Les images couleur 24 bits
• Chaque pixel est représenté par 3 octets
– Exemple: RGB représenté avec trois nombres hexa‐décimaux (ex. #77AA2C)
• Composantes RGB (Red‐Green‐Blue), chacune codée sur 8 bits.
– R: 256 niveaux ‐ de 0 à 255 (0x00‐0xFF)
– G: 256 niveaux ‐ de 0 à 255 (0x00‐0xFF)
– B: 256 niveaux ‐ de 0 à 255 (0x00‐0xFF)
• Le codage RGB donne:
– 256x256x256 = 16,777,216 couleurs:
256x256x256 = 16 777 216 couleurs:
– Qui ne sont pas toutes présentes dans une même image !
• On peut réduire la taille du fichier en travaillant sur 8 bits uniquement.
5
25/10/2011
Codes HTML de couleurs
Nom HTML
Red Green
Blue
White
Turquoise
Light Grey
Dark Grey
Dark Blue Black
Light Purple Orange
Dark Purple Brown
Yellow Burgundy
Forest Green
Pink
Grass Green
…
Code RG
#FF0000
#00FF00
#0000FF
#FFFFFF #00FFFF
#C0C0C0 #808080 #0000A0
#000000 #FF0080
#FF8040 #800080
#804000 #FFFF00
#800000 #808000 #FF00FF
#408080
couleurs.html
Palette des couleurs • Extraire des éléments 8 bits à partir de 24 bits.
• Chaque octet est un pointeur vers une table (appelée Palette de couleurs) contenant des éléments de 24 bits
• Les couleurs de la palette:
Les couleurs de la palette:
– Offertes par le système
– Obtenues à partir des couleurs les plus fréquentes de l'image.
6
25/10/2011
Palette de couleurs 24 bits
24 bits
8 bits
BBE0E3 000000
FF3300
FFFFFF
FFFFFF
BBE0E3
BBE0E3
1
FF3300 808080
1
2
3
4
3
5
1
5
5
6
7
8
000000
2
FF3300
3
FFFFFF
99CC00 333399 0099FF
663300 0099FF 333399 0000FF
9
8
7
10
808080
4
5
FFFFFF
6
99CC00
7
333399
8
Fichier
0099FF
9
663300
10
0000FF
Palette
Standard GIF
• Graphics Interchange Format • Standard populaire sur le web • Produit des couleurs de qualité acceptable
• Mieux adapté aux images avec peu de couleurs distinctes (i.e. graphiques, dessins, etc.)
• Supporte l'entrelacement, l'animation et la transparence des couleurs.
7
25/10/2011
Processus GIF
• On réduit les couleurs de 24 bits à 8 bits
• On code les répétitions par un algorithme (LZW) de O
d l é étiti
l ith
(LZW) d
codage des séquences qui se répètent:
– On code les couleurs les plus fréquentes par des chaines plus courtes
1:8b ( 8 bleus)
2;1b‐7v (1 bleu, 7 verts)
3:1b‐7v
4:1b‐7v
5:1b‐3r‐4v
6:1b‐3r‐4v
7:1b‐3r ‐4v
8:1b‐1r‐1v‐1r‐1v‐1b‐1v‐1r
Entrelacement
• Interlacing: Affichage progressif par entrelacement
–P
Permet de télécharger et afficher les images de manière t d télé h
t ffi h l i
d
iè
graduelle en plusieurs passes
• Permet de prendre une décision avant le téléchargement complet de l'image:
– Plus adapté pour les connexions à débit faible.
8
25/10/2011
Transparence
• Permet de rendre transparentes des portions d'une image
– Ces portions sont définies par une couleur que l'on sélectionne !
• Tout ce qui est sous ces portions (en général l'arrière‐
plan) paraitra
plan) paraitra
Standard JPEG
• Joint Photographic Experts Group. Standard pour le web
• Compression avec perte
– Prend avantage de certaines limitations du système de vision humaine pour effectuer la compression
• Permet de choisir un taux de compression
– Haut taux = image de moindre qualité
Haut taux = image de moindre qualité
• Donne des images de bonne qualité sur diverses tailles d'écran
9
25/10/2011
Processus JPEG
• On transforme l'image par petits blocs
• On applique une transformation mathématique O
li
t
f
ti
thé ti
(DCT) qui fait que les valeurs les plus fortes sont au début d'une matrice
• On applique une numérisation pour enlever les valeurs faibles (perte)
• On balaie la matrice résultante et applique un O b l i l
i é l
li
algorithme de compression semblable à LZW
Processus JPEG
http://img.tomshardware.com/us/1999/09/24/video_guide_part_3/dct.gif
10
25/10/2011
Format TIFF
• Tagged Image File Format
• Format développé par Adobe et utilisé sur les plateformes Apple.
• Peut stocker plusieurs types de profondeurs : 1‐bit, 8‐bit,
8
bit, 24
24‐bit,
bit, etc.
etc.
• Il est sans perte mais on peut le faire fonctionner comme JPEG grâce à un tag interne
Format PNG
• Portable Network Graphics
• Conçu comme amélioration de GIF
Conçu comme amélioration de GIF
• Offre jusqu'à 48 bits de couleur
• Offre des fonctions de :
– Correction des images pour un meilleur affichage
– Contrôle de la transparence
– Entrelacement
E t l
t
• De plus en plus reconnu par les fureteurs
11
25/10/2011
Images sur le web
• Une image sur le Web est de qualité réduite
• Raisons:
– Minimiser l'usage de la bande passante.
– Diminuer les stockages
• La qualité de l'image est aussi exprimée en PPI (Pixel Per Inch) ou DPI (Dot Per Inch)
• Comparaison:
– Résolution d'une image sur le web: 70 PPI. – Résolution d'une photo : 300 PPI !
Inclusion des images
• On peut inclure une image avec <img>
• On peut également utiliser l'élément <object>
12
25/10/2011
L'élément <OBJECT>
• Une alternative pour inclure des images des cartes:
<object height="100%" width="100%"
type="image/jpeg" data="image.jpeg">
</object> <object data="planetes.gif" alt="Planetes" type="image/gif" usemap="#Map1">
<map name="Map1">
<a href="soleil.htm" shape="rect" coords="0,0,82,126"> Soleil </a>
<a href="mercure.htm"
shape="circle" coords="90,58,3"> Mercure</a>
<a href="venus.htm" shape="circle" coords="124,58,8"> Venus</a>
</map>
</object> INF2005– Programmation web– A. Obaid
L'audio sur le web
• La voix est stockée sous forme numérique grâce à un mécanisme d'échantillonnage
mécanisme d
échantillonnage (numérisation).
(numérisation)
• Taux d'échantillonnage:
–
–
–
–
Nombre d'échantillons par seconde (exprimé en Hertz)
44.1 KHz: Qualité CD
8 KHz : Qualité téléphone
Nouveaux standards: 96 KHz (DVD) non web
Nouveaux standards: 96 KHz (DVD) … non web.
13
25/10/2011
Numérisation du son
• Le signal analogique est échantillonné et la valeur du niveau du signal est stockée sou forme binaire
niveau du signal est stockée sou forme binaire.
• Taille de l’échantillon – Qualité téléphone: 8 bits. Débit 64 Kbps.
Numérisation
n
10110001
Niveau (0‐255)
Un son
L'audio sur le web
• Résolution:
– Nombre de bits par échantillon
• Plus de bits donne une meilleure qualité.
– Exemples: 8 bits (téléphone), 16 bits (CD), …
• Canaux:
– Un canal pour les sons mono. 2 canaux pour les sons stéréo
– Même plus (ex. 5 canaux pour Surrond sound)
• Débit (en bps)
– Dépend de la résolution, de la fréquence d'échantillonnage et du nombre de canaux.
– Exemple: Fréquence : 8000 Hz. Résolution: 8 bits => Débit: 64 Kbps. INF2005– Programmation web– A. Obaid
14
25/10/2011
Streaming
• Évite de télécharger le document au complet avant de le jouer:
– Trop lent et demande trop d'espace disque
• Streaming:
– Jouer en continue à partir d'un serveur
• Avantages:
– Jouer juste après le début du streaming
– Un meilleur contrôle sur la distribution des documents ‐
Un meilleur contrôle sur la distribution des documents Droit Droit
d'auteur !
• Pseudo‐Streaming
– Jouer le document à mi chemin à travers HTTP
Streaming
• Mémoriser des données dans une mémoire tampon du récepteur pendant une période de temps avant de les jouer
récepteur pendant une période de temps avant de les jouer
• Télécharger de nouvelles données dans le buffer pour le garder suffisamment plein
• Adapter le flot de données qui arrive à un certain débit (Débit Réseau) au flot d’affichage (Débit d’affichage)
Application
Média
Débit
Débit Réseau
Débit d'affichage
Serveur
Média
Buffer
15
25/10/2011
Protocoles de streaming
• RTP et UDP – Protocoles rapide pour le transport des données
P t l
id
l t
td d
é
– Utilisés par les produit Microsoft et QuikTime
• RTSP:
– Protocole de contrôle de l'affichage des fonction VCR.
– Inclus dans les contrôles ActiveX
Audio WAF/AIFF
•
•
•
•
Extensions: .wav,.aif, .aiff
.wav ‐
wav Microsoft
.aiff : Audio Interchage Aile Format – Apple
Très bonne qualité de son:
– Plusieurs canaux. Échantillonnage à 8 KHz et 11 KHz
• Pauvres taux de compression
• Moins adaptés pour le streaming
Moins adaptés pour le streaming
• .wav est supporté par Windows et tous les navigateurs (excepté Google Chrome)
16
25/10/2011
Audio MP‐3
• Extension: .mp3
• Motion Picture Expert Group Motion Picture Expert Group ‐ Layer III (Audio)
Layer III (Audio)
– Standard originalement conçu pour la vidéo • Très bonne qualité
• Utilise très peu d'espace disque
– Jusqu'à 10% de la taille originale
• Compression (avec perte) basée sur la perception des sons par les humains
des sons par les humains
• Famille de standards :
• MPEG‐1 : vidéo VHS
• MPEG‐2: vidéo pour la télé
Audio MIDI
•
•
•
•
Extension: .mid
M i lI t
Musical Instrument Digital Interface t Di it l I t f
Développé pour les instruments électroniques
La musique est stockée sous forme de commandes qui produisent des notes
– Les documents MIDI occupent très peu d'espace • Bons pour les sons de background :
– Parfois ennuyeux !
• Non utilisé pour le streaming
17
25/10/2011
Audio RealMedia
RealMedia ou RealAudio Extensions: rm ra ram
Extensions: .rm .ra, .ram
Pionnier pour le streaming et les diffusions en direct
Exige un serveur : RealServer
Technologie ajustable aux débits des usagers
Disponibilité du plugin RealPlayer sur différentes plateformes (Windows Mac Unix) et navigateurs
plateformes (Windows, Mac, Unix) et navigateurs
• Offre la possibilité de pseudo‐streaming
•
•
•
•
•
•
Audio Windows Media • Extensions: .wma, .asf
• Un système de streaming
U
tè
d t
i
• Les paramètres du média (Métafichier) sont stockés dans un fichier .asf (Active Streaming File)
• Serveur disponible sur Windows
• Le codec utilise plusieurs débits (16 Kbps – 192 Kbps)
18
25/10/2011
Audio QuickTime Extension: .mov
I t d it
Introduit par Apple
A l
Streaming utilisant RTP et RTSP
Container pour plusieurs types de média : Images (JPEG, GIF,…), Audio (MP3, …) et vidéo (MPEG‐
1,Flash, …) • Disponible sur différentes plateformes et navigateurs
• Intégré dans iTune de Apple
•
•
•
•
L'audio sur une page Web
• On a plusieurs façons d'inclure des documents audio dans une page
dans une page
• On peut utiliser un hyperlien vers un document
<a href="musique/chanson.wav"> Ecouter ! (3.4 MB) </a>
<a href="musique/chant.wav"> <img src="jouemoi.gif"> </a>
• On peut embarquer un document dans la page avec <embed> ou <object>
<embed SRC="chanson.wav" align="center" >
19
25/10/2011
La vidéo sur le web
• Une vidéo consiste en des images (frames) qui ss'affichent
affichent à un certain débit (frames/seconde ou à un certain débit (frames/seconde ou
fps)
• Nombre d' images par seconde (frame rate):
– Standard TV: 30 images/seconde (fps)
– Sur le web: 10 ou 15 fps , très acceptable.
• Taille de chaque frame
Taille de chaque frame
– Impact sur la taille du document
– Exemples: 640 pix x 480 pix, 160 pix x 120 pix
• Taille du document:
– Un gros handicap (1 min = n x10 Mo)
U
h di
(1 i
10 M )
– Considérer le streaming
• Résolution :
– Nombre de bits/couleur dans chaque pixel
• Ex: 8, 24 bits/pixel
– Réduire ce nombre, réduit la taille du document
Réduire ce nombre réduit la taille du document
• Qualité:
– Dépend essentiellement de la compression
20
25/10/2011
• Débit en bits/seconde
– Débit
Débit requis : dépend du fps et de la taille de chaque i dé
dd f
t d l t ill d h
image
– Débit offert: plus c'est haut, plus on peut jouer le document de manière continue:
• Haute vitesse pour une meilleure Qualité de Service
Compression de la vidéo
• Avec ou sans perte
• Avec pertes: Avec pertes:
– On se débarrasse d'informations superflues – On réutilise les informations statiques
– Exemple: MPEG
• Spatiale ou temporelle;
– Spatiale: compression appliquée à chaque frame
– Temporelle: ne pas répéter les informations qui n'ont pas changé durant les frames précédentes
• On garde des frames de référence (ex. 1 frame sur 15)
– Exemple: MPEG
21
25/10/2011
Processus MPEG
http://www.backupdvd.info/Members/video/MPEG_explained.shtml
Processus MPEG
• On part de petit blocs qu'on représente par un p
q
(
)
format plus maniable que RGB (Y Cr Cb)
– Y = 0.299R + 0.587 G + 0.114 B – Cr = ‐0.147R ‐ 0.289 G + 0.436B = 0.492(B ‐ Y) – Cb = 0.615R ‐0.515G ‐0.100B = 0.877(R‐Y) • On applique le codage JPEG
• On ne garde que des frames significatives:
– On déduit les autres du changement d'une frame à une autre par compensation
22
25/10/2011
Les codecs
• Outils de Compressions/Décompression (Codecs) permettant de coder et de restituer le document
permettant de coder et de restituer le document multimédia pour l'afficher
• Il y en existe un grand nombre. Voir:
– http://en.wikipedia.org/wiki/Comparison_of_audio_codecs
• Plusieurs sont disponibles sous forme de plug‐in.
– Plugin:
Plugin: "Un
Un logiciel qui complète un logiciel hôte pour lui logiciel qui complète un logiciel hôte pour lui
apporter de nouvelles fonctionnalités" INF2005– Programmation web– A. Obaid
Vidéo QuickTime
•
•
•
•
•
•
•
Extension: .mov
Format introduit par Apple
Format introduit par Apple
Existe aussi pour l'Audio Très disponible
Devenu un container pour d'autres types de média
Disponible en tant que plugin dans divers navigateurs
S
Supporte le streaming
t l t
i
23
25/10/2011
Vidéo RealMedia Extension: .rm
Standard industriel pour le streaming
Standard industriel pour le streaming
Son lecteur, RealPlayer, gratuit et très populaire
Mêmes serveurs performants que RealAudio
Bon pour les longs clips et la diffusions à un grand nombre de clients
• Streaming via RTSP
Streaming via RTSP
• Pseudo‐streaming via HTTP
•
•
•
•
•
Vidéo Windows Media • Extensions : .wmv, .asf
• Crée par Microsoft. Disponible dans l
Crée par Microsoft Disponible dans l'environnement
environnement Windows.
• Joue les fichiers Windows Media Video (.wmv) et autres formats comme AVI, MPEG et QuickTime.
• Utilise le métafile (Advanced Streaming Format ‐
.asf) • Possède un serveur (Windows Media Server) et des outils de production de vidéos
• Bon pour la diffusion de longs documents.
24
25/10/2011
Vidéo Audio Video Interleave Extension: .avi
P d it d Mi
Produit de Microsoft
ft
Remplacé par .wmv
On peut toujours les visionner avec QuickTime
L'audio et la vidéo sont entrelacés. Ce qui donne de documents de bonne qualité
• Bon pour les vidéos de courte durée (vidéoclips) sur le web
•
•
•
•
•
Vidéo MPEG
• Extensions: .mpg ou .mpeg
• Moving Picture Expert Group
Moving Picture Expert Group
• Introduit d'abord dans l'environnement Unix. Désormais disponible sur toutes plateformes
• Supporte trois types d'informations : Audio, Vidéo et Streaming
• Donne des vidéos de qualité avec un bon taux de compression
• Consiste en plusieurs standards: MPEG‐I, MPG‐2 (DVS), …
25
25/10/2011
Ajout de documents multimédia
• On peut utiliser des documents multimédia sur le web de différentes façons:
web de différentes façons:
– En ligne
– Embarqué
– Par Streaming
Multimédia en ligne
• On peut utiliser un hyperlien:
<a href="chanson.mp3"> Musique (1.2 Mo) </a>
h f " h
"
(
) /
• Le document est affiché par le navigateur à l'aide d'une application d'appoint (Helper application) à l'extérieur ou un plugin dans la fenêtre du navigateur
..
<body>
<a href="young.mp3"> Musique </a>
</body>
…
mm1.html
26
25/10/2011
L'élément <embed>
• Permet d'incorporer le document multimédia directement dans une page web
dans une page web • Invoque un plugin installé sur la machine de l'utilisateur qui sera lancé et "jouera" le document
• Spécifie des paramètres
• Solution offerte par plusieurs navigateurs
embed.html
…
<embed erc="movie.mov" width="200" height="200" align="center">
<br>
<embed src=http://flash‐clocks.com/free‐flash‐clocks‐blog‐topics/free‐flash‐clock‐183.swf width="200" height="200" wmode="transparent" type="application/x‐shockwave‐flash"></embed>
…
Fichiers de description
• À partir d'un lien qui correspond à un document multimédia, le navigateur émet une requête de
multimédia, le navigateur émet une requête de téléchargement à un serveur Web
• Le serveur répond avec un fichier de description
(Metafile) que le navigateur passe à une Application
Média (ex. RealPlayer)
• Cette application contacte un serveur média (ex.
R lN
RealNetwork)
k)
• Les données sont émises à partir du serveur média
27
25/10/2011
Streaming
• On utilise le metafile dans l'hyperlien ou <embed>
• <a href
href="monfichier.ram">
monfichier.ram > Fichier Audio</a>
• <a href="filmStreaming.asx"> Voir le film </a>
• Metafile:
– Pour RealAudio, le metafile a l'extension .ram ou .ra. Il contient
uniquement l'url du fichier média (extension .rm)
– Pour WM, il a l'extension .asx et contient des information sur le processus de streaming:
<asx version="3">
<entry> <ref href="chemin/filmStreaming.asf" />
</entry>
</asx>
Streaming
..
<object ID="spacetree"
classid="clsid:CFCDAA03‐8BE4‐11cf‐B84B‐0020AFBBCCFA"
height="160" width="320" border="0">
<param name=SRC" value="http://tanupack.com/music/orcs2.ra"> <param name="controls" value="all">
<embed src="http://tanupack.com/music/orcs2.ra" height="150" width="250" autostart="false" controls="all">
</object>
..
real.html
28
25/10/2011
Vidéos en ligne
• On peut accéder au document grâce à son l'URL avec un hyperlien
avec un hyperlien
<a href=“enfant.mov" title=“Un document video ”> Un enfant qui joue (2 Mo) </a>
• Avec <embed>, on invoque un plugin
• Solution plus générale: utiliser l'élément <object>
Les plugins de la vidéo
• Les plugin les plus utilisés:
–
–
–
–
Adobe Flash Player
y
Adobe Reader
Windows Media Player
Apple Quicktime
29
25/10/2011
La solution <embed>
• Utilise un plug‐in pour jouer des documents
• Solution non standard
S l ti
t d d
• Nécessite l'installation du plugin‐in. – Sinon, l'usager doit l'obtenir et l'installer
• Nécessite parfois l'installation d'un ActiveX pur offre le contrôle d'affichage.
<embed src="chanson.mp3" <embed
src "chanson mp3"
width="455" height="230" >
</embed>
quick.html
…
<embed erc="movie.mov" autoplay="false" width="160" height="136" controller="true" border="10" PLUGINSPAGE=http://www.apple.com/quicktime >
</embed> …
L'élément <embed>
• Il possède plusieurs (trop !!) attributs standards
src="URL": URL du document à jouer
j
width=n : largeur (en pixels) du cadre d'affichage
height=n: hauteur (en pixels) du cadre d'affichage
hidden="true|false": pour cacher l'interface du plug‐in
pluginspace="URL" : Lien pour obtenir le plugin s'il n'est pas installé dans le navigateur.
– loop="true|false": pour faire boucler le document
– href="URL": prendre le document comme hyperlien.
h f "
"
d l d
h
li
– align="left|right|..": aligner le document
–
–
–
–
–
embed.html
30
25/10/2011
L'élément <embed>
• Attributs – border=n: largeur du cadre de la fenêtre d'affichage
g
g
– hspac=n (vspace=n): espacement horizontal (vertical) du document dans le plugin
– name="texte": nom de l'objet embarqué
– type="texte": type MIME du document (ex. video/quicktime). Le serveur HTTP le fournit normalement. Sinon, il faut le préciser.
L'élément <embed>
• Exemples: attributs propres à QuickTime:
– autoplay="true|false": démarrage automatique du p y
|
g
q
document
– controller="true|false": pour afficher les fonctions de contrôle
– volume="n" : pourcentage du niveau du volume (par défaut 100%)
– playeveryframe="true|false": permettre de sauter des frames
• Il existe d'autres attributs spécifiques à certains navigateurs.
31
25/10/2011
<embed> pour Flash
<OBJECT classid='clsid:D27CDB6E‐AE6D‐11cf‐96B8‐444553540000'
codebase='http://download.macromedia.com/pub/shockwave
/cabs/flash/swflash.cab#version=6,0,0,0' width="320" height="240"> <param name='movie' value="http://servername/path/to/media.file"> <param name='quality' value="high"> <param name='bgcolor' value='#FFFFFF'> <param name='loop' value="true"> <EMBED src="http://servername/path/to/media.file" quality='high' bgcolor='#FFFFFF' width="320" height="240" l
loop="true" type='application/x‐shockwave‐flash' "t " t
'
li ti / h k
fl h'
pluginspage='http://www.macromedia.com/shockwave
/download/index.cgi?P1_Prod_Version=ShockwaveFlash'> </EMBED> </OBJECT>
<embed> pour RealMedia
<OBJECT classid='clsid:CFCDAA03‐8BE4‐11cf‐B84B‐0020AFBBCCFA'
classid=
clsid:CFCDAA03‐8BE4‐11cf‐B84B‐0020AFBBCCFA width="320" height="240"> <param name='src' value="http://www.lvbeethoven‐music.com/Beethoven‐
Midi/_RealAudio/Symphonie1_Opus21_Mvt1.ra"> <param name='autostart' value="true"> <param name='controls' value='imagewindow'> <param name='console' value='video'> <param name='loop' value="true"> <EMBED src="http://www.lvbeethoven‐music.com/Beethoven‐
Midi/_RealAudio/Symphonie1_Opus21_Mvt1.ra" width="320" id h "320"
height="240" loop="true" type='audio/x‐pn‐realaudio‐plugin' controls='all' autostart="false"> </EMBED> </OBJECT>
real3.html
32
25/10/2011
<embed> pour QuickTime <OBJECT classid='clsid:02BF25D5‐8C17‐4B23‐BC80‐D3488ABDDC6B' width="320" height="255" codebase='http://www.apple.com/qtactivex/qtplugin.cab'> <param name='src' value="movie.mov"> ' ' l
"
i
"
<param name='autoplay' value="true"> <param name='controller' value="true"> <param name='loop' value="true"> <EMBED src="sample.mov"
height="255" autoplay="false" controller="true" loop="true" LUGINSPAGE="http://www.apple.com/quicktime" > </EMBED> quick2.html
</OBJECT>
<embed> pour Win Media
<object
id="MediaPlayer" height=46 classid="CLSID:22D6f312‐B0F6‐11D0‐94AB‐0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x‐oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
<param
name="filename" value="http://libsyn.com/media/jakeludington/mediablab_laptopsecurity.mp3">
<param name="Showcontrols" value="True">
<param name="autoStart" value="True">
yp
pp
/
p y
<embed type="application/x‐mplayer2" src="http://libsyn.com/media/jakeludington/mediablab_laptopsecurity.mp3" name="MediaPlayer">
</embed>
</object>
wma.html
http://www.jakeludington.com/project_studio/20051015_embedding_windows_media_player_wma.html
33
25/10/2011
• Standard w3c pour inclure des objets multimédia de différents codages et plugins
différents codages et plugins.
• Solution plus générale que <embed> et permet d'inclure celle‐ci.
• Permet de spécifier le plugin (pour l'inclure) grâce à l'attribut classid et autres paramètres
<object
classid="clsid:22D6F312‐B0F6‐11D0‐94AB‐0080C74C7E95">
<param name="fichierWave" value="appel.wav" />
• Fournit le mécanisme d'alternative:
– Si
Si l'objet n'est pas restitué, le code entre <OBJECT> et l' bj t ' t
tit é l
d
t <OBJECT> t
</OBJECT> sera exécuté
• On peut ainsi inclure <embed> comme alternative
<object classid="…" …>
<param src="movie.mov" >
"
i
"
<param >
…
<embed src="movie.mov" …> </embed>
34
25/10/2011
• Jouer une image:
<object
height="100%" width="100%"
type="image/gif" data="vache.gif">
</object>
</object> • Afficher une iframe:
• Jouer un son:
<object type="text/html" height="50%" width="50%"
data="http://www.uqam.ca.">
</object> <object classid="clsid:22D6F312‐B0F6‐11D0‐94AB‐0080C74C7E95">
<param name="FileName" value="film.wav" />
</object>
</object> • Jouer un vidéo:
<object classid="clsid:22D6F312‐B0F6‐11D0‐94AB‐0080C74C7E95">
<param name="FileName" value="film.wmv" />
<object data= "son.mp3" height="100" width= "60“
type="audio/mpeg" title= "Belle musique" >
<param name= “src" value= "son.mp3" />
</object>
<object classid="clsid:02bf25d5‐8c17‐4b23‐bc80‐d3488abddc6b" width="160"
height="144" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="appel.mov">
<param name="autoplay" value="true">
<param name="controller" value="false">
<embed src="movie.mov" width="160" height="144" autoplay="true"
controller="false"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
35
25/10/2011
• Possède plusieurs attributs:
– data="URL": référence du document à jouer
j
– type="texte": type MIME du document (ex. audio/midi, audio/wav, audi/mpeg, video/quicktime). Il est conforme à classid
– classid= "ID" : un code identifiant le plugin (ActiveX) pour afficher le document . S'il n'est pas installé, le navigateur doit le chercher et l'installer.
– width=n : largeur (en pixels) du cadre d'affichage
g
( p
)
g
– height=n: hauteur (en pixels) du cadre d'affichage
– codebase="URL" : URL de l'endroit où trouver le plugin
– title:="texte": un texte descriptif
Attributs plugin de <OBJECT>
• QuickTime:
– classid="clsid:02BF25D5‐8C17‐4B23‐BC80‐D3488ABDDC6B"
– codebase="http://www.apple.com/qtactivex/qtplugin.cab" • Windows Player:
– classid="clsid:6BF52A52‐394A‐11D3‐B153‐00C04F79FAA6"
– codebase="http://www.microsoft.com/Windows/MediaPlayer"
• Real Audio:
– classid="clsid:CFCDAA03‐8BE4‐11cf‐B84B‐0020AFBBCCFA
– codebase= ??
codebase= ??
36

Le multimédia Le multimédia - LabUnix

Transcription

Documents pareils

Historique - LabUnix

Insérer son et vidéo

EpicMealTime, les nouveaux "Jackass" de la cuisine

Variantes de HTML Variantes de HTML - LabUnix

Exigences techniques pour la Salle de classe virtuelle de Berlitz

Fiche Produit CANON LBP 6000 Noir Type Imprimante Monochrome

Webdom® Satellite Smart Power Analyzer

Blender 101

DUT SRC - Webchronique

la danse des pingouins poster