‎‎تگ منبعHTML <source> Tag -‎

Previous >    <Next  

‎‎مثال ـ يك پخش كننده صوتي با دوفايل منبع ، مرورگراولين مورد كه پشتيباني ميكند، انتخاب ميكند

‎ 
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

--(go to editor for change code and run)

‎‎تعريف وكاربردDefinition and Usage -‎

‎تگ‎<source>‎ براي معرفي منابع رسانه متفاوت براي عناصر رسانه اي ‎<audio>‎‎، ‎<video>‎ و ‎<picture>‎ استفاده ميشود .

‎با تگ‎<source>‎ اجازه داريد براي عناصر رسانه اي video/udio/picture چندمنبع ‎مرتبط ، معرفي نمائيد، كه درهركدام منبع دوم به بعد جايگزين ميباشد كه مرورگر براساس شرايط ‎پشتيباني اولين منبع قابل قبول را انتخاب واقدام مينمايد.

‎‎پشتيباني مرورگرBrowser Support -‎

‎‎اعداد در جدول زير نشان دهنده اولين نسخه مرورگراست كه ازتگ فوق بطوركامل پشتيباني مي نمايد.

‎
‎Element‎ Chorome Edge Firefox Safari Opera
‎‎<source>‎‎ ‎‎4.0‎ ‎‎9.0‎ ‎‎3.5‎ ‎‎4.0‎ ‎‎10.5‎

‎‎ويژگي هاAttributes -‎

‎
‎‎ويژگي ‎‎مقدار ‎‎شــرح
‎media‎ ‎media_query‎‎ ‎‎هردرخواست رسانه معتبري راكه معمولا در يكCSS تعريف ميشود مي پذيرد .
‎sizes‎ ‎‎ ‎‎اندازه هاي تصوير را براي طر بندي صفحات مختلف مشخص ميكند.
‎src‎ ‎URL‎‎ ‎‎آدرسurl فايل رسانه را مشخص ميكند .براي عناصر ‎<audio> , <video>‎
‎srcset‎ ‎URL‎‎ ‎‎هنگاميكه‎<source>‎ براي عنصر ‎<picture>‎ استفاده ميشود لازم است ‎آدرسurl تصوير درموقعيت هاي مختلف نمايش اعلام شود .
‎type‎ ‎MIME-‎type‎‎ ‎‎مشخص ميكندMIME-‎type منبع را

‎‎ويژگي هاي جهانيGlobal Attributes -‎

‎‎تگ‎<dt>‎ از ويژگي هاي جهاني HTML پيروي ميكند .

‎‎ويژگي هاي رويداديEvent Attributes -‎

‎‎تگ فوق همچنين از ويژگي هاي رويدادي پيروي ميكند.

‎مثال بيشترـ استفاده‎<source>‎ در عنصر ‎<video>‎ براي پخش يك ‎ويدئو

‎ 
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

--(go to editor for change code and run)

‎

‎‎نكته ـ در پخش ويدئو مثال بالا مرورگراولين منبع قابل قبولش را اقدام به پخش مي نمايد.

‎‎مثال ـ استفاده‎<source>‎ درعنصر ‎<picture>‎ درنماي ديد مختلف

‎ 
<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

--(go to editor for change code and run)

‎‎تنظيمات پيش فرضDefault CSS Settings -‎

‎‎نــدارد.

‎مرجع كامل تگهايHTML‎
‎مرجع كامل ويژگيهايHTML‎

Previous >    <Next