HTML Embed Multimedia | بلاگ

HTML Embed Multimedia

ساخت وبلاگ

HTML Embed Multimedia

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

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


 مثال:

در اینجا مثال ساده ای می بینید از اجرای یک فایل جاسازی شده ی midi.

 

مرحله 1

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

 

    <title>HTML embed Tag <title>

 

<head>

 

<body>

 

    <embed src="/html/yourfile.mid"` width="100%" height="60">

 

    <noembed><img src="yourimage.gif" alt="Alteative Media"><noembed>

 

    <embed>

 

<body>

 

<html>

 

ویژگی های برچسب < embed>

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

 

Attribute
Description
align
تعیین می کند که چگونه یک آبجکت را تنظیم کرد، که می تواند هم در مرکز، هم در راست و یا چپ تنظیم شود.
autostart
این ویژگی Boolean نشان می دهد که آیا مدیا باید به طور خودکار شروع به کار کند. شما می توانید آن را با true یا false تنظیم کنید.
loop
تعیین می کند که آیا صدا متداولا پشت سرهم تکرار شود( لوپ را روی true تنظیم کنید)، یا چند دفعه باید تکرار شود ( یک مقدار مثبت) و یا اصلا تکرار نشود(false).
playcount
تعداد دفعاتی را که یک صدا باید تکرار شود تعیین می کند. اگر در حال استفاده از IE هستید، این گزنیه جایگزینی برای loop می باشد.
hidden
مشخص می کند که آیا آبجکت مولتی مدیا باید روی صفحه نمایش داده شود.مقدار false یعنی نه و مقدار true یعنی بله.
width
عرض آبجکت به پیکسل.
height
عرض آبجکت به پیکسل.
name
نامی که برای اشاره به آبجکت استفاده می شود.
src
URL مربوط به آبجکت که باید جاسازی شود.
volume
میزان صدا را کنترل می کند که می تواند از 0 (صدا قطع شده) تا 100 (آخرین حد صدا) باشد.

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

می توانید از انواع مدیاهای مختلفی مانند فایل های flash movies، AVi و MOV در داخل برچسب embed استفاده کنید.

 

  • فایل های swf – فایل هایی هستند که با برنامه ی macromedia’s flash تولید می شوند.
  • فایل های wmv – انواع فایل های تصویری ویندوز مایکروسافت می باشند.
  • فایل های mov - فرمت Quick time movie در اپل.
  •  فایل های mpeg – فایل های تصویری هستند که توسط گروه تخصصی تصاویر متحرک (Moving Pictures Expert Group) ایجاد می شوند.

مرحله 2

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

 

    <title>HTML embed Tag<title>

 

<head>

 

<body>

 

    <embed src="/html/yourfile.swf" width="200" height="200">

 

    <noembed><img src="yourimage.gif" alt="Alteative Media"><noembed>

 

    <embed>

 

<body>

 

<html>

 

صدای زمینه

 

شما می توانید از برچسب < bgsound>در html برای اجرای صدا در زمینه ی صفحه ی وب خود استفاده کنید. این برچسب فقط توسط اینترنت اکسپلورر پشتیبانی می شود و دیگر مرورگرها آن را نادیده می گیرند. زمانی که سند اصلی در ابتدا توسط کاربر دانلود شده و نمایش داده می شود، این برچسب یک فایل صدا را دانلود کرده و اجرا می کند. همچنین هروقت کاربر مرورگر را تازه سازی کند، صدای زمینه نیز دوباره اجرا خواهد شد.این برچسب دارای فقط دو ویژگی می باشد، loop و src، که همانطور که در بالا توضیح داده شد هر دوی این ویژگی ها دارای یک معنا می باشند.
در اینجا مثال ساده ای از اجرای فایل کوچک midi را می بینید.

 

 

مرحله 3

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

 

    <title>HTML embed Tag<title>

 

<head>

 

<body>

 

    <bgsound src="/html/yourfile.mid">

 

        <noembed><img src="yourimage.gif"><noembed>

 

    <bgsound>

 

<body>

 

<html>

 

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

 

برچسب آبجکت در HTML

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


 مثال:

شما می توانید یک سند HTML را در خود سند HTML اجرا کنید.

 

مرحله 4

 

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

 

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

 

</object>

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


 مثال:

شما می توانید یک سند PDF را در یک سند HTML اجرا کنید.

 

مرحله 5

 

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

 

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

 

</object>

 

 مثال:

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

 

مرحله 6

<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>

 مثال:

شما می توانید یک سند flash مانند زیر اجرا کنید.

 

مرحله 7

<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>

 مثال:

شما می توانید یک سند java applet وارد سند HTML کنید.

 

مرحله 8

<object classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"

 

        width="200" height="200">

 

    <param name="code" value="applet.class">

 

</object>

 

ویژگی classid تعیین می کند که چه نسخه ای از java plug-in استفاده شود. شما می توانید از ویژگی انتخابی codebase برای مشخص کردن چگونگی دانلود JRE استفاده کنید.

 

برای مشاهده کدها برروی دوره آموزش طراحی سایت کلیک نمایید.

 

 

آموزش برنامه نویسی دوره آموزش طراحی سایت,...
ما را در سایت آموزش برنامه نویسی دنبال می کنید

نویسنده : پیمان کلانتری بازدید : 262 تاريخ : دوشنبه 17 خرداد 1400 ساعت: 17:48