ویدئو بک گراند در طراحی وب سایت
در سالهای اخیر استفاده از پس زمینه های ویدیویی در طراحی وب رشد چشمگیری داشته است. بیشتر طراحان از ویدئو بک گراند در طراحی سایت برای کنترل عواطف و احساسات کاربران استفاده میکنند و اغلب در کار خود موفق میشوند.
بیشتر شدن سرعت اینترنت، بهتر شدن کدکهای پخش فایلهای ویدیویی و پشتیبانی مروگرها از ویدیو HTML5 نیز باعث شده تا این نوع از محتوا بیشتر مورد توجه کاربران قرار گیرد.
با این وجود استفاده نابجا از پس زمینههای ویدیویی نیز باعث به وجود آمدن برخی نتایج منفی خواهد شد. مثلا ممکن است سرعت بارگذاری صفحات سایت کم شود.
اما چگونه میتوانیم از پس زمینههای ویدیویی برای بهتر شدن کیفیت سایت خود استفاده کنیم؟
در ادامه ۱۰ نکته کاربردی درباره استفاده از ویدئو بک گراند در طراحی سایت را بیان می نماییم. با طراحی وب سایت آلماتک همراه باشید.
زیاد بودن حجم ویدیوی پس زمینه، زمان بارگذاری سایت را بالا میبرد. برای جلوگیری از این مشکل باید ویدیو را با پایین ترین نرخ بیت فشردهسازی کنید. البته میتوانید از ویدیو های با کیفیت تری نیز استفاده نمایید. ولی نباید سرعت بارگذاری صفحه را قربانی کیفیت ویدیو کنید.
شرایط مورد نظر خود را به خوبی بسنجید و بهترین فیلم را انتخاب نمایید. در انتخاب حجم ویدیو سرعت اینترنت کاربران را نیز در نظر بگیرید.
ممکن است برای بالا بردن سرعت بارگذاری سایت خود از یک ویدیوی با کیفیت پایین استفاده کرده باشید. در اینصورت از یک overlay برای پنهان کردن کیفیت پایین آن استفاده نمایید.
ویدئو بک گراند در طراحی سایت
برای اینکار باید یک div بعد از تعیین ویدیوی خود بیاورید یا این که از شبه کلاس ::after
استفاده کنید. با استفاده از خاصیت pointer-events: none;
اطمینان حاصل کنید که ویدیو با کلیک راست کاربر متوقف نمیشود. استفاده از یک Overlay مناسب باعث میشود تا کیفیت پایین ویدیو دیده نشود.
طول ویدیو را کم انتخاب کنید تا بدون توقف نمایش داده شود. البته طول ویدیو نباید به اندازهای کم باشد که پشت سرهم نمایش داده شده و کاربر را اذیت کند.
بهتر است مدت زمان ویدیوی شما بین ۳۰ تا ۴۰ ثانیه باشد. سعی کنید سایز ویدیو نیز از ۲ مگابایت بیشتر نباشد. میتوانید ویدیو های جالبی را از سایت html5backgroundvideo برای این منظور انتخاب کنید.
همانطور که از نام ویدیوهای پس زمینه بر میآید، این ویدیوها باید در پس زمینهی سایت اجرا شوند. به این معنی که ویدیوی انتخابی شما نباید به گونهای باشد که توجه کاربر را از محتوای اصلی سایت دور کند. حرکتهای سریع و پرشهای مداوم توجه کاربر را به خود جلب میکند.
ویدئو بک گراند در طراحی وب سایت
اگر قرار است روی ویدیوی پس زمینه متنی نمایش داده شود، باید قابل خواندن باشد. میتوانید با استفاده از یک لایهی overlay متن را متمایز کنید. یا اینکه رنگ متن را تغییر دهید تا قابل خواندن باشد. مطمئن شوید که متن و ویدیو خیلی با هم متضاد نباشد و چشم کاربر را اذیت نکند.
در CSS3 ویژگی به نام ظرفیت پس زمینه برای تصاویر مطرح میشود که برای ویدیو ها نیز صادق است. به این معنی که سایز یک تصویر یا ویدیوی پسزمینه باید به اندازهای باشد که جایگاه خود را پر کند.
خاصیت object-fit
همین کار را برای شما انجام خواهد داد. با استفاده از این خاصیت میتوانید مطمئن شوید که ابعاد ویدیو با ابعاد محلی که قرار است در آن قرار بگیرد، همخوانی دارد.
متاسفانه برخی از مرورگرها به خوبی از object-fit
پشتیبانی نمیکنند. نگران نباشید، برای رفع این مشکل از جاوا اسکریپت کمک میگیریم. یک پلاگین جی کوئری ساده به نام jQuery Background Video وجود دارد که برای قراردادن ویدیو در بک گراند سایت است.
در این پلاگین نیازی به استفاده از Css نمی باشد، فقط کافیست جی کوئری مورد نظر را در سایت خود قرار دهید.
پس زمینههای ویدیویی اغلب مورد پسند کاربران قرار میگیرد. با این وجود ممکن است این ویدیوها روی برخی از دستگاهها اجرا نشود. برای همین باید شرایطی را در نظر بگیریم که دستگاههای مختلف قادر به پخش ویدیوی شما باشند.
معمولا طراحان، عکسی را به صورت پیش فرض در نظر میگیرند تا در صورتی که فیلم قابل نمایش نباشد برای کاربر نمایش داده شود.
اگر ویژگی حلقه را در طراحی خود در نظر بگیرید، ویدیوی پس زمینهی شما تا زمانی که صفحه را نبستهاید، پشت سر هم نمایش داده خواهد شد. این کار به سی پی یو دیوایس کاربر آسیب میزند و حتی ممکن است سرعت صفحات دیگر را پایین بیاورد.
برای رفع این مشکل میتوانید از یک قطعه کد کوتاه و ساده برای توقف ویدیو استفاده کنید. در واقع ویدیو بعد از چندین بار که نمایش داده میشود، متوقف میشود.
ممکن است کاربر بخواهد ویدیوی در حال پخش را متوقف کند. برای پشتیبانی از این حالت میتوانید با استفاده از جاوا اسکریپت یک دکمهی مکث / نمایش را به ویدیوی خود اضافه کنید و محل این دکمه را بر اساس خواست خود تغییر دهید.
ویدیو باید به گونهای باشد که حواس کاربر را پرت نکند. یک حرکت ناگهانی در ابتدای نمایش فیلم باعث میشود تا کاربر محتوای اصلی سایت را نبیند! برای جلوگیری از این مشکل میتوانید ویدیویی انتخاب کنید که شروع آرامی داشته باشد یا اینکه از تکنیک محو شدن برای ابتدای فیلم استفاده کنید.
یک پوستر به بک گراند ویدیو اضافه کنید. شفافیت ویدیو را روی صفر تنظیم کنید. سپس با استفاده از خاصیت Transition در CSS شفافیت را روی یک تنظیم نمایید. در اینصورت ویدیو با صحنهی آرامی شروع شده و دقت کاربر را از بین نمیبرد.
برای پایان فیلم نیز میتوانید همین عملیات را به صورت عکس اجرا کنید.
منبع: SitePoint
1 Comment
مطالب مفیدی بود
موفق باشید