برچسب <source> HTML

تعریف و استفاده

<source> برچسب‌ها برای تعیین عناصر رسانه‌ای (مانند <video>،<audio> و <picture>()) چندین منبع رسانه‌ای مشخص کنید.

<source> برچسب‌ها به شما اجازه می‌دهند تا فایل‌های ویدیو/صوتی/تصویر جایگزین مشخص کنید، مرورگر بر اساس پشتیبانی مرورگر یا عرض视‌انداز انتخاب می‌کند. مرورگر اولین منبعی که پشتیبانی می‌کند را انتخاب می‌کند <source>.

لطفاً به:

آموزش HTML:ویدئو HTML

آموزش HTML:آهنگ HTML

دستورالعمل HTML DOM:منبع Object

مثال

مثال 1

این پخش‌کننده صوتی‌ای با دو منبع صوتی است. مرورگر اولین منبعی که پشتیبانی می‌کند را انتخاب می‌کند <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  مرورگر شما پلاگین صوتی را پشتیبانی نمی‌کند.
</audio>

آزمایش کنید

مثال 2

در <video> استفاده کنید <source> ویدیو پخش کنید:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  مرورگر شما پلاگین ویدیو را پشتیبانی نمی‌کند.
</video>

آزمایش کنید

مثال 3

در <picture> استفاده کنید <source> برای تعیین تصاویر مختلف بر اساس عرض视‌انداز تعریف کنید:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

آزمایش کنید

ویژگی

ویژگی مقدار توضیح
media پرسش رسانه‌ای هرگونه پرسش رسانه‌ای معتبر را می‌پذیرد، معمولاً در CSS تعریف می‌شود.
sizes برای تعیین اندازه تصویر برای طرح‌های مختلف صفحه استفاده می‌شود.
src URL

برای مشخص کردن URL فایل‌های رسانه‌ای استفاده می‌شود.

وقتی از <source> برای <audio> و <video> استفاده می‌شود، این ویژگی ضروری است.
srcset URL

URL تصاویری را که در شرایط مختلف استفاده می‌شوند، مشخص می‌کند.

این ویژگی ضروری است وقتی <source> در <picture> استفاده می‌شود.
type نوع MIME نوع MIME منبع را مشخص می‌کند.

ویژگی‌های جهانی

<source> برچسب‌ها همچنین از ویژگی‌های جهانی در HTML.

ویژگی‌های رویداد

<source> برچسب‌ها همچنین از ویژگی‌های رویداد در HTML.

تنظیمات پیش‌فرض CSS

بدون

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را پشتیبانی می‌کنند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5