آموزش تگ ویدئو Video در HTML سورس کد

آموزش تگ ویدئو Video در HTML سورس کد

در این پست سعی میکنیم آموزش استفاده از تگ ویدیو را برای شما توضیح دهیم.چطور میتوانید ویدیو خود را در سایت اجرا کند؟

خب همانطور که از اسم این تگ مشخص هست با استفاده از این تگ میتوانید یک ویدیو یا کلیپ و فیلم را در صفحه وب سایت خود قرار دهید.
در html5 تنها فرمت های MP4 و WebM و Ogg پشتیبانی می شود و قابل نمایش خواهد بود.
پس حتما توجه داشته باشید ویدیو شما با این فرمت در سایت قرار گیرد.

تنها فرمتی که توسط تمامی مرورگرها پشتیبانی می شود فرمت MP4 می باشد.

نام مرورگر MP4 WebM Ogg
Edge بله بله بله
Chrome بله بله بله
Firefox بله بله بله
Safari بله بله خیر
Opera بله بله بله

جدول نوع رسانه ویدئویی در HTML

فرمت فایل نوع رسانه
MP4 video/mp4
WebM video/webm
Ogg video/ogg


تگ Video ( تگ ویدئو )
این تگ یک نوع تگ فرزند دار است و برای آدرس دادن سورس فیلم از تگ Source داخل تگ ویدئو استفاده می کنیم . تگ Video دارای شناسه های مختلفی است که در ادمه آن ها را مشاهده خواهید کرد :

شناسه Controls :
با استفاده از این شناسه در تگ ویدئو می توان در هنگام پخش فیلم ابزار کنترلی رو فعال کرد ابزارهایی مانند کم و زیاد کردن صدا ، مدت زمان فیلم ، دکمه پخش و … اگر از این شناسه استفاده نکنید این ابزار فعال نحواهد شد .

شناسه autoplay :
این در تگ ویدئو شناسه باعث می شود که در هنگام لود شدن صفحه فیلم به صورت خودکار پخش شود .

شناسه Width و Height :
برای اینکه اندازه فیلم رو تعیین کنیم از این شناسه ها استفاده می کنیم و طول و عرض فیلم را مشخص می کنیم .

شناسه muted :
اگر از این شناسه در تگ video استفاده بکنید فیلم رو بصورت mute در می آورد یا این شناسه فیلم رو به صورت حالت بی صدا در می آورد .

شناسه Poster :
با استفاد از این شناسه می توانیم یک عکس را به عنوان پوستر قبل از پخش شدن فیلم انتخاب کنیم .

 

<html>
	<head>
		<title>newwebdesign</title>
	</head>
	<body>
		<video width="600px" height="600px"  controls  autoplay  muted  poster="image.jpg">
			<source src="video.mp4" type="video/mp4" />
			<source src="video.ogg" type="video/ogg"  />
		</video>
	</body>
</html>

" به کسب و کار شما، رونق میبخشیم "

نیووب با در اختیار داشتن آخرین متدهای روز دنیا و تجربیات ارزنده تیم های تحلیل و آنالیز، برنامه نویسی ، گرافیک و بهینه سازی وب سایت، مشاوری کارآمد و پشتیبان در کنار شماست.

" جدید ترین مطالب طراحی سایت "

جدیدترین صفحاتی که به سایت نیووب اضافه شده است.

" به کسب و کار شما، رونق میبخشیم "

نیووب با در اختیار داشتن آخرین متدهای روز دنیا و تجربیات ارزنده تیم های تحلیل و آنالیز، برنامه نویسی ، گرافیک و بهینه سازی وب سایت، مشاوری کارآمد و پشتیبان در کنار شماست.

" تعدادی از مشتریانی که به نیووب، اعتماد کرده اند "

در طول فعالیت بیش از 17 ساله نیووب، تعداد زیادی از شرکت ها و سازمان ها به نیووب اعتماد کرده اند، از اعتماد شما سپاسگزاریم



شرکت نفت پارس



پالایشگاه گاز فجر جم



بیمارستان تخصصی مداین



بیمارستان بینا



بیمارستان پارس



انجمن کنترل عفونت ایران



انجمن نمایشگاه های ایران



بیمارستان مفرح



شهرداری رشت



شواری اسلامی شهر رشت



مجموعه فرش کیوان



شرکت فرگاز



شرکت روناک پروتیین



شرکت نالینو



هلدینگ لمزی



شهرداری گلستان



شهرداری املش



شهرداری نصیرشهر

برای مشاوره طراحی سایت
اطلاع از قیمت های طراحی و بهینه سازی وب سایت
اطلاع از زمان بندی اجرای پروژه، با ما تماس بگیرید

×

ارتباط ازطریق پیام‌رسان واتس‌اپ
× پشتیبانی فروش آنلاین واتس‌اپ