آموزش قرار دادن ویدیو در پس زمینه سایت
در آموزش امروز در نظر داریم که در رابطه با قرار دادن ویدیو به عنوان بک گراند سایت با شما صحبت کنیم. احتمالا طی چند وقت اخیر محبوبیت قرار گیری ویدیو به عنوان پس زمینه (background) در سایت های مختلف، نظر شما را هم جلب کرده باشد. بنابراین اگر مایلید با نحوه قرار دادن یک ویدیو فول اسکرین به عنوان پس زمینه سایتتان آشنا شوید، آموزش امروز مسترکد مخصوص شماست. از شما دعوت میکنیم با ما در ادامه ی این آموزش همراه شوید.
مواد لازم!
برای پیاده سازی آنچه در ادامه خواهیم آموخت، تقریبا به هیچ ابزار خاصی نیاز نیست. تنها چیزی که واقعا لازم است، یک ویدیو با فرمت و حجم مناسب است. ما به این منظور از ویدیو های معروف Big Buck Bunny استفاده میکنیم. با کلیک بر روی اینجا، شما هم میتوانید به این ویدیو ها دسترسی داشته باشید.
بجز ویدیوی مورد نیاز، بقیه ی این آموزش تنها از طریق HTML5 و CSS پیاده سازی خواهد شد. بنابراین عملا تنها بخش مهم کار شما، پیدا کردن ویدیوی مناسب و آپلود آن در محلی مناسب جهت بارگذاری در سایتتان خواهد بود.
بدیهی است که هر بار بارگذاری یک ویدیو بر اساس حجم ویدیو، مقداری از ترافیک مجاز سایت شما کم خواهد کرد بنابراین شاید مایل باشید ویدیو را در محلی به غیر از هاست سایت خود میزبانی کنید؟!
گذاشتن ویدیو به عنوان پس زمینه در سایت
صدا … تصویر … حرکت!
کاری که میخواهیم انجام دهیم این است که ویدیوی مورد نظرمان را به صورت فول اسکرین در پس زمینه ی سایت به نمایش بگذاریم. برای این کار از تگ ویدیو HTML5 استفاده خواهیم کرد :
1 2 3 4 5 6 7 | <div class="fullscreen-bg"> <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video"> <source src="video/big_buck_bunny.webm" type="video/webm"> <source src="video/big_buck_bunny.mp4" type="video/mp4"> <source src="video/big_buck_bunny.ogv" type="video/ogg"> </video> </div> |
اجازه بدهید کمی در رابطه با کد بالا صحبت کنیم. در کد بالا ویدیوی مورد نظرمان را با سه فرمت webm, mp4 و ogv فراخوانی کرده ایم. استفاده از فرمت های مختلف جهت سازگاری با مرورگر های مختلف انجام شده. همانطور که در خط دوم کد مشاهده میکنید، ویدیو قرار است به صورت لوپ، به طور اتوماتیک و بدون صدا اجرا شود.
یکی از مواردی که در کد بالا درج شده و بهتر است راجع به آن صحبت کنیم، تصویر قرار گرفته به عنوان poster در خط دوم کد است. پوستر تصویری است که پیش از بارگذاری و شروع اجرای ویدیو برای کاربر به نمایش در خواهد آمد. بنابراین شاید بهتر باشد از این فرصت استفاده کنید و تصویری مناسب را به عنوان پوستر قرار دهید تا در صورتی که به هر دلیل (مثلا مشکل در اینترنت) ویدیو در مرورگر کاربری شروع به اجرا نکرد، تصویری که کاربر مشاهده میکند، مناسب و درخور محل استفاده ی ویدیو باشد و در تجربه ی کاربر از سایت شما تغییر محسوسی حاصل نشود. اگر خودتان برای poster تصویری تعیین نکنید، فریم اول ویدیو به عنوان پوستر به نمایش در خواهد آمد.
تا اینجا ویدیوی مورد نظر را در سایت قرار داده ایم اما در این حالت این ویدیو نه فول اسکرین است و نه حالت پس زمینه دارد. برای اجرای حالت مورد نظر و تبدیل ویدیو به پس زمینه ی سایت کافی است از کد CSS زیر استفاده کنید :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .fullscreen-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } .fullscreen-bg__video { position: absolute; top: 50%; left: 50%; width: auto; height: auto; min-width: 100%; min-height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 767px) { .fullscreen-bg { background: url('img/videoframe.jpg') center center / cover no-repeat; } .fullscreen-bg__video { display: none; } } |
در تعریف استایل های بالا تقریبا هیچ نکته ی خاصی وجود ندارد بجز اینکه باید در نظر داشته باشید استایل های فوق با اینترنت اکسپلورر 8 سازگار نیستند که البته به این جهت که اینترنت اکسپلورر 8 از HTML5 هم پشتیبانی نمیکند، این مسئله نباید زیاد برایمان مهم باشد. از طرف دیگر اگر به خطوط انتهایی استایل فوق توجه کنید خواهید دید که برای دیوایس های دارای عرض کمتر از 768 پیکسل، ویدیو را مخفی کرده ایم و بجای آن تنها یک تصویر به نمایش میگذاریم. دلیل این مسئله این است که هنوز در بسیاری از موبایل ها، ویدئو ها به صورت اتوماتیک پخش نمیشوند و بجای پخش اتوماتیک، یک دکمه جهت پلی کردن ویدیو توسط خود کاربر به نمایش در می آید که این مسئله در نحوه ی نمایش سایت تاثیر منفی خواهد داشت. بنابراین ویدیو را مخفی میکنیم و بجای آن تنها یک تصویر به نمایش میگذاریم. احتمالا لازم است به این نکته هم اشاره کنیم که مخفی کردن ویدیو، تاثیری در بارگذاری یا عدم بارگذاری آن ندارد و به هر حال ویدیو توسط دیوایس مورد بحث دانلود خواهد شد.
حالا که کار به پایان رسیده شما یک ویدیوی فول اسکرین به عنوان پس زمینه در اختیار دارید. توجه داشته باشید که به این علت که z-index این ویدیو را معادل -100 تعیین کرده ایم، هر عنصر دیگری که در سایت قرار بدهید، روی این ویدیو قرار خواهد گرفت. بنابراین مشکلی در اجرای هیچ یک از عناصر دیگر سایت بوجود نخواهد آمد.
و در پایان اینکه در بارگذاری ویدیو همیشه به سرعت اینترنت کاربر و حجم ویدیو فکر کنید و از بارگذاری فایل های حجیم به عنوان پس زمینه خودداری کنید تا کاربرانتان تجربه ای مناسب از به کار گیری سایت شما داشته باشند.
سلام
ممنون بابت مطلب مفیدتون
سوالی داشتم
چطوری میشه کاری کرد ویدیو در بالای سایت باشه
منظورم اینکه بشه تنها در هدر ازش استفاده کرد و با پایین اومدن اسکرول دیگه نشون داده نشه
مثلا به جای بنر هدر ویدیو باشه
باید محل کد های هدر رو در سایتتون پیدا کنید و کد ویدئو رو در محلی مناسب در قسمت مورد نظر قرار بدید. طبعا استایلش رو هم باید بر اساس چیزی که مد نظرتونه تغییر بدید.
متسافنه من هرچی سعی میکنم که روی این فیلم متنی به نمایش دربیاد هیجوری نمیشه
سلام . یک دایو زیر دایو مربوط به ویدئو باز کنین و به صورت relative قرارش بدین و بیارینش روی ویدو و نوشته هاتون رو توی این دایو قرار بدین . البته روش های دیگه ای هم میشه .
سلام
چطور میشه روی این فیلم یک هاله دودی رنگ قرار دهیم که فیلم واقعی رو نشون نده یک هاله روش باشه
و یا حتی یک عکس یا لوگو روی فیلم بزاریم
با تشکر
سلام
چطور میشود یک هاله یا سایه بر روی فیلم گذاشت تا فیلم واقعی پشت هاله نمایش داده شود
با تشکر
سلام
در لینک زیر روش های مختلفی برای انجام این کار قابل مشاهده ست :
http://stackoverflow.com/questions/16823636/overlaying-a-div-on-top-of-html-5-video
سلام چطوری یک عکس لینک دار را به مدت چند ثانیه در اول ویدیو قرار بدم اگه کد داره لطفا بفرستید
سلام
فکر میکنم برای تنظیم زمان نمایش و اینکه پس از مدتی این تصویر محو بشه و پخش ویدئو شروع بشه میبایست از جاوااسکریپت کمک بگیرید. متاسفانه در این زمینه کدی سراغ ندارم که خدمتتون ارائه کنم.
سلام دوست عزیز سرور شما روسیه هست چقدر با کیفیت پر سرعت خوب خواستم ببینم از کجا تهیه کردید؟
سلام
ما از سرویس های ونداهاست استفاده میکنیم. در لینک های موجود در منو میتونید به سرویس هاشون دسترسی داشته باشید.
سلام
ممنون بابت سایت خوبتون
فقط یه سوال داشتم اونم این که شما سه تا فرمت ویدیو فراخوانی کردیدمیخواستم بدونم هرسه فرمت ویدیو رو دارین یا نیازی نیستو با همین دادن فرمت ها سایت خودش فرمتو با این فرمتای تعریف شده قرار میده ؟
برای مثال من یه ویدیو با فرمت avi دارم و اونو میخوام مثل بالا در سایت قرار بدم ، خب برای اینکار باید ویدیو رو تبدیل فرمت کنم بعد فراخوانی کنم یا نیازی نیستو فقط در قسمت تایپ(type) فرمت مثلا mp4 رو بنویسم .
سلام
همونطور که توضیح دادیدم "استفاده از فرمت های مختلف جهت سازگاری با مرورگر های مختلف انجام شده"
توجه داشته باشید که فرمت ویدئوتون برای پخش در مرورگر نمیتونه avi باشه … باید از فرمت هایی که ذکر شده استفاده کنید.
سلام و خسته نباشید این کد ها را دقیقا کجای پیشخوان وردپرس بنویسم؟
سلام
این کد ها ارتباطی به خود وردپرس ندارن. در واقع این آموزش مربوط به html و css هست و اگر بخواید در وردپرس ازش استفاده کنید باید روی قالبتون پیاده سازیش کنید و در بخش های مربوطه در ساختار html و در استایل های css قالبتون ازش استفاده کنید.
سلام من میخوام ویدیو رو در بخش هدر سایت قرار بدم و منو و تیتر سایتم رو میخوام روی ویدیو بیارم ، ویدیو رو توی بخش هدر اوردم ولی منو و تیتر سایتم یا بالای ویدیو میرن یا پایینش. لطفا اگه میشه بگین چیکار کنم که منو و تیتر سایتم روی ویدیو بیان.
عالییی بود ولی اگه آموزش بقیه کد های فرونتدش(که کجا باید نوشته بشه)هم بگین دیگه بی نظیر ولی به هرحال ممنون خیلی خوب بود
سلام
مطلبی که گفتید(بارگزاری فیلم با چند پسوند) به نظرم کار درستی نیست
وسبب سنگین شدن حجم فایل می شه
با سلام.ببخشید می خواستم بدونم با چه کدی می توان یک صفحه ای داشت که به صورت خودکار آهنگ در آن صفحه پخش شود و کسی که دارد کار می کند نتواند آهنگ را قطع کند.ممنون می شوم بگویید باتشکر