site-logo site-logo
HTML - چندرسانه‌ای (Embed Multimedia)
نوشتن نظر کلیک کنید

HTML – چندرسانه‌ای (Embed Multimedia)

آخرین بروزرسانی: 

این بخش نشان‌دهنده نحوه اضافه کردن موسیقی یا ویدیو به صفحه وب شما است. راه‌های ساده‌تر برای اضافه کردن ویدیو یا صدا به وب‌سایت شما این است که از تگ HTML ویژه به نام <embed> استفاده کنید. این تگ باعث می‌شود مرورگر خودکاراً کنترل‌هایی برای چنین چیزهای چندرسانه‌ای را اضافه کند، در صورتی که مرورگر تگ <embed> را پشتیبانی کند و نوع رسانه را فراهم کند.

همچنین می‌توانید یک تگ <noembed> را برای مرورگرهایی که تگ <embed> را شناسایی نمی‌کنند، اضافه کنید. به عنوان مثال، می‌توانید از <embed> برای نمایش یک فیلم از انتخاب خود و از <noembed> برای نمایش یک تصویر JPG تکی استفاده کنید اگر مرورگر تگ <embed> را پشتیبانی نکند.

مثال

این مثال نشان‌دهنده یک نحوه ساده برای پخش یک فایل midi تعبیه شده است.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <embed src = "/html/yourfile.mid" width = "100%" height = "60" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

این کد از تگ <embed> برای نمایش فایل midi استفاده می‌کند. این تگ دارای ویژگی‌هایی مانند src (مسیر فایل مدی)، width (عرض) و height (ارتفاع) است. اگر مرورگر از تگ <embed> پشتیبانی نکند، تگ <noembed> فعال می‌شود و یک تصویر جایگزین نمایش داده می‌شود.

تگ embed

تگ <embed> دارای ویژگی‌های مهمی است که می‌توان با آن‌ها استفاده کرد. در زیر لیستی از این ویژگی‌ها و توضیحات آن‌ها آمده است.

توجه − ویژگی‌های align و autostart در HTML5 منسوخ شده‌اند. از این ویژگی‌ها استفاده نکنید.

  1. align: تعیین می‌کند که چگونه موقعیت اشیاء باید باشد. می‌تواند به صورت center، left یا right تنظیم شود.

  2. autostart: این ویژگی بولین نشان می‌دهد که آیا رسانه باید به طور خودکار شروع شود یا خیر. می‌توان آن را به true یا false تنظیم کرد.

  3. loop: مشخص می‌کند آیا صدا باید به صورت مداوم پخش شود (ویژگی loop را به true تنظیم کنید)، تعدادی مشخص از بارها (مقدار مثبت) یا به هیچ عنوان (false).

  4. playcount: تعداد بارهایی که صدا پخش می‌شود را مشخص می‌کند. این یک گزینه جایگزین برای loop است، اگر شما از IE استفاده می‌کنید.

  5. hidden: مشخص می‌کند آیا شیء چندرسانه‌ای باید در صفحه نمایش داده شود یا خیر. مقدار false به معنای خیر و مقدار true به معنای بله است.

  6. width: عرض شیء به پیکسل.

  7. height: ارتفاع شیء به پیکسل.

  8. name: یک نام که برای ارجاع به شیء استفاده می‌شود.

  9. src: URL شیء قابل تعبیه.

  10. volume: کنترل میزان صدا. می‌تواند از 0 (خاموش) تا 100 (صدا کامل) باشد.

انواع ویدیوهای پشتیبانی شده (Supported Video Types)

استفاده از انواع مختلف رسانه‌ها مانند فیلم‌های فلش (.swf)، فایل‌های AVI (.avi)، و فایل‌های MOV (.mov) داخل تگ embed امکان‌پذیر است.

فایل‌های .swf − نوع فایل‌هایی هستند که توسط برنامه Flash شرکت Macromedia ایجاد می‌شوند.

فایل‌های .wmv − نوع فایل‌های ویدئویی Windows Media Video شرکت Microsoft هستند.

فایل‌های .mov − فرمت فیلم Quick Time شرکت Apple هستند.

فایل‌های .mpeg − فایل‌های فیلمی که توسط گروه کارشناسان تصویری حرفه‌ای حرکتی (MPEG) ایجاد شده‌اند.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>

   <body>
      <embed src = "/html/yourfile.swf" width = "200" height = "200" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

صدای پس زمینه (Background Audio)

تگ <bgsound> HTML را می‌توانید برای پخش یک موسیقی پس زمینه در صفحه وب خود استفاده کنید. این تگ تنها توسط مرورگر اینترنت اکسپلورر پشتیبانی می‌شود و بیشتر مرورگرهای دیگر این تگ را نادیده می‌گیرند. وقتی کاربر اسناد میزبان را بارگیری و نمایش می‌دهد، فایل صوتی پس زمینه را بارگیری و پخش می‌کند. همچنین فایل صوتی پس زمینه همیشه هنگامی که کاربر مرورگر را رفرش می‌کند دوباره پخش می‌شود.

توجه کنید که تگ bgsound منسوخ شده است و در نسخه‌های آینده HTML از آن استفاده نخواهد شد. بنابراین برای افزودن صدا، استفاده از تگ صوت HTML5 پیشنهاد می‌شود. اما هنوز برای مقاصد آموزشی، این فصل تگ bgsound را به طور دقیق توضیح می‌دهد.

این تگ فقط دارای دو ویژگی loop و src است. هر دو این ویژگی همان معنی بالا را دارند.

در ادامه مثالی ساده برای پخش یک فایل midi کوچک آورده شده است:

<!DOCTYPE html>
<html>

   <head>
      <title>تگ تعبیه HTML</title>
   </head>
	
   <body>
      <bgsound src = "/html/yourfile.mid">
         <noembed><img src = "yourimage.gif" ></noembed>
      </bgsound>
   </body>
	
</html>

این باعث تولید صفحه خالی می‌شود. این تگ هیچ مؤلفه‌ای را نمایش نمی‌دهد و مخفی می‌ماند.

اکسپلورر اینترنتی همچنین تنها می‌تواند با سه فرمت مختلف فایل صوتی را مدیریت کند: wav که فرمت پیش‌فرض برای کامپیوترها است؛ au که فرمت پیش‌فرض برای اکثر کامپیوترهای یونیکس است؛ و MIDI که یک رمزگذاری موسیقی جهانی است.

تگ شیء HTML

تگ <object> در HTML 4 معرفی شد و یک راه‌حل همه‌منظوره برای اضافه کردن اشیاء عمومی فراهم می‌کند. این تگ به نویسندگان HTML اجازه می‌دهد تا همه چیز مورد نیاز یک شیء برای نمایش توسط یک عامل کاربر را مشخص کنند.

در ادامه چندین مثال را بررسی می‌کنیم:

مثال 1

شما می‌توانید یک سند HTML را در یک سند HTML دیگر جاسازی کنید به صورت زیر:

<object data="data/test.htm" type="text/html" width="300" height="200">
   alt: <a href="data/test.htm">test.htm</a>
</object>

در اینجا، اگر مرورگر تگ <object> را پشتیبانی نکند، ویژگی alt نقش آیتم پشتیبانی نشده را ایفا می‌کند.

مثال 2

شما می‌توانید یک سند PDF را در یک سند HTML جاسازی کنید به صورت زیر:

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
   alt: <a href="data/test.pdf">test.pdf</a>
</object>

مثال 3

شما می‌توانید برخی از پارامترهای مربوط به سند را با استفاده از تگ <param> مشخص کنید. در اینجا یک مثال برای جاسازی یک فایل wav آورده شده است:

<object data="data/test.wav" type="audio/x-wav" width="200" height="20">
   <param name="src" value="data/test.wav">
   <param name="autoplay" value="false">
   <param name="autoStart" value="0">
   alt: <a href="data/test.wav">test.wav</a>
</object>

مثال 4

شما می‌توانید یک سند فلش را به صورت زیر اضافه کنید:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="penguin" 
   codebase="someplace/swflash.cab" width="200" height="300">
   
   <param name="movie" value="flash/penguin.swf" />
   <param name="quality" value="high" />
   <img src="penguin.jpg" width="200" height="300" alt="Penguin" />
</object>

مثال 5

شما می‌توانید یک اپلت جاوا را در سند HTML اضافه کنید به صورت زیر:

<object classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" 
   width="200" height="200">
   <param name="code" value="applet.class">
</object>

ویژگی classid نشان‌دهنده نسخه‌ای از افزونه جاوا استفاده شده است. شما می‌توانید از ویژگی اختیاری codebase برای مشخص کردن نحوه دانلود JRE استفاده کنید.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

بیشتر بخوانید
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

بیشتر بخوانید
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.