html5のsourceタグの使い方-フロントエンドQ&A-php.cn

html5のsourceタグの使い方

WBOY

リリース： 2022-06-01 17:54:19

オリジナル

2943 人が閲覧しました

HTML5 では、ソースタグは、ブラウザーが選択できるさまざまな種類のビデオまたはオーディオファイルを提供するために使用されます。構文は、「"。

html5のsourceタグの使い方

このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、Dell G3 コンピューター。

html5

タグのsource タグは、メディア要素 (

タグを使用すると、メディアタイプまたはコーデックのサポートに基づいてブラウザが選択する 2 つのビデオ/オーディオファイルを指定できます。

可能な属性値は次のとおりです:

media media_query は、ブラウザがダウンロードするかどうかを決定するためのメディアリソースのタイプを指定します。
src URL はメディアファイルの URL を指定します。
type MIME_type は、メディアリソースの MIME タイプを指定します。
サイズページレイアウトが異なると、設定される画像サイズも異なります。
srcset URL は、タグに適用する場合には必須です。さまざまな状況で使用する画像 URL を指定します。

例は次のとおりです:

2 つのソースファイルを持つオーディオプレーヤー。ブラウザは、サポートするソースファイルを選択する必要があります (両方がサポートされている場合は、いずれかを選択します):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>123</title> 
</head>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
</body>
</html>

ログイン後にコピー

出力結果:

html5のsourceタグの使い方