Exemplo
Use da media atributo:
<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)">
Tente você mesmo " Definição e Uso
A media atributo especifica o tipo de recurso de mídia (o que a mídia / dispositivo o arquivo é otimizado para).
O navegador pode usar esse atributo para determinar se ele pode reproduzir o arquivo ou não. Se ele não pode, ele pode optar por não fazer o download.
Nota: Este atributo pode aceitar vários valores.
Suporte a navegadores
Atributo | |||||
---|---|---|---|---|---|
media | Não suportado | Não suportado | Não suportado | Não suportado | Não suportado |
Diferenças entre HTML 4.01 e HTML5
O <source> tag é novo em HTML5.
Sintaxe
<source media="value">
possíveis Operators
Valor | Descrição |
---|---|
and | Especifica um operador AND |
not | Especifica um operador NOT |
, | Especifica um operador OR |
Devices
Valor | Descrição |
---|---|
all | Apropriado para todos os dispositivos. Este é o padrão |
aural | sintetizadores de voz |
braille | dispositivos de realimentação Braille |
handheld | dispositivos portáteis (tela pequena, largura de banda limitada) |
projection | projetores |
/ páginas impressas modo de visualização de impressão | |
screen | telas de computador |
tty | Teletypes e meios de comunicação similares usando uma grade de caracteres de passo fixo |
tv | dispositivos do tipo televisão (baixa resolução, capacidade de deslocamento limitado) |
valores
Valor | Descrição |
---|---|
width | Especifica a largura da área de exibição de alvo. "min-" e "max-" prefixos pode ser usado. Exemplo: media="screen and (min-width:500px)" |
height | Especifica a altura da área de exposição alvo. "min-" e "max-" prefixos pode ser usado. Example: media="screen and (max-height:700px)" |
class = "notranslate" device-width | Especifica a largura do alvo de exibição / papel. "min-" e "max-" prefixos pode ser usado. Exemplo: media="screen and (device-width:500px)" |
device-height | Especifica a altura do alvo display / papel. "min-" e "max-" prefixos pode ser usado. Exemplo: media="screen and (device-height:500px)" |
orientation | Especifica a orientação do alvo visor / papel. Valores possíveis: "portrait" ou "landscape" Exemplo: media="all and (orientation: landscape)" |
aspect-ratio | Especifica a relação largura / altura da área de exibição de alvo. "min-" e "max-" prefixos pode ser usado. Exemplo: media="screen and (aspect-ratio:16/9)" |
device-aspect-ratio | Especifica a taxa de device-width / dispositivo de altura do alvo display / papel. "min-" e "max-" prefixos pode ser usado. Exemplo: media="screen and (aspect-ratio:16/9)" |
color | Especifica os bits por cor de exibição de destino. "min-" e "max-" prefixos pode ser usado. Exemplo: media="screen and (color:3)" |
color-index | Especifica o número de cores a exibição de destino pode manipular. "min-" e "max-" prefixos pode ser usado. Exemplo: media="screen and (min-color-index:256)" |
monochrome | Especifica os bits por pixel em um frame buffer monocromática. "min-" e "max-" prefixos pode ser usado. Exemplo: media="screen and (monochrome:2)" |
resolution | Especifica a densidade de pixels (dpi ou dpcm) do alvo display / papel. "min-" e "max-" prefixos pode ser usado. Exemplo: media="print and (resolution:300dpi)" |
scan | Especifica o método de verificação de uma tela de TV. Os valores possíveis são "progressive" e "interlace" . Exemplo: media="tv and (scan:interlace)" |
grid | Especifica se o dispositivo de saída é grade ou bitmap. Os valores possíveis são "1" para o grid, e "0" caso contrário. Exemplo: media="handheld and (grid:1)" |