0

بلاگ

سایت اموزشی زرین لرنبلاگمقالاتHTML Multimedia

HTML Multimedia

12 تیر 1404
ارسال شده توسط
مقالات
27 بازدید

HTML Multimedia یعنی استفاده از عناصر و قابلیت‌های HTML برای اضافه کردن و پخش فایل‌های صوتی، ویدیویی، و سایر رسانه‌ها داخل صفحات وب. این امکان باعث می‌شود سایت‌ها جذاب‌تر و تعاملی‌تر شوند.

🔹 عناصر اصلی HTML برای چندرسانه‌ای (Multimedia)

1. عنصر <audio>

برای پخش فایل‌های صوتی استفاده می‌شود.

<audio controls>
<source src=“audio-file.mp3” type=“audio/mpeg”>
مرورگر شما از عنصر صوتی پشتیبانی نمی‌کند.
</audio>

  • controls باعث نمایش کنترل‌های پخش مثل پلی، توقف و تنظیم صدا می‌شود.

  • می‌توان چند منبع (format) مختلف گذاشت تا مرورگر بهترین را انتخاب کند.

2. عنصر <video>

برای پخش ویدیوها در صفحات وب است.

<video width=“320” height=“240” controls>
<source src=“video-file.mp4” type=“video/mp4”>
مرورگر شما از عنصر ویدیو پشتیبانی نمی‌کند.
</video>

  • width و height ابعاد نمایش ویدیو را مشخص می‌کند.

  • controls کنترل‌های پخش ویدیو را می‌آورد.

  • می‌توان چند منبع ویدیویی با فرمت‌های مختلف استفاده کرد.

3. عنصر <source>

برای معرفی چند منبع مختلف برای <audio> و <video> تا مرورگر بهترین را انتخاب کند.

4. عنصر <track>

برای اضافه کردن زیرنویس به ویدیو استفاده می‌شود.

<video width=“320” height=“240” controls>
<source src=“video-file.mp4” type=“video/mp4”>
<track src=“subtitles_en.vtt” kind=“subtitles” srclang=“en” label=“English”>
</video>

5. عنصر <embed>

برای جاسازی فایل‌های چندرسانه‌ای یا فلش (که الان کمتر استفاده می‌شود) یا محتواهای دیگر.

6. عنصر <iframe>

برای جاسازی ویدیو از سایت‌های دیگر مثل یوتیوب:

<iframe width=“560” height=“315” src=“https://www.youtube.com/embed/VIDEO_ID”
frameborder=“0” allowfullscreen></iframe>

🔹 ویژگی‌ها و تنظیمات مهم

  • autoplay : شروع خودکار پخش صدا یا ویدیو.

  • loop : تکرار پخش بی‌نهایت.

  • muted : پخش بدون صدا.

  • preload : بارگذاری پیش‌فرض رسانه (auto، metadata، none).

مثال کامل

<!DOCTYPE html>
<html>
<head>
  <title>مثال چندرسانه‌ای HTML</title>
</head>
<body>
<h2>پخش فایل صوتی</h2>
<audio controls>
  <source src=“music.mp3” type=“audio/mpeg”>
  مرورگر شما از صوت پشتیبانی نمی‌کند.
</audio>
<h2>پخش ویدیو با زیرنویس</h2>
<video width=“480” height=“270” controls>
  <source src=“movie.mp4” type=“video/mp4”>
  <track src=“subtitles.vtt” kind=“subtitles” srclang=“fa” label=“فارسی”>
  مرورگر شما از ویدیو پشتیبانی نمی‌کند.
</video>
</body>
</html>
برچسب ها:
در تلگرام
کانال ما را دنبال کنید!
Created by potrace 1.14, written by Peter Selinger 2001-2017
در آپارات
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید