HTML L’attribut media de la balise source

.....................

Somaire

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

<source media="value">


Exemple Utilisation de l'attribut media :

Sélectionner 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