آموزش HTML (قسمت 10) : کار با عناصر چند رسانه ای (جلسه دوم)

- visibility ۱۱ mode_comment

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

تگ <bgsound>

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

  • src : آدرس فایل موردنظر برای پخش را مشخص می کند.
  • loop : تعداد تکرار پخش صدا را کنترل می کند.
  • valume : برای کنترل میزان صدای فایل پخش شونده استفاده می شود و مقداری بین 10000- تا 0 را به عنوان مقدار می پذیرد. در واقع مقدار این صفت مقدار کاهش صدا را کنترل می کند. مثلا مقداری برابر 5000- به معنی نصف کردن صدا نبوده  بلکه به معنی کاهش 5000 واحد از کل صداس سیستم کاربر است.
  • balance : تراز پخش صدا بین بلندگوهای چپ و راست را کنترل می کند و مقداری بین 10000- تا 10000+ را به عنوان مقدار می پذیرد. هر چه این مقدار به 10000+ نزدیکتر باشد میزان صدای پخش شده از بلندگوی سمت راست و هر چه این مقدار به 10000- نزدیکتر باشد میزان صدای پخش شده از بلند گوی سمت چپ بیشتر خواهد بود. مقدار صفر ب معنای مساوی بودن میزان صدای پخش شده از هر دو بلندگو است که مقدار پیشفرض این صفت نیز می باشد.
info نکته :

یکی دیگر از راه های قرار دادن موزیک های پس زمینه استفاده از تگ 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 :

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

comment دیدگاه کاربران
لقمان آوند

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

سجاد دریس

سلام.
نظر لطفته لقمان جان، درس پس میدیم.

مسعود

سلام مجدد میخاستم بدونم دقیقا باید کجا بگذارم.تو این پست راهنمایی نفرمودین فقط کدشو آوردین میشه بگین کد رودرقالب بگذارم؟کجاش؟ یا درتنظینات وبلاگ یا این که در ویرایش اچتمل مطلب پست؟ راهنمایی می کنین؟

سجاد دریس

در ویرایش html پست

مسعود

خواستم بپرسم برای هرپست اگر بخواهیم فیلم جداگانه ای بگذاریم در کجای قالب یا متن داخل وبلاگ یا تنظیمات وبلاگ قرار دهیم؟

سجاد دریس

سلام.
این کد نمونه رو ببنید :

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

Abbas412

سجاد جان یه سوال
اینجور که من فهمیدم توی تگ embed صفت hidden فقط توی کروم پشتیبانی میشه
با فایرفاکس و اپرا چک کردم، اصلا پخش نمیشد
یه امتحان میکنی؟؟

سجاد دریس

سلام.
از چه ورژنی استفاده میکنی؟

Abbas412

آقا ببخشید یه سوال دیگه!
این تگ video رو من توی همه مرورگرهام تست کردم (کروم، فایرفاکس، اپرا، ie)، همشونم آخرین نسخه هستن!
عینا کد خودتو کپی پیست کردم، و بعد آدرس ها رو تصحیح کردم
ولی هیچکدوم کار نکردن، یعنی فقط تصویر پوستر رو نشون میدادن، و فایل پخش نمیشد، خودمم که روی play کلیک میکردم پخش نمیشد
بنظرت اشکال از کجاست؟؟

Abbas412

آقا فایل رو تغییر دادم، توی کروم و ie!!!! کار کرد، خوب پخش میشد
ولی فایرفاکس و اپرا هنوز نه 🙁

سجاد دریس

کدت رو بفرست تا ببنیم.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.