آموزش اجرای فیلم در پس زمینه وب سایت توسط html5 و css3
شاید شما هم در برحی از وب سایت های خارجی و یا ایرانی دیده باشید که به جای درج عکس و یا رنگ در پس زمینه وب سایت , از یک ویدئو استفاده میکنند .
طبیعتا این کار به دلیل حجم بالای فیلم ها پیشنهاد نمیشود . اما میتونید از یک تکه فیلم قابل تکرار استفاده نمایید که هم دارای حجم کمتری خواهد بود و هم ما رو به هدفمان خواهند رساند .
برای این ساعت از سایت اسکریپت دات کام قصد دارم آموزش این کار را در اختیار شما عزیزان قرار دهم .
و اما آموزش :
برای این کار ابتدا باید کد زیر را در تگ داخل تگ body قرار دهید . (ترجیحا در ابتدای تگ باز شونده body )
<video autoplay loop id="vmsVideo"> <source src="آدرس فیلم.mp4" type="video/mp4"> </video>
توجه : حتما باید فیلم با پسوند mp4 باشد . ( به دلیل پشتیبانی تمامی مرورگر ها از این پسوند )
حال میبایست کد زیر را در css خود قرار دهید .
video#vmsVideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
دانلود فایل دموی آماده اجرای فیلم در پس زمینه وب سایت
آموزش : وحید مجیدی
پخش اختصاصی
سلام
فیلم پس زمینه با مرورگر کامپیوتر بدون مشکل اجرا میشه ولی با مرورگر کروم گوشی اجرا نشد. چجوری این مشکل میشه برطرف کرد؟
میشه دمو بدید
roimusic.ir
احتمالا مرورگرتون بروز نیست
چون من تست کردم و جواب داد
مرورگر کروم نسخه 52.0.2743.98
برای بنده هم همینه و توی گوشیم داره جواب میده
salam ino chejuri to ghalebe wp bezarim
توضیحاتتون کاملا واضح بود ممنون
سلام استاد
میشه توی وبلاگ هم استفاده کرد ؟
چجوری آدرس وبلاگ من بالا هست موردی نداره از چه وبلاگی استفاده میکنم ؟
چجوری و به جه ضورت ؟اگر برای من ایمیل کنید ممنون میشم
کمالی
دوست عزیزم من در وبلاگ اصلا کار نمیکنم اما فکر کنم بشه
ممنون مطلب مفیدی بود استفاده کردیم