تگ video در html | گذاشتن ویدیو در html
توی این جلسه از دوره آموزش رایگان html در 3 ساعت به مبحث گذاشتن ویدیو در html میپردازیم. اول اهمیت ویدیو توی وبسایت هارو درک میکنیم، بعد یاد میگیریم که از تگ video در html استفاده کنیم. و بعد با اتریبیوت هایی مثل src، controls، autoplay و loop آشنا میشیم. در آخر هم برای یادگیری بهتر یه تمرین براتون قرار داده شده.
ویدیو ها در HTML
توی html ویدیو ها اهمیت خیلی بالایی دارن. توی خیلی از وبسایت ها از ویدیو استفاده میشه، حتی بعضی سایت ها مثل یوتیوب یا آپارات تمام محتواشون ویدیوئه. پس شما باید به عنوان یه طراح سایت باید بلد باشید به سایتها ویدیو اضافه کنید. ویدیو ها روی سئو و رتبه بندی سایت هم تاثیر زیادی دارن و میتونن سایتتون رو به رتبههای بالاتر گوگل ببرن. این مبحث مهم در html با تگ video انجام میشه.
تگ video در HTML
برای گذاشتن ویدیو در html باید از تگ video استفاده کنیم. این تگ، یه تگ سادهس و شما با نوشتن حالت باز و بسته اون و نوشتن چند تا اتریبیوت میتونین به سایتتون ویدیو اضافه کنید. نحوه نوشتن تگ video به این صورته:
<video src=""></video>
منابع رایگان برای پیدا کردن ویدیو
خیلی مهمه که ویدیو ها یا عکسهایی که توی سایت میزاریم، کپی رایت نداشته باشن. محتوایی که کپی رایت داره روی سئو سایت شما تاثیر منفی میزاره. سایت های مثل pexels یا unsplash ویدیو ها و عکس هایی دارن که کپی رایت نداره میتونین توی سایتتون ازش استفاده کنید. اما اگر میتونید بهتره که خودتون ویدیو های مخصوص سایتتون رو بسازید.
اتریبیوت src
این اتریبیوت کارش مشخص کردن آدرس ویدیومونه. پس این اتریبیوت اجباریه و باید توی تمام تگ های video باشه. آدرس دهی در اینجا به دو حالت مطلق و نسبی انجام میشه. اگه با آدرس دهی مطلق و نسبی آشنایی ندارید، میتونید جلسه آموزش لینک ها در html رو ببینید، اونجا کامل توضیحشون دادیم.
توی مثال زیر میتونید نوشتن src با آدرس دهی نسبی رو ببینید:
<video src="./video.mp4"></video>
اتریبیوت controls
اگه کد بالا رو اجرا کنید میبینید که ویدیو play نمیشه و فقط مثل یه عکس دیده میشه. با نوشتن اتریبیوت controls میتونیم دکمه هایی مثل pause و play و download و… رو برای کاربر قرار بدیم. تکه کد زیر یه مثال از این اتریبیوت رو نشون میده:
<video src="./video.mp4" controls></video>
البته بعدا با یادگیری جاوااسکریپت میتونید این دکمه هارو شخصی سازی کنید.
اتریبیوت autoplay
این اتریبیوت برای زمانیه که شما میخواید ویدیو خودش اجرا بشه. اگه این اتریبیوت رو بنویسید با لود شدن صفحه ویدیو اجرا میشه. این اتریبیوت کاربرد های مختلفی داره؛ مثلا بعضی وقتا میخواید بکگراند متحرک برای یه بخش از سایتتون بزارید، برای این کار باید اتریبیوت autoplay رو بنویسید. تکه کد زیر یه مثال از همین کاره:
<video src="./video.mp4" autoplay></video>
تکرار کردن ویدیو در html
کد بالا برای مثالی که گفتیم کامل نیست. اگه ما یه ویدیو 5 ثانیه ای برای بک گراند داشته باشیم، بعد از 5 ثانیه ویدیو تموم میشه و دیگه بک گراندمون دیگه متحرک نیست، اما اگه به تگ video اتریبیوت loop اضافه کنیم ویدیومون بعد از تموم شدن دوباره از اول اجرا میشه. تکه کد زیر یه نمونه کامل از مثال بالاس.
<video src="./video.mp4" autoplay loop></video>
تمرین این قسمت
یه فایل html باز کنید و داخلش دوتا ویدیو قرار بدید. یه ویدیوی کوتاه که اتریبیوت autoplay و loop داره و یه ویدیو بلند که اتریبیوت controls داره.
نکته:
- میتونید ویدیو رو از سایت هایی که بالاتر گفته شد دانلود کنید.
- اگه ابعاد ویدیو بزرگ بود و حالت خوبی نداشت، توی ویدیوی بالای صفحه یه تکه کد css گفته شده که میتونید از اون استفاده کنید.
- سعی کنید توی صفحه تون از بقیه تگ های html مثل تگ p هم استفاده کنید.
حالا که به پایان این جلسه رسیدید و تمرین رو هم انجام دادید، میشه گفت که به طور کامل به تگ video در html مسلط شدید و با مبحث گذاشتن ویدیو در html آشنایی کامل دارید. اگه هرجایی از این جلسه به مشکل خوردید میتونید توی کامنت ها سوالتون رو بپرسید. جلسه بعدی این دوره درباره موسیقی ها و فایل های صوتیه. میتونید از لینک زیر این جلسه رو مشاهده کنید.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.