media属性

source要素のmedia属性は、ドキュメントへ埋め込むメディア・ファイルを再生するメディアやデバイスを指定する任意属性。

ブラウザ対応

構文

<source src="URL" media="メディアクエリ">

メディアクエリ

メディアクエリには、スタイルシートの適応条件を、メディアタイプやメディア特性で指定する。

演算子を使い、複数の条件を指定することもできる。

メディアタイプ
  • all：全てのデバイス。初期設定値。
  • aural：音声デバイス。
  • braille：点字デバイス。
  • handheld：携帯デバイス。
  • print：プリンター・デバイス。印刷プレビュー。印刷結果。
  • projection：プロジェクター・デバイス。
  • screen：コンピューター・スクリーン。コンピューター用ディスプレイ画面。コンピューター用モニター画面。
  • tty：テレタイプの様なメディア。
  • tv：テレビ型出力デバイス。
メディア特性
  • width：表示領域の幅。min/max前置詞使用可。
  • height：表示領域の高さ。min/max前置詞使用可。
  • device-width：出力デバイスの幅。画面の幅や、印刷用紙の幅。min/max前置詞使用可。
  • device-height：出力デバイスの高さ。画面の高さや、印刷用紙の高さ。min/max前置詞使用可。
  • orientation：縦表示か横表示か。
    • landscape：横表示。
    • portrait：縦表示。
  • aspect-ratio：表示領域のアスペクト比。水平ピクセル数と垂直ピクセル数を、スラッシュ「/」区切りで指定する。min/max前置詞使用可。
  • device-aspect-ratio：出力デバイスのアスペクト比。水平ピクセル数と垂直ピクセル数を、スラッシュ「/」区切りで指定する。min/max前置詞使用可。
  • color：出力デバイスのカラーコンポーネントあたりのビット数。デバイスがカラーデバイスでない場合の値は「0」。min/max前置詞使用可。
  • color-index：出力デバイスのカラールックアップテーブルのエントリ数。min/max前置詞使用可。
  • monochrome：モノクロ・デバイス上のピクセルあたりのビット数。モノクロデバイスでない場合の値は「0」。min/max前置詞使用可。
  • resolution：出力デバイスの解像度。min/max前置詞使用可。
  • scan：テレビ型出力デバイスの走査方式。
    • progressive：プログレッシブ方式。
    • interlace：インターレース方式。
  • grid：出力デバイスがグリッドまたはビットマップであるかどうかを調べる。
演算子
  • and：AND演算子。
  • not：NOT演算子。
  • ,：OR演算子。
  • only：メディアクエリ非対応ブラウザからスタイルシートを隠す。

サンプルコード

コンピューター・スクリーンとプロジェクターで再生

<source src="sample.mp4" media="screen, projection">

表示領域の幅が1024px以上であるコンピューター・スクリーンで再生

<source src="sample.mp4" media="screen and (min-width:1024px)">

表示領域の幅が768px以上1023px以下である場合に再生

<source src="sample.mp4" media="(min-width:768px) and (max-width:1023px)">

サンプル

HTMLソースコード

<p>コンピューター・スクリーンとプロジェクターで再生<br>
	<video controls>
		<source src="sample-video.mp4" media="screen, projection">
		sample-video.mp4を再生できないようです。
	</video>
</p>
<p>表示領域の幅が1024px以上であるコンピューター・スクリーンで再生<br>
	<video controls>
		<source src="sample-video.mp4" media="screen and (min-width:1024px)">
		sample-video.mp4を再生できないようです。
	</video>
</p>
<p>表示領域の幅が768px以上1023px以下である場合に再生<br>
	<video controls>
		<source src="sample-video.mp4" media="(min-width:768px) and (max-width:1023px)">
		sample-video.mp4を再生できないようです。
	</video>
</p>

実際の表示

コンピューター・スクリーンとプロジェクターで再生

表示領域の幅が1024px以上であるコンピューター・スクリーンで再生

表示領域の幅が768px以上1023px以下である場合に再生