خانه / مقالات اموزشی / html / آموزش قرار دادن ودیو در وب سایت

آموزش قرار دادن ودیو در وب سایت

کار با عناصر چند رسانه ای

در جلسه قبل طریقه قرار دادن یک فایل چند رسانه ای در صفحه html را آموختیم، گفتیم که برای قرار دادن یک فایل باید از تگ object و برای کنترل بیشتر روی فایل از تگ های param که در داخل  تگ object قرار می گیرند استفاده می کنیم. اما چونکه بعضی از مرورگرها از این تگ به درستی پشتیبانی نمی کنند تگ embed را معرفی کردیم و طریقه استفاده از آن را آموزش دادیم. حال ادامه آموزش را با هم دنبال می کنیم:

تگ <bgsound>

از این تگ که فقط در مرورگر internet explorer پشتیبانی می شود، می توان برای قرار دادن یک فایل صوتی در پس زمینه صفحه استفده نمود. تا این فایل به محض بارگذاری صفحه به صورت خودکار پخش شود. نکته اینکه این عنصر جزء عناصر تهی بوده و حتما باید در داخل تگ <head> صفحه استفاده شود. این تگ از صفت های زیر پشتیبانی می کند.

  • src : آدرس فایل موردنظر برای پخش را مشخص می کند.
  • loop : تعداد تکرار پخش صدا را کنترل می کند.
  • valume : برای کنترل میزان صدای فایل پخش شونده استفاده می شود و مقداری بین ۱۰۰۰۰- تا ۰ را به عنوان مقدار می پذیرد. در واقع مقدار این صفت مقدار کاهش صدا را کنترل می کند. مثلا مقداری برابر ۵۰۰۰- به معنی نصف کردن صدا نبوده  بلکه به معنی کاهش ۵۰۰۰ واحد از کل صداس سیستم کاربر است.
  • balance : تراز پخش صدا بین بلندگوهای چپ و راست را کنترل می کند و مقداری بین ۱۰۰۰۰- تا ۱۰۰۰۰+ را به عنوان مقدار می پذیرد. هر چه این مقدار به ۱۰۰۰۰+ نزدیکتر باشد میزان صدای پخش شده از بلندگوی سمت راست و هر چه این مقدار به ۱۰۰۰۰- نزدیکتر باشد میزان صدای پخش شده از بلند گوی سمت چپ بیشتر خواهد بود. مقدار صفر ب معنای مساوی بودن میزان صدای پخش شده از هر دو بلندگو است که مقدار پیشفرض این صفت نیز می باشد.
نکته : یکی دیگر از راه های قرار دادن موزیک های پس زمینه استفاده از تگ embed است که در این حالت باید حتما صفت hidden را برابر true قرار دهیم. این ترفند به خوبی در تمامی مرورگرها کار می کند.
 

استفاده از ویژگی های HTML5 برای نمایش صدا و ویدئو

HTML5 روش ها و تگ های جدیدی برای قرار دادن عناصر چندرسانه ای در صفحات وب را فراهم کرده است. تگ video برای قرار دادن فایل های ویدیویی و تگ audio برای قرار دادن فایل های صوتی در این نسخه ارائه شده اند. مزیت های این دو تگ نسبت به تگ هایی همچون object و embed این است که مرورگرهایی که از این دو تگ جدید پشتیبانی می کنند قادرند اینگونه فایل های صوتی و ویدیویی را بدون نیاز به پلاگین ها اجرا کنند.

تگ <video> : ابتدا به بررسی تگ video می پزدازیم. این تگ از صفت های زیر پشتیبانی می کند:

  • audio : وضعیت پیش فرض صدای فایل ویدیویی را مشخص می کند و در صورتی که آن را برابر مقدار muted قرار دهید صدای فایل از همان ابتدای اجرا قطع خواهد بود.
  • autoplay : این صفت بولین همانطور که از نامش پیداست در صورتی که تعیین شود فایل ویدیویی را به محض بارگذاری و آماده شدن، به ورت خودکار اجرا خواهد کرد.
  • controls : این صفت بولین در صورتی که تعیین شود، کمشخص می کند که کلید های کنترلی پخش فایل ویدیویی باید نمایش داده شود. مرورگرها می بایست کلیدهای کنترلی زیر را فراهم کنند. کلیدهای کنترلی شامل play , pause  , seeking , volume ,  و دکمه Fullscreen می باشند.
  • Loop : این صفت بولین در صورت ذکر شدن، فایل ویدیویی را پس از پایان مجددا اجرا خواهد کرد.
  • poster : این صفت موجب نمایش یک عکس در هنگام بارگذاری فایل یا تا زمانی که کاربر فایل را اجرا نکرده است خواهد شد. این صفت آدرس یک عکس را به عنوان مقدار می پذیرد. بهتر است این تصویر، تصویر یکی از فریم های فیلم باشد. در صورتی که از این صفت استفاده نشود مرورگر به صورت پیش فرض اولین فریم از فیلم را نمایش خواهد داد.
  • preload: این صفت مشخص می کند که آیا فایل ویدیویی باید همزمان با بارگذاری صفحه، دانلود شود یا خیر؟ این صفت سه مقدار زیر را می پذیرد.
    • auto : تعیین این مقدار موجب بارگذاری فایل همزمان با بازگذاری صفحه خواهد شد.
    • metadata : این مقدارفقط موجب دریافت اطلاعات اضافی فایل و عدم بارگذاری آن همزمان با بارگذاری صفحه خواهد شد. اطلاعات اضافی شامل مواردی همچون ابعاد فیلم، اولین فریم، لیستی از track ها، مدت زمان و … می باشد.
    • none : تعیین این مقدار از بارگذاری فایل همزمان با بارگذاری صفحه جلوگیری خواهد کرد.
  • src : این صفت آدرس فایلی که باید پخش شود را مشخص می کند.
  • width :
  • height :

در مثال زیر یک نمومه از کاربرد این تگ همراه با صفت هایی که در بالا گفتیم را مشاهده می کنید:

 

تگ <audio> :  از این تگ برای گنجاندن فایل صوتی در صفحات اینترنتی استفاده می شود. این تگ از صفت های زیر یل همان توضیحات ذکر شده در تگ video پشتیبانی می کند.

  • autoplay
  • controls
  • loop
  • preload
  • src
 

همانطور که می دانید همه مرورگرها از تمامی فرمت های ویدیویی و صوتی به صورت یکسان پشتیبانی نمی کنند. در این صورت چنانچه ما در تگ های audio و video با استفاده از صفت src فایلی با فرمت خاص را مشخص کنیم ممکن است در بعضی از مرورگرها نمایش داده نشود.

کی از مزیت های تگ های فوق امکان تعریف همزمان چندین فرمت از یک فایل برای حل این مشکل است. برای اینکار کافی است از تگی به نام source استفاده کنیم. ما می توانیم همزمان از هر تعداد تگ source برای تعیین فرمت های مختلف در داخل تگ های audio و video استفاده کنیم. در این صورت مرورگرها از میان فرمت های مشخص شده اولین فرمتی که با آن سازگار است را اجرا می کند. تگ source در این حالتدو صفت می پذیرد که به شرح زیر است:

  • src : این صفت آدرس فایل مورد نظر را تعیین می کند.
  • type:  این صفت هم mime Type فایل مورد نظر را تعیین می کند.

کد زیر نحوه استفاده از تگ های audio و source همزمان با یکدیگر را نشان می دهد:

 

نحوه استفاده از تگ های video و source نیز به همین شکل است.

بسیار خب تا به اینجا با نحوه قرار دادن فایل های چند رسانه ای در صفحه وب هم از طریق تگ های embad و object و هم از طریق تگ های html5 آشنا شدید. در مطلب بعدی نحوه ایجاد صفحات چندگانه (فریم ها) در html را فرا خواهید گرفت.

اموزش طراحی سایت

آموزش طراحی سایت

اموزش طراحی وب سایت

آموزش طراحی سایت

درباره آموزشگاه نوین آی تی

همچنین ببینید

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net