Source media属性
定義と用法
media
<source>要素内のmedia属性の値を設定または返します。
<source> media属性 メディアリソースのタイプを規定します(ファイルがどのメディア/デバイスに最適化されているか)。
ブラウザはmedia属性を使用して、ファイルを再生できるかどうかを確認します。再生できない場合は、ダウンロードをスキップすることができます。
HTML 参考マニュアル:HTML <source> タグ
例
特定のファイルがどのメディア/デバイスに最適化されているかを返します:
var x = document.getElementById("mySource").media;
構文
media属性を返します:
sourceObject.media
media属性を設定します:
sourceObject.media = value
注記:この属性は複数の値を受け入れます。
可能な演算子
値 | 説明 |
---|---|
and | 規定 AND 演算子。 |
not | 規定 NOT 演算子。 |
, | 規定 OR 演算子。 |
デバイス
値 | 説明 |
---|---|
all | すべてのデバイスに適用。デフォルト。 |
aural | 音声合成器。 |
braille | 点字反応装置。 |
handheld | ハンドヘルドデバイス(小さなスクリーン、限られたバンド幅)。 |
projection | プロジェクター |
印刷プレビューモード/印刷ページ。 | |
screen | コンピュータのスクリーン。 |
tty | 固定間隔のキャラクターグリッドを使用する電報伝打ち機や類似のメディア。 |
tv | テレビ型のデバイス(低解像度、限られたスクロール能力)。 |
属性値
値 | 説明 |
---|---|
width |
ターゲット表示領域の幅を指定します。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (min-width:500px)" |
height |
ターゲット表示領域の高さを指定します。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (max-height:700px)" |
device-width |
ターゲットディスプレイ/紙の幅を指定します。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (device-width:500px)" |
device-height |
ターゲットディスプレイ/紙の高さを指定します。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (device-height:500px)" |
orientation |
ターゲットディスプレイ/紙の方向を指定します。 可能な値:「portrait」または「landscape」です。 例:media="all and (orientation: landscape)" |
aspect-ratio |
ターゲット表示領域の幅高比を指定します。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (aspect-ratio:16/9)" |
device-aspect-ratio |
ターゲットディスプレイ/紙のデバイス幅/デバイス高さ比を指定します。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (aspect-ratio:16/9)" |
color |
ターゲットディスプレイの各色のビット数を指定します。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (color:3)" |
color-index |
ターゲットディスプレイが処理できる色数を指定します。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (min-color-index:256)" |
monochrome |
単色フレームバッファー中の各ピクセルのビット数を指定します。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (monochrome:2)" |
resolution |
ターゲットディスプレイ/紙のピクセル密度(dpiまたはdpcm)を指定します。 「min-」および「max-」接頭辞を使用できます。 例:media="print and (resolution:300dpi)" |
scan |
テレビディスプレイのスキャン方法を指定します。 可能な値は「progressive」および「interlace」です。 例:media="tv and (scan:interlace)" |
grid |
出力デバイスがグリッドまたはビットマップであることを指定します。 グリッドの可能値は「1」で、それ以外は「0」です。 例:media="handheld and (grid:1)" |
技術的詳細
返り値: | メディアリソースのタイプを示す文字列値。 |
---|
ブラウザサポート
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
サポート | サポート | サポート | サポート | サポート |
注記:しかし、主要なブラウザのどれも HTML media 属性をサポートしていません。
関連ページ
HTML 参考マニュアル:HTML <source> メディア属性