دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش HTML » تگ ویدئو ( Video ) در HTML به صورت فیلم آموزشی و سورس کد
تگ ویدئو ( Video ) در HTML به صورت فیلم آموزشی و سورس کد

تگ ویدئو ( Video ) در HTML به صورت فیلم آموزشی و سورس کد

در این قسمت از فیلم آموزش HTML  نحوه بارگذاری یا پخش فایل های ویدیویی ( تگ ویدئو ) در صفحات وب آموزش داده شده است که فیلم آموزش نحوه قرار دادن فیلم در html  را می توانید در ادامه مشاهده بفرمایید :

در ادامه این پست شما می توانید بصورت متنی نحوه استفاده از تگ video را مشاهده بکنید و یاد بگیرید .

قبل از HTML 5 از تگ های object و embed برای نمایش فایل های ویدیویی استفاده می شود ولی در HTML 5 از تگ ویدئو استقاده می کنیم . در سورس زیر نحوه استفاده از تگ های object و embed را می توانید مشاهده بفرمایید .

<html>
	<head>
		<title>Web30ty</title>
	</head>
	<body>
		<object data="film.mp4" />
		<embed src="movie.mp4" />
	</body>
</html>

تگ Video ( تگ ویدئو )

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

شناسه Controls :

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

شناسه autoplay :

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

شناسه Width و Height :

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

شناسه muted :

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

شناسه Poster :

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

شناسه های Loop  و Preload را هم در پست قبلی آموزش دادم .

سورس کد HTML :

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

فیلم آموزش تگ ویدئو در HTML را می توانید از اینجا دانلود بکنبد .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *