• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

30147 ۲۴ مهر ۹۱
1 2

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

تگ <bgsound>

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

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

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

1 2
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 11 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    لقمان آوند(۲۵ مهر ۱۳۹۱)

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

    • ‏‏
      سجاد دریس(۲۵ مهر ۱۳۹۱)

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

      • ‏‏

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

  • ‏‏

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

    • ‏‏
      سجاد دریس(۱۰ اسفند ۱۳۹۱)

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

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

  • ‏‏

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

  • ‏‏

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

    • ‏‏

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

    • ‏‏
      سجاد دریس(۴ شهریور ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram