ورود ثبت نام
تگ ویدئو ( Video ) در HTML به صورت فیلم آموزشی و سورس کد
» طراحی سایت » آموزش HTML » تگ ویدئو ( Video ) در HTML به صورت فیلم آموزشی و سورس کد
9648 بازدید

تگ ویدئو ( 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 را می توانید از اینجا دانلود بکنبد .

رضا طوماری

دیدگاه



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

  1. aria گفت:

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

    • رضا طوماری گفت:

      سلام
      کل کدهارو سلکت بکنید و کنترل + شیفت سمت چپ رو بزنید شاید از بخاطر اینه که باید چپ چین بکنید .
      اگر درست نشد مشکلش رو کامل بگید تا راهنمایتون بکنم

  2. امیر گفت:

    من با این آموزش شما یه فایل ویدیو داخل سایت قرار دادم
    این ویدیو رو PC درست لود میشه ولی رو گوشی اندازش بزرگ تر از صفحه است
    مثل سایت شما درست نیست
    ابعاد : 600 در 375
    لطفاً بگید چطور ابعاد داخل گوشی رو جداگانه تنظیم کنم
    ممنون

    • رضا طوماری گفت:

      سلام برای ابعاد گوشی از این کد استفاده بکنید و ابعاد مورد نظر خودتون رو جای width و height قرار بدید :
      @media screen and (max-width: 992px) {
      video {
      width: 300px ; height:400px; }
      }