طراحی و بهینه سازیمشاهده

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumلوگو سایت تفریحی010xara_2009
iconforumسایت تفریحی تازه تاسیس بهار فان04xara_2009
iconforumتغییرات در وردپرس439H A S A N
iconforumکد جدول پخش هفتگی سریال ها1803Milad01
iconforumراه حل تازه فیس بوک برای مقابله با اخبار جعلی07AynaZ
iconforumدر مورد ریدایرکت 301778AynaZ
iconforumفروش اسکریپت آپلودبوی فارسی119AynaZ
iconforumاسکریپت ptciran440AynaZ
iconforumاسکرول در قالب های تک صفحه ای224AynaZ
iconforumکسب درآمد از اینترنت برای نمایندگان پرتال114AynaZ
iconforumدرباره منسوجات بی بافت19AynaZ
درگاه پرداخت
درگاه پرداخت

آموزش قرار دادن ویدیو در پس زمینه سایت

CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند
آموزش قرار دادن ویدیو در پس زمینه سایتReviewed by M.J on Jul 27Rating: 5.0آموزش قرار دادن ویدیو در پس زمینه سایتگذاشتن ویدیو به عنوان پس زمینه در سایت کاری که می خواهیم انجام دهیم این است که ویدیوی مورد نظرمان را به صورت فول اسکرین در پس زمینه ی سایت به نمایش بگذاریم. برای این کار از تگ ویدیو HTML5 استفاده خواهیم کرد

قرار دادن ویدیو در پس زمینه سایت

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

 

 

خوب اگر آماده باشید شروع می کنیم …
برای پیاده سازی آنچه در ادامه خواهیم آموخت، تقریبا به هیچ ابزار خاصی نیاز نیست. تنها چیزی که لازم داریم یک ویدیو با فرمت و حجم مناسب است. ما به این منظور از ویدیو های معروف Big Buck Bunny استفاده می کنیم. با کلیک بر روی اینجا، شما هم می توانید به این ویدیو ها دسترسی داشته باشید.

 

  • این آموزش تنها از طریق HTML5 و CSS پیاده سازی می شود.
  • ویدئو مناسبی را پیدا کنید و آن را در مسیر هاست خود آپلود نمائید.

 

توجه !!! هر بار بارگذاری یک ویدیو بر اساس حجم ویدیو، مقداری از ترافیک مجاز سایت شما کم خواهد کرد بنابراین شاید مایل باشید ویدیو را در محلی به غیر از هاست سایت خود میزبانی کنید؟!

حتما بخوانید  اسکریپت مدیریت کاربران CodeIgniter User Manager

 

گذاشتن ویدیو به عنوان پس زمینه در سایت
کاری که می خواهیم انجام دهیم این است که ویدیوی مورد نظرمان را به صورت فول اسکرین در پس زمینه ی سایت به نمایش بگذاریم. برای این کار از تگ ویدیو HTML5 استفاده خواهیم کرد :

 

 

در کد بالا ویدیوی مورد نظرمان را با سه فرمت webm, mp4 و ogv فراخوانی کرده ایم. استفاده از فرمت های مختلف جهت سازگاری با مرورگر های مختلف انجام شده. همانطور که در خط دوم کد مشاهده می کنید، ویدیو قرار است به صورت لوپ، به طور اتوماتیک و بدون صدا اجرا شود.
یکی از مواردی که در کد بالا درج شده و بهتر است راجع به آن صحبت کنیم، تصویر قرار گرفته به عنوان پوستر (poster) در خط دوم کد است. پوستر تصویری است که پیش از بارگذاری و شروع اجرای ویدیو برای کاربر به نمایش در خواهد آمد. بنابراین شاید بهتر باشد از این فرصت استفاده کنید و تصویری مناسب را به عنوان پوستر قرار دهید تا در صورتی که به هر دلیل (مثلا مشکل در اینترنت) ویدیو در مرورگر کاربری شروع به اجرا نکرد، تصویری که کاربر مشاهده میکند، مناسب و درخور محل استفاده ی ویدیو باشد و در تجربه ی کاربر از سایت شما تغییر محسوسی حاصل نشود. اگر خودتان برای poster تصویری تعیین نکنید، فریم اول ویدیو به عنوان پوستر به نمایش در خواهد آمد.

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

 

تا اینجا ویدیوی مورد نظر را در سایت قرار داده ایم اما در این حالت این ویدیو نه فول اسکرین است و نه حالت پس زمینه دارد. برای اجرای حالت مورد نظر و تبدیل ویدیو به پس زمینه ی سایت کافی است از کد CSS زیر استفاده کنید :

 

 

در تعریف استایل های بالا تقریبا هیچ نکته ی خاصی وجود ندارد بجز اینکه باید در نظر داشته باشید استایل های فوق با اینترنت اکسپلورر ۸ سازگار نیستند که البته به این جهت که اینترنت اکسپلورر ۸ از HTML5 هم پشتیبانی نمیکند. از طرف دیگر اگر به خطوط انتهایی استایل فوق توجه کنید خواهید دید که برای دیوایس های دارای عرض کمتر از ۷۶۸ پیکسل، ویدیو را مخفی کرده ایم و بجای آن تنها یک تصویر به نمایش میگذاریم. دلیل این مسئله این است که هنوز در بسیاری از موبایل ها، ویدئو ها به صورت اتوماتیک پخش نمیشوند و بجای پخش اتوماتیک، یک دکمه جهت پلی کردن ویدیو توسط خود کاربر به نمایش در می آید که این مسئله در نحوه ی نمایش سایت تاثیر منفی خواهد داشت. بنابراین ویدیو را مخفی می کنیم و بجای آن تنها یک تصویر به نمایش میگذاریم.

حتما بخوانید  نمایش مطالب مرتبط به صورت درون خطی در وردپرس

 

نکته : مخفی کردن ویدیو، تاثیری در بارگذاری یا عدم بارگذاری آن ندارد و به هر حال ویدیو توسط دیوایس مورد بحث دانلود خواهد شد.

 

شما یک ویدیوی فول اسکرین به عنوان پس زمینه در اختیار دارید. توجه داشته باشید که به این علت که z-index این ویدیو را معادل -۱۰۰ تعیین کرده ایم، هر عنصر دیگری که در سایت قرار بدهید، روی این ویدیو قرار خواهد گرفت. بنابراین مشکلی در اجرای هیچ یک از عناصر دیگر سایت بوجود نخواهد آمد.

 

نتیجه گیری :
افرادی که علاقه دارند در پس زمینه سایت خود بجای عکس یا رنگ از ویدئو استفاده نمایند می توانند آموزش بالا را با دقت دنبال کنید.  این نکته را درنظر داشته باشید که در بارگذاری ویدیو همیشه به سرعت اینترنت کاربر و حجم ویدیو فکر کنید و از بارگذاری فایل های حجیم به عنوان پس زمینه خودداری کنید تا کاربرانتان تجربه ای مناسب از به کار گیری سایت شما داشته باشد.


به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

خرید هاست حرفه ای سازگار با انواع اسکریپت همراه با نصب رایگان

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1395/05/6 0 CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند

لینک کوتاه مطلب : http://www.20script.ir/?p=21334

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
3,618جلوگیری از ورود کاربران با دسترسی مشترک به داشبورد وردپرس تاریخ : 1394/05/12
3,104دانلود صفحه زیبا به سبک مترو Metro UI تاریخ : 1394/08/22
2,367معرفی راحت وردپرس به گوگل وبمستر تاریخ : 1393/04/14
1,580نمایش آمار بازدید از مطالب بدون نیاز به افزونه تاریخ : 1393/05/11
1,229تغییر نحوه نمایش دیدگاه های مدیر در وردپرس تاریخ : 1395/01/17
4,214آموزش استفاده از Child Theme و کاربرد آن در وردپرس تاریخ : 1395/04/12
1,957کد جی کوری : تکه کدهای جی کوری مفیدی که باید یاد بگیرید! تاریخ : 1392/07/28
4,772اسکریپت ایجاد سایت موسیقی Ci Music Online تاریخ : 1393/08/24
1,661امکان انتخاب دسته بندی در فرم جستجو وردپرس تاریخ : 1394/05/15
5,125آموزش وردپرس افزودن ابزارک به قالب وردپرس تاریخ : 1393/12/3
3,291نمایش تاریخ آخرین آپدیت پست های وردپرس تاریخ : 1394/05/7
2,934اسکریپت مدیریت کاربران CodeIgniter User Manager تاریخ : 1393/08/9
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب