24 tut
مرجع درسی دانش‌پژوهان برنامه‌نویسی

آموزش HTML - ویدئو

عنصر <video> در HTML یک ویدئو را در صفحه وب جاسازی می‌کند و نمایش می‌دهد. با استفاده از عنصر <video> می‌توانید هر نوع محتوای ویدئویی را در صفحه وب قرار دهید.

عنصر <video> در HTML

از عنصر <video> برای فراهم کردن امکان پخش ویدئو در یک صفحه وب استفاده می‌شود. عملکرد آن بسیار شبیه به عنصر <img> است؛ زیرا در این عنصر نیز باید مسیر یا نشانی اینترنتی ویدئو را درون ویژگی src قرار دهید. HTML فقط از قالب‌های ویدئویی MP4، WebM و Ogg پشتیبانی می‌کند. عنصر <video> از صدا نیز پشتیبانی می‌کند؛ بااین‌حال، عنصر <audio> برای این منظور مناسب‌تر است.

جاسازی ویدئوها در HTML

برای جاسازی یک ویدئو در صفحه وب، باید ویژگی src را درون تگ <video> تنظیم کنید تا مسیر یا نشانی اینترنتی ویدئو مشخص شود. یک صفحه وب محتوا را در اختیار کاربران مختلفی قرار می‌دهد که از مرورگرهای گوناگون استفاده می‌کنند. همان‌طور که پیش‌تر گفته شد، هر مرورگر از قالب‌های ویدئویی متفاوتی مانند MP4، WebM و Ogg پشتیبانی می‌کند. بنابراین، می‌توانیم با قرار دادن چندین تگ <source>، تمام قالب‌های پشتیبانی‌شده توسط HTML را ارائه دهیم و اجازه دهیم مرورگر مناسب‌ترین قالب را برای پخش ویدئو انتخاب کند.

نحو

در ادامه، نحو جاسازی یک ویدئو در صفحه وب را مشاهده می‌کنید:

<video width="640" height="360" controls>
  <source src="video-file.mp4" type="video/mp4">
  <source src="video-file.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

ویژگی controls

در صورت نیاز، می‌توانید با استفاده از ویژگی controls، کنترل‌های داخلی مربوط به پخش صدا و ویدئو را نیز برای کاربران فعال کنید. این ویژگی رابطی فراهم می‌کند که به کاربران امکان می‌دهد عملکردهای پخش ویدئو، مانند تنظیم میزان صدا، جابه‌جایی در ویدئو به جلو و عقب و پخش یا توقف آن را مدیریت کنند.

مثالی برای جاسازی ویدئو

مثال زیر نشان می‌دهد که چگونه مسیر یا نشانی اینترنتی یک ویدئو را درون عنصر ویدئو قرار دهید:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>
<body>
   <p>Playing video using video element</p>
   <p>The browser is responsible for determining the appropriate format to use.</p>
   <video width="450" height="250" controls>
      <source src="/html/media/video/sampleTP.webm" type="video/webm">
      <source src="/html/media/video/sampleTP.mp4" type="video/mp4">
      <source src="/html/media/video/sampleTP.ogv" type="video/ogg">
      <p>Sorry, video element is not supported!</p>
   </video>
</body>
</html>

تنظیم اندازه نمایش ویدئو

برای تعیین یا تنظیم ابعاد ناحیه نمایش ویدئو که با نام درگاه نمایش (Viewport) نیز شناخته می‌شود، می‌توانید از ویژگی‌های height و width در عنصر <video> استفاده کنید. این ویژگی‌ها ارتفاع و عرض درگاه نمایش ویدئو را برحسب پیکسل مشخص می‌کنند.

توجه داشته باشید که ویدئو نسبت تصویر خود (برای مثال، 4:3 و 16:9) را با توجه به ارتفاع و عرض تعیین‌شده تنظیم می‌کند. بنابراین، برای فراهم کردن تجربه کاربری بهتر، توصیه می‌شود ابعاد درگاه نمایش با ابعاد ویدئو مطابقت داشته باشد.

مثال

برای درک بهتر، به کد نمونه زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>
<body>
   <p>Playing video using video element</p>
   <video width="450" height="250" controls>
      <source src="/html/media/video/sampleTP.mp4" type="video/mp4">
   </video>
</body>
</html>

ویژگی‌های autoplay و loop در ویدئوی HTML

می‌توانید با استفاده از ویژگی‌های autoplay و loop، ویدئو را طوری تنظیم کنید که به‌صورت خودکار پخش شود و پخش آن به‌طور پیوسته تکرار شود.

به خاطر داشته باشید که برخی مرورگرها، مانند Chrome 70.0، از قابلیت پخش خودکار پشتیبانی نمی‌کنند، مگر اینکه از ویژگی muted استفاده شود. بنابراین، توصیه می‌شود ویژگی‌های autoplay و muted را هم‌زمان به کار ببرید.

مثال

مثال زیر نحوه پخش خودکار و تکرار ویدئو را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>
<body>
   <p>Playing video using video element</p>
   <video width="450" height="250" autoplay muted loop>
      <source src="/html/media/video/sampleTP.mp4" type="video/mp4">
   </video>
</body>
</html>

تنظیم تصویر بندانگشتی ویدئو

می‌توانید نشانی اینترنتی تصویری را که به‌عنوان تصویر بندانگشتی ویدئو استفاده می‌شود، در ویژگی poster عنصر <video> قرار دهید. این تصویر تا زمانی که پخش ویدئو آغاز شود، نمایش داده خواهد شد.

مثال

در مثال زیر، نحوه استفاده از ویژگی poster را نشان می‌دهیم:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>
<body>
   <p>Playing video using video element</p>
   <video width="450" height="250" controls muted poster ="tutorials_point.jpg" >
      <source src="/html/media/video/sampleTP.mp4" type="video/mp4">
   </video>
</body>
</html>

پشتیبانی مرورگرها از قالب‌های مختلف ویدئویی

جدول زیر قالب‌های ویدئویی مختلفی را نشان می‌دهد که مرورگرهای گوناگون از آن‌ها پشتیبانی می‌کنند:

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

پیشرفت مطالعه: وضعیت خوانده‌شدن این درس فقط در همین مرورگر ذخیره می‌شود؛ بدون نیاز به حساب کاربری.

درس قبلی: ویژگی‌های ورودی درس بعدی: پخش‌کننده صوتی