Qu'est-ce que l'attribut media en HTML ?

L'attribut media en HTML spécifie le type de ressource multimédia pour lequel le fichier est optimisé, déterminant pour quels médias ou périphériques il est destiné.

Quelle est la fonction principale de l'attribut media ?

La fonction principale de l'attribut media est de définir le type de ressource multimédia et d'indiquer pour quels médias ou périphériques le fichier est optimisé.

HTML attribut médias source

OUJOOD.COM

Définition et utilisation L’attribut media

LES BALISES HTML

L'attribut media spécifie le type de ressource multimédia (pour quel médias/périphérique le fichier est optimisé ).

Le navigateur peut utiliser cet attribut pour déterminer si elle peut lire le fichier ou non. Si elle ne peut pas, il peut choisir de ne pas le télécharger.

Remarque : Cet attribut peut accepter plusieurs valeurs.

Syntaxe

Exemple Utilisation de l'attribut media :

Exemple : 📋 Copier le code

		<video width="320" height="240" controls="controls">
		<source src="movie.mp4" type="video/mp4" media="screen and (min-width:320px)">
		<source src="movie.ogg" type="video/ogg" media="screen and (min-width:320px)">
		Ce navigateur ne supporte pas la balise video.
		</video>

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome afari

Jusqu’à la date d’écriture de cet article l'attribut media n'est pas pris en charge dans tous les principaux navigateurs sauf safari.

Différences entre HTML 4.01 et HTML5

La balise <source> est nouvelle en HTML5.

Opérateurs possibles

Valeur	Description
and	Spécifie l'opérateur ET
not	Spécifie un opérateur NOT
,	Spécifie un opérateur OR

Dispositifs

Valeur	Description
all	Convient pour tous les périphériques. Par défaut
aural	Synthétiseurs de parole
braille	Dispositifs de retour en braille
handheld	Appareils portatifs (petit écran, une bande passante limitée)
projection	Projecteurs
print	Imprimer les pages de mode/imprimé Aperçu
screen	Écrans d'ordinateur
tty	Télétypes et supports similaires à l'aide d'une grille de caractères à espacement fixe
tv	Dispositifs de type télévision (basse résolution, capacité limitée de défilement)

Valeurs

Valeur	Description
width	Spécifie la largeur de la zone d'affichage ciblé. les préfixes "min" et « max »-peuvent être utilisés. Exemple : media = "screen and (min-width : 500px)"
height	Spécifie la hauteur de la zone d'affichage ciblé. les préfixes "min" et « max »-peuvent être utilisés. Exemple : media = " screen and (max-hauteur : 700px)"
device-width	Spécifie la largeur du papier/affichage de la cible. les préfixes "min" et « max »-peuvent être utilisés. Exemple : media = "screen and (device-width : 500px)"
device-height	Spécifie la hauteur du papier/affichage de la cible. les préfixes "min" et « max »-peuvent être utilisés. Exemple : media = "screen and (dispositif-hauteur : 500px)"
orientation	Spécifie l'orientation du papier/affichage de la cible. Valeurs possibles: « portrait » ou « paysage » Exemple : media = "tous les et (orientation : paysage)"
aspect-ratio	Spécifie le rapport largeur/hauteur de la zone d'affichage ciblé. les préfixes "min" et « max »-peuvent être utilisés. Exemple : media = "screen and (aspect-ratio : 16 / 9)"
device-aspect-ratio	Spécifie le ratio de dispositif-largeur/dispositif de papier/affichage de la cible. les préfixes "min" et " max "-peuvent être utilisés. Exemple : media = "screen and (aspect-ratio : 16 / 9)"
color	Spécifie les bits par couleur d'affichage de la cible. les préfixes "min" et « max »-peuvent être utilisés. Exemple : media = "screen and couleur : 3"
color-index	Spécifie le nombre de couleurs que peut gérer l'affichage de la cible. les préfixes "min" et « max »-peuvent être utilisés. Exemple : media = "screen and (min-couleur-index : 256)"
monochrome	Spécifie les bits par pixel dans un tampon de trame monochrome. les préfixes "min" et « max »-peuvent être utilisés. Exemple : media = "screen and monochrome : 2"
resolution	Spécifie la densité de pixel (PPP ou dpcm) du papier/affichage de la cible. les préfixes "min" et « max »-peuvent être utilisés. Exemple : media = " print and (résolution : 300 dpi)"
scan	Spécifie la méthode de balayage d'un écran de télévision. Les valeurs possibles sont "progressive" et "interlace". Exemple : media = "tv and (scan:interlace)"
grid	Spécifie si le périphérique de sortie est grille ou bitmap. Les valeurs possibles sont « 1 » pour la grille et « 0 » dans le cas contraire. Exemple : media = " handheld and grid: 1"

Retour à l'accueil du site

Par carabde 10 mars 2014

HTML L’attribut media de la balise source