مشاوره رایگان
دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

آموزش مالتی مدیا در HTML - نمایش فیلم و صوت در صفحات وب


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

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

مثال

در اینجا یک مثال ساده برای پخش فایل 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>

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

 

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

شماره

ویژگی

توضیحات

1

align

این ویژگی  چگونگی جابجایی شی را مشخص می کند. این ویژگی را می توان نسبت به مرکز(center)، چپ(left) یا راست(right) تنظیم نمود.

2

autostart

این ویژگی از نوع boolean می باشد و به وسیله ی آن مشخص می کنیم که آیا رسانه ها (media) بطور خودکار شروع به کار کنند یا خیر. شما می توانید آن را با مقدار true یا false مقداردهی کنید.

3

loop

می تواند صدا به طور مداوم پخش شود (loop را روی true تنظیم کنید)، یا برای تعداد بار مشخصی تکرار شود (loop را با یک مقدار مثبت مقداردهی کنید) یا اصلا تکرار نشود ( loop را روی false تنظیم کنید)

4

playcount

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

5

hidden

به وسیله ی این ویژگی تعیین می کنیم که آیا شیء چند رسانه ای (multimedia object) در صفحه نشان داده شود یا خیر. مقدار false به معنی عدم نمایش و مقدار true به معنی موافقت برای نمایش می باشد.

6

width

این ویژگی مقدار عرض شیء را بر حسب واحد pixel مشخص می کند.

7

height

این ویژگی ارتفاع شیء را بر حسب واحد pixel مشخص می کند.

8

name

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

9

src

آدرس شی ای که باید embed شود را مشخص می کند.

10

volume

این ویژگی، حجم صدا را کنترل می کند. می تواند از 0 (خاموش) تا 100 (حجم کامل) باشد.

 

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

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

 

فایل های .swf – این نوع فایل ها، فایل هایی هستند که توسط برنامه Macromedia's Flash تولید می شوند.

فایل های .wmv – این نوع فایل ها، انواع فایل های ویدئویی ویندوز مایکروسافت هستند.

فایل های .mov – این نوع فایل ها، فرمت فیلم Quick Time Movie اپل هستند.

فایل های .mpeg - فایل های تصویری ای هستند که توسط گروه کارشناسان تصاویر متحرک (Moving Pictures Expert Group) تولید می شوند.

مثال :

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

صدای زمینه

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

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

 

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

در اینجا یک مثال ساده برای پخش یک فایل کوچک MIDI را مشاهده می کنید.

<!DOCTYPE html>
<html>

 
   <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، که یک کد برنامه گذاری جهانی برای موسیقی است.

برچسب object در HTML

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

در اینجا چند مثال را مشاهده می نمایید -

مثال - 1

شما می توانید یک سند HTML را در یک سند HTML دیگر به صورت زیر وارد (embed) کنید:

<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.htm</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

شما می توانید یک سند flash به شرح زیر به سند HTML  اضافه کنید -

<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

شما می توانید یک سند java applet را به سند HTML به صورت زیر اضافه کنید -

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

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

فصلِ: 5 , تعداد قسمت ها: 177 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…

HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌…
فصلِ: 3 , تعداد قسمت ها: 25 , سطح: صفر تا صد

این فصل در یک نگاه:

فصل سوم…

آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ: 5 , تعداد قسمت ها: 77 , سطح: متوسط

این فصل در یک نگاه:

ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…

این مجموعه با تلفیقی از فریمورک bootstrap  و کد های html و css  ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ: 11 , تعداد قسمت ها: 162 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…

در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js  و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ: 1 , تعداد قسمت ها: 15 , سطح: متوسط

این فصل در یک نگاه:

رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…

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

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید