تبلیغات

قرار دادن ویدیو در بک گراند سایت

قرار دادن ویدیو در بک گراند سایت


شاید در بعضی سایت‌ها دیده باشید که در بَک‌گراندشان ویدیویی در حال پخش وجود دارد؛ این کار ممکن است جذابیت خاصی به آن سایت داده باشد و از این رو شما نیز بخواهید در سایت خود چنین کاری را انجام دهید. پس در ادامه با فول‌کده همراه باشید.

با توجه به این‌که قرار گرفتن ویدیو در هاست شما ممکن است ترافیک هاستتان را کم کرده و آن را درگیر پردازش‌های زیادی کند، بهتر است اولا حجم ویدیو را کم کنید تا به راحتی پخش شود و ثانیا آن را در جای دیگری آپلود کنید. هم‌چنین تصویر پیش‌فرضی قرار دهید تا در صورت لود نشدن ویدیو، تصویر نمایش داده شود.

آموزش انجام کار

ما از HTML5 و CSS برای انجام این کار استفاده خواهیم کرد.

کد HTML:

  • در این‌جا، ویژگی‌های پخش خودکار، حالت بی‌صدا و تکرار ویدیو را هم قرار داده‌ایم. (loop, muted, autoplay)
  • ویژگی pooster عکسی را که قبل از لود شدن فیلم نمایش داده می‌شود تعیین می‌کند.
    حتما این عکس را قرار دهید تا اگر مشکلی در لود شدن فیلم به وجود آمد، حداقل تصویری وجود داشته باشد.
  • هم‌چنین سه فرمت mp4، webm و ovg را نیز قرار دادیم تا برای مرورگرهای مختلف بهینه شده باشد. می‌توانید فقط یک فرمت را قرار دهید.

کد استایل سی اس اس:

  • استایل های فوق با اینترنت اکسپلورر 8 سازگار نیستند و البته این قضیه زیاد هم مهم نیست! 😀
  • اگر به استایل دقت کنید، می‌بینید که برای دیوایس‌های دارای عرض کم‌تر از 768 پیکسل، ویدیو را مخفی کرده‌ایم و به جای آن، تصویر را نمایش داده‌ایم.
    چون در بسیاری از موبایل‌ها، ویدیوها به صورت اتوماتیک پخش نمی‌شوند و به جای پخش اتوماتیک، یک دکمه جهت پلی کردن ویدیو به نمایش در می‌آید که این مسئله در نحوه‌ی نمایش سایت تاثیر منفی خواهد داشت.
    البته با جاوا اسکریپت می‌توان این مشکل را حل کرد.
  • دلیل z-index برابر -100 یا منفی 100 این است تا هر عنصر دیگری را که بعدا قرار می‌دهید، یقین داشته باشید که روی ویدیو قرار خواهند گرفت.
    در واقع چینش آن در محور z یا عمق صفحه نمایش را مشخص کرده‌ایم و یک مقدار خیلی پایین داده‌ایم تا مشکلی پیش نیاید.
    این مقدار به صورت پیش‌فرض روی 0 قرار دارد.
تبلیغات
2 نظر
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس / مدیر فول کده

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده 2 دیدگاه