آموزش چندرسانه ای در HTML

4 سال پیش

امتیاز دهید post

آموزش چندرسانه ای در HTML

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش چندرسانه ای در HTML خواهیم پرداخت.

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

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

مثال

در اینجا یک مثال ساده برای پخش یک فایل midi جاسازی شده آورده شده است –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

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

&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML embed Tag</title>

</head>

<body>

</embed>

</body>

</html>

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

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

align

نحوه چیدمان شی را تعیین می کند. می توان آن را روی مرکز، چپ یا راست تنظیم کرد.

autostart

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

loop

مشخص می کند که صدا باید به طور مداوم پخش شود (تنظیم حلقه بر روی true) ، تعداد معینی از بار (مقدار positive ) یا اصلاً پخش نشود. (false )

playcount

تعداد دفعات پخش صدا را مشخص می کند. اگر شما از اینترنت اکسپلورر استفاده می کنید این گزینه جایگزین برای حلقه است.

hidden

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

width

عرض شی در پیکسل

height

ارتفاع شی در پیکسل

name

نامی که برای ارجاع به شی استفاده می شود.

src

URL شیئی که باید تعبیه شود.

volume

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

انواع ویدیو پشتیبانی شده

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

swf files. – انواع فایل های ایجاد شده توسط برنامه Flash Macromedia است.
wmv files.– انواع فایل های Media Video Microsoft Windows Window هستند.
mov files. – قالب Quick Time Movie اپل هستند.
mpeg files. – فایل های فیلم ایجاد شده توسط Moving Pictures Expert Group هستند

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML embed Tag&lt;/title&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;embed src = "/html/yourfile.swf" width = "200" height = "200" &gt;
         &lt;noembed&gt;&lt;img src = "yourimage.gif" alt = "Alternative Media" &gt;&lt;/noembed&gt;
      &lt;/embed&gt;
   &lt;/body&gt;

&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML embed Tag</title>

</head>

<body>

</embed>

</body>

</html>

خروجی

پس زمینه صوتی

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

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

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

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

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML embed Tag&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;bgsound src = "/html/yourfile.mid"&gt;
         &lt;noembed&gt;&lt;img src = "yourimage.gif" &gt;&lt;/noembed&gt;
      &lt;/bgsound&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML embed Tag</title>

</head>

<body>

</bgsound>

</body>

</html>

با این کار صفحه خالی ایجاد می شود. این تگ هیچ مولفه ای را نمایش نمی دهد و مخفی می ماند.

اینترنت اکسپلورر همچنین می تواند فقط سه پرونده مختلف با فرمت صدا را اداره کند – wav، قالب اصلی برای رایانه های شخصی. au ، قالب اصلی بیشتر ایستگاه های کاری یونیکس ؛ و MIDI ، یک طرح جهانی رمزگذاری موسیقی.

شی تگ HTML

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

در اینجا چند مثال آورده شده است –

مثال – 1

شما می توانید یک سند HTML را به صورت زیر در خود یک سند HTML جاسازی کنید –

&lt;object data = "data/test.htm" type = "text/html" width = "300" height = "200"&gt;
   alt : &lt;a href = "data/test.htm"&gt;test.htm&lt;/a&gt;
&lt;/object&gt;

alt : <a href = "data/test.htm">test.htm</a>

</object>

اگر مرورگر از تگ شی پشتیبانی نکند، در اینجا ویژگی alt وارد تصویر می شود.

مثال – 2

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

&lt;object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200"&gt;
   alt : &lt;a href = "data/test.pdf"&gt;test.htm&lt;/a&gt;
&lt;/object&gt;

alt : <a href = "data/test.pdf">test.htm</a>

</object>

مثال – 3

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

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

alt : <a href = "data/test.wav">test.wav</a>

</object>

مثال – 4

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

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

codebase = "someplace/swflash.cab" width = "200" height = "300">

</object>

مثال – 5

به صورت زیر می توانید یک برنامه جاوا به سند HTML اضافه کنید –

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

width = "200" height = "200">

</object>

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

منبع.

لیست جلسات قبل آموزش HTML

امتیاز دهید post

نویسنده مطلب saber

آموزش چندرسانه ای در HTML

آموزش چندرسانه ای در HTML

مثال

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

انواع ویدیو پشتیبانی شده

پس زمینه صوتی

شی تگ HTML

مثال – 1

مثال – 2

مثال – 3

مثال – 4

مثال – 5

لیست جلسات قبل آموزش HTML

دیدگاه شما

بدون دیدگاه

آموزش چندرسانه ای در HTML

مثال

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

انواع ویدیو پشتیبانی شده

پس زمینه صوتی

شی تگ HTML

مثال – 1

مثال – 2

مثال – 3

مثال – 4

مثال – 5

لیست جلسات قبل آموزش HTML

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه