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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

منبع: SitePoint