شرکت طراحی سایت آلماتکشرکت طراحی سایت آلماتکشرکت طراحی سایت آلماتکشرکت طراحی سایت آلماتک
  • آلماتک
  • نمونه کار طراحی سایت
  • سئو سایت
  • بلاگ
  • فروشگاه
  • درباره ما
  • تماس با ما
0
  • صفحه نخست
  • بلاگ
  • طراحی سایت
  • استفاده از ویدئو بک گراند در طراحی وب سایت و نکات مهم

استفاده از ویدئو بک گراند در طراحی وب سایت و نکات مهم

مهر ۱۳, ۱۳۹۵
موضوعات
  • طراحی سایت
برچسب ها
    ویدئو بک گراند در طراحی وب سایت

    ویدئو بک گراند در طراحی وب سایت

    در سال‌های اخیر استفاده از پس زمینه های ویدیویی در طراحی وب رشد چشمگیری داشته است. بیشتر طراحان از ویدئو بک گراند در طراحی سایت برای کنترل عواطف و احساسات کاربران استفاده می‌کنند و اغلب در کار خود موفق می‌شوند.

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

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

    اما چگونه می‌توانیم از پس زمینه‌های ویدیویی برای بهتر شدن کیفیت سایت خود استفاده کنیم؟

    ۱۰ نکته جهت استفاده از ویدئو بک گراند در طراحی سایت

    در ادامه ۱۰ نکته کاربردی درباره استفاده از ویدئو بک گراند در طراحی سایت را بیان می نماییم. با طراحی وب سایت آلماتک همراه باشید.

    ۱) فایل ویدیویی خود را تا جایی که می توانید فشرده کنید

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

    شرایط مورد نظر خود را به خوبی بسنجید و بهترین فیلم را انتخاب نمایید. در انتخاب حجم ویدیو سرعت اینترنت کاربران را نیز در نظر بگیرید.

    ۲) یک overlay مناسب روی ویدیو پیاده‌سازی کنید

    ممکن است برای بالا بردن سرعت بارگذاری سایت خود از یک ویدیوی با کیفیت پایین استفاده کرده باشید. در اینصورت از یک overlay برای پنهان کردن کیفیت پایین آن استفاده نمایید.

    ویدئو بک گراند در طراحی سایت

    ویدئو بک گراند در طراحی سایت

    برای اینکار باید یک div بعد از تعیین ویدیوی خود بیاورید یا این که از شبه کلاس ::after استفاده کنید. با استفاده از خاصیت pointer-events: none; اطمینان حاصل کنید که ویدیو با کلیک راست کاربر متوقف نمی‌شود. استفاده از یک Overlay مناسب باعث می‌شود تا کیفیت پایین ویدیو دیده نشود.

    ۳) طول ویدیو را محدود کنید

    طول ویدیو را کم انتخاب کنید تا بدون توقف نمایش داده شود. البته طول ویدیو نباید به اندازه‌ای کم باشد که پشت سرهم نمایش داده شده و کاربر را اذیت کند.

    بهتر است مدت زمان ویدیوی شما بین ۳۰ تا ۴۰  ثانیه باشد. سعی کنید سایز ویدیو نیز از ۲ مگابایت بیشتر نباشد. می‌توانید ویدیو های جالبی را از سایت html5backgroundvideo برای این منظور انتخاب کنید.

    ۴)از حرکات بیش از اندازه اجتناب کنید

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

    ۵)متن با ویدیو هماهنگی داشته باشد

    ویدئو بک گراند در طراحی وب سایت

    ویدئو بک گراند در طراحی وب سایت

    اگر قرار است روی ویدیوی پس زمینه متنی نمایش داده شود، باید قابل خواندن باشد. می‌توانید با استفاده از یک لایه‌ی overlay متن را متمایز کنید. یا اینکه رنگ متن را تغییر دهید تا قابل خواندن باشد. مطمئن شوید که متن و ویدیو خیلی با هم متضاد نباشد و چشم کاربر را اذیت نکند.

    ۶) ابعاد مناسبی را برای ویدیو انتخاب کنید

    در CSS3  ویژگی به نام ظرفیت پس زمینه برای تصاویر مطرح می‌شود که برای ویدیو ها نیز صادق است. به این معنی که سایز یک تصویر یا ویدیوی پس‌زمینه باید به اندازه‌ای باشد که جایگاه خود را پر کند.

    خاصیت object-fit همین کار را برای شما انجام خواهد داد. با استفاده از این خاصیت می‌توانید مطمئن شوید که ابعاد ویدیو با ابعاد محلی که قرار است در آن قرار بگیرد، همخوانی دارد.

    متاسفانه برخی از مرورگرها به خوبی از object-fit پشتیبانی نمی‌کنند. نگران نباشید، برای رفع این مشکل از جاوا اسکریپت کمک می‌گیریم. یک پلاگین جی کوئری ساده به نام jQuery Background Video وجود دارد که برای قراردادن ویدیو در بک گراند سایت است.

    در این پلاگین نیازی به استفاده از Css نمی باشد، فقط کافیست جی کوئری مورد نظر را در سایت خود قرار دهید.

    ۷) دیوایس‌های کاربران را در نظر بگیرید

    پس زمینه‌های ویدیویی اغلب مورد پسند کاربران قرار می‌گیرد. با این وجود ممکن است این ویدیوها روی برخی از دستگاه‌ها اجرا نشود. برای همین باید شرایطی را در نظر بگیریم که دستگاه‌های مختلف قادر به پخش ویدیوی شما باشند.

    معمولا طراحان، عکسی را به صورت پیش فرض در نظر می‌گیرند تا در صورتی که فیلم قابل نمایش نباشد برای کاربر نمایش داده شود.

    ۸) ویدیو در یک حلقه نشان داده نشود

    اگر ویژگی حلقه را در طراحی خود در نظر بگیرید، ویدیوی پس زمینه‌ی شما تا زمانی که صفحه را نبسته‌اید، پشت سر هم نمایش داده خواهد شد. این کار به سی پی یو دیوایس کاربر آسیب می‌زند و حتی ممکن است سرعت صفحات دیگر را پایین بیاورد.

    برای رفع این مشکل می‌توانید از یک قطعه کد کوتاه و ساده برای توقف ویدیو استفاده کنید. در واقع ویدیو بعد از چندین بار که نمایش داده می‌شود، متوقف می‌شود.

    ۹) یک دکمه مکث برای ویدیو در نظر بگیرید

    ممکن است کاربر بخواهد ویدیوی در حال پخش را متوقف کند. برای پشتیبانی از این حالت می‌توانید با استفاده از جاوا اسکریپت یک دکمه‌ی مکث / نمایش را به ویدیوی خود اضافه کنید و محل این دکمه را بر اساس خواست خود تغییر دهید.

    ۱۰) ابتدای فیلم را آهسته انتخاب کنید

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

    یک پوستر به بک گراند ویدیو اضافه کنید. شفافیت ویدیو را روی صفر تنظیم کنید. سپس با استفاده از خاصیت Transition در CSS شفافیت را روی یک تنظیم نمایید. در اینصورت ویدیو با صحنه‌ی آرامی شروع شده و دقت کاربر را از بین نمی‌برد.

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

    منبع: SitePoint

    اشتراک گذاری

    موضوعات مرتبط

    مرداد ۲۶, ۱۴۰۰

    طراحی سایت فروشگاهی یا اینستاگرام؟


    اطلاعات بیشتر
    طراحی سایت فروشگاهی

    طراحی سایت فروشگاهی

    مرداد ۶, ۱۴۰۰

    مزایای طراحی سایت فروشگاهی و نحوه سفارش طراحی فروشگاه اینترنتی


    اطلاعات بیشتر
    فروشگاه اینترنتی در اینستاگرام

    فروشگاه اینترنتی در اینستاگرام

    مرداد ۲, ۱۴۰۰

    راه اندازی فروشگاه اینترنتی در اینستاگرام


    اطلاعات بیشتر

    1 Comment

    1. طراحی سایت مشهد گفت:
      آبان ۱۳, ۱۳۹۵ در ۷:۳۵ ق.ظ

      مطالب مفیدی بود
      موفق باشید

      پاسخ

    پاسخی بگذارید لغو پاسخ

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

    جستجو کنید

    دسته بندی محتوایی

    • اخبار
    • تکنولوژی
    • دیجیتال مارکتینگ
    • سئو
    • طراحی سایت
    • گوناگون

    برچسب ها

    • E-Commerece
    • Market Place
    • search box
    • seo
    • smarty
    • آیفون
    • ابزارهای گوگل
    • ابلیکیشن مبایلی
    • اپلیکیشن
    • اپلیکیشن موبایلی
    • استارت آپ
    • استارت‌آپ
    • استراتژی محتوا
    • اسمارتی

    شرکت طراحی سایت آلماتک

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

    شرکت طراحی سایت آلماتک

    گروه نرم افزاری آلماتک

    گروه نرم افزاری آلماتک متعهد به ایجاد بالاترین کیفیت در روند تولید کارهای خود می‌باشد.

    برای انواع پروژه‌های طراحی سایت ، طراحی وب سایت فروشگاهی ، ساخت وب سایت خلاقانه و همه محصولاتی که در آلماتک انجام می‌دهیم انرژی و دقت فوق‌العاده‌ای صرف می‌کنیم.

    دسته بندی خدمات طراحی سایت

    را‌ه‌های ارتباطی

    آدرس: تهران، خیابان شادمهر، خیابان تیموری، نبش کوچه آرام، پلاک یک، طبقه سوم، واحد 20

    تلفن: ۰۲۱۶۶۰۰۰۴۳۹

    موبایل: ۰۹۱۲۸۱۳۹۰۶۰ / ۰۹۱۲۹۰۵۲۱۱۰

    ایمیل: info[@]almaatech.ir

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

    پیوندهای مفید

    • طراحی وب سایت حرفه ای
    • طراحی سایت فروشگاهی
    • بهینه سازی و سئو سایت
    • لیست امکانات طراحی سایت
    • برنامه نویسی اپلیکیشن موبایل
    logo-samandehi
    0