آموزش HTML - محتوای چندرسانه‌ای

در دو فصل قبلی، از عناصر <audio> و <video> برای افزودن موسیقی و ویدئو به صفحه وب خود استفاده کردیم. روش‌های جایگزین دیگری نیز برای افزودن ویدئو، صدا، تصویر یا هر محتوای خارجی دیگری به وب‌سایت با استفاده از تگ‌های HTML وجود دارد؛ از جمله <embed> و <object>. این تگ‌ها باعث می‌شوند مرورگر به‌صورت خودکار کنترل‌های مربوط به محتوای چندرسانه‌ای را در اختیار کاربر قرار دهد:

تگ <embed> در HTML برای جاسازی محتوای خارجی مانند تصاویر، ویدئوها و برنامه‌های تحت وب استفاده می‌شود. این تگ اغلب برای جاسازی محتواهایی مانند فیلم‌های فلش یا پخش‌کننده‌های صوتی و تصویری به کار می‌رود.
تگ <object> در HTML برای جاسازی انواع مختلف منابع خارجی، از جمله تصاویر، ویدئوها، فایل‌های PDF و سایر منابع وب استفاده می‌شود. این تگ می‌تواند انواع مختلف فایل‌ها را نمایش دهد.

نحوه نوشتن

در ادامه، ساختار نوشتاری جاسازی محتوای چندرسانه‌ای در صفحه وب را مشاهده می‌کنید:

تگ Embed:

<embed src = "url_of_resource">

تگ Object:

<object data="url_of_resource" type="typeOfResource">

ویژگی‌های تگ <embed>

ویژگی‌های زیر با تگ <embed> استفاده می‌شوند:

ویژگی	توضیحات
width	ویژگی width برای تعیین عرض فایل جاسازی‌شده بر حسب پیکسل استفاده می‌شود.
height	ارتفاع فایل جاسازی‌شده بر حسب پیکسل را مشخص می‌کند.
title	برای عنوان‌گذاری محتوا استفاده می‌شود. عنوان باید محتوای موردنظر را توصیف کند.
src	نشانی اینترنتی فایل موردنظر برای جاسازی.
type	نوع ورودی، مانند mp4 و mp3، را مشخص می‌کند.

ویژگی‌های تگ <object>

ویژگی‌های زیر با تگ <object> استفاده می‌شوند:

ویژگی‌ها	توضیحات
data	محل یا مسیر منبع از طریق ویژگی data مشخص می‌شود.
type	نوع منبع را مشخص می‌کند.
height	ارتفاع ناحیه نمایش منبع را مشخص می‌کند.
width	عرض ناحیه نمایش منبع را مشخص می‌کند.
form	مقدار این ویژگی، شناسه یک فرم است. ویژگی form مشخص می‌کند که این شیء با کدام فرم مرتبط است.
name	یک نام منحصربه‌فرد برای شیء تعیین می‌کند.
usemap	نشانی اینترنتی یک نقشه تصویری سمت کاربر را که قرار است همراه با شیء استفاده شود، مشخص می‌کند.

نمونه‌هایی از جاسازی محتوای چندرسانه‌ای در HTML

در ادامه، چند نمونه ارائه شده است که نحوه نمایش محتوای چندرسانه‌ای در صفحه وب را با استفاده از تگ‌های <embed> و <object> نشان می‌دهند:

جاسازی ویدئو با استفاده از عنصر <embed>
جاسازی فایل صوتی با استفاده از عنصر <embed>
نمایش فایل PDF با استفاده از عنصر <object>
نمایش یک سند HTML در داخل صفحه وب

جاسازی ویدئو با استفاده از عنصر <embed>

برای جاسازی یک فایل ویدئویی خارجی در صفحه وب، می‌توانیم مسیر فایل ویدئو را در ویژگی src عنصر <embed> قرار دهیم. قالب‌های ویدئویی پشتیبانی‌شده عبارت‌اند از MP4، WebM و Ogg. نیازی نیست از ویژگی controls استفاده کنیم، زیرا تگ <embed> با توجه به نوع رسانه، کنترل‌های لازم را به‌صورت خودکار فراهم می‌کند. ویژگی controls به کاربران امکان می‌دهد عملکردهای پخش ویدئو را مدیریت کنند.

مثال زیر نحوه جاسازی یک فایل ویدئویی با استفاده از عنصر embed را نشان می‌دهد:

<!DOCTYPE html>
<html>

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

<body>
   <h1>Playing video using embed tag</h1>
   <embed src="/html/media/video/sampleTP.mp4" 
          type="video/mp4" 
          width="450" 
          height="250">
   </embed>
</body>

</html>

جاسازی فایل صوتی با استفاده از عنصر <embed>

برای افزودن یک قطعه صوتی به صفحه وب، می‌توانیم مسیر فایل صوتی را در ویژگی src قرار دهیم و نوع فایل صوتی را با استفاده از ویژگی type مشخص کنیم. قالب‌های صوتی پشتیبانی‌شده عبارت‌اند از ogg، mp3 و wav.

مثال زیر نحوه جاسازی یک فایل صوتی با استفاده از عنصر <embed> را نشان می‌دهد:

<!DOCTYPE html>
<html>

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

<body>
   <h1>Playing audio using embed tag</h1>
   <embed src = "/html/media/audio/sample_3sec_audio.mp3" 
          type = "audio/mp3" 
          width="450" 
          height="250">
   </embed>
</body>

</html>

نمایش فایل PDF با استفاده از عنصر <object>

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

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

<!DOCTYPE html>
<html lang="en">

<head>
      <title>PDF Embed Example</title>
</head>

<body>
      <h1>Embedding a PDF Document</h1>
      <p>Here is an embedded PDF document:</p>
      <object data="html/pdf/index.pdf" 
              type="application/pdf" 
              width="300" 
              height="200">
      </object>
</body>

</html>

نمایش یک سند HTML در داخل صفحه وب

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

<!DOCTYPE html>
<html lang="en">

<head>
      <title>HTML Embed Example</title>
</head>

<body>
   <h1>Embedding an HTML Document</h1>
   <p>Here is an embedded HTML document:</p>
   <object data="html/index.htm" 
            type="text/html" 
            width="500" 
            height="400">
      alt : <a href="html/index.htm">
         test.htm
      </a>
   </object>
</body>

</html>

مقایسه تگ‌های <object> و <embed>

مقایسه این دو تگ مشابه به شما کمک می‌کند تا تگ مناسب را در جای مناسب انتخاب کنید.

ویژگی	<object>	<embed>
تگ HTML	<object>	<embed>
کاربرد	برای جاسازی محتوای چندرسانه‌ای مانند صدا، ویدئو، اپلت‌های جاوا، ActiveX، فایل‌های PDF و فلش استفاده می‌شود.	عمدتاً برای جاسازی محتوای چندرسانه‌ای استفاده می‌شود.
ویژگی‌ها	از ویژگی‌های مختلفی مانند data، type، width و height پشتیبانی می‌کند.	از ویژگی‌های مختلفی مانند src، type، width و height پشتیبانی می‌کند.
HTML5	پشتیبانی می‌شود	پشتیبانی می‌شود
محتوای جایگزین	می‌توان محتوای جایگزین را درون تگ قرار داد.	نمی‌توان محتوای جایگزین را درون تگ قرار داد.

تگ object از محتوای جایگزین پشتیبانی می‌کند؛ به این معنا که اگر نسخه‌ای از مرورگر از تگ object پشتیبانی نکند، محتوای نوشته‌شده درون این تگ به‌جای شیء نمایش داده می‌شود.

پیشرفت مطالعه: وضعیت خوانده‌شدن این درس فقط در همین مرورگر ذخیره می‌شود؛ بدون نیاز به حساب کاربری.

درس قبلی: پخش‌کننده صوتی درس بعدی: عناصر هدر