چند‌رسانه‌ای در HTML

چند‌رسانه‌ای در HTML به کارگیری انواع مختلف رسانه‌ها مانند تصاویر، صدا، ویدیو و عناصر تعاملی در صفحات وب است که تجربه کاربری را بهبود می‌بخشد و محتوا را جذاب‌تر می‌کند. HTML5 چندین عنصر بومی برای ادغام آسان‌تر چندرسانه‌ای معرفی کرده است، به‌طوری‌که نیازی به استفاده از پلاگین‌های اضافی نباشد. در اینجا مروری بر عناصر اصلی چندرسانه‌ای در HTML آورده شده است:

۱. تصاویر

• <img>: برای درج تصویر استفاده می‌شود.

<“img src=“image.jpg” alt=“A description of the image” width=“300” height=“200>

• ویژگی‌های کلیدی:
  • src: مسیر فایل تصویر.
  • alt: متن توضیحی برای دسترسی‌پذیری.
  • width و height: تنظیم ابعاد نمایش.

۲. صدا

• <audio>: برای افزودن فایل صوتی مانند موسیقی یا فایل‌های صوتی دیگر.

  <audio controls>

  <“source src=“audio.mp3” type=“audio/mpeg>

  Your browser does not support the audio element.

  <audio/>

• ویژگی‌های کلیدی:
  • controls: نمایش کنترل‌هایی مانند پخش، توقف، و تنظیم صدا.
  • autoplay، loop، muted: تنظیمات مختلف برای پخش.
• فرمت‌های رایج: MP3، Ogg، WAV.

۳. ویدیو

• <video>: برای افزودن ویدیو.

  <“video controls width=“600>

  <“source src=“video.mp4” type=“video/mp4>

  Your browser does not support the video element.

  <video/>

• ویژگی‌های کلیدی:
  • controls، autoplay، loop، muted: تنظیمات پخش.
  • poster: تصویر پیش‌نمایش قبل از شروع پخش.
• فرمت‌های رایج: MP4، WebM، Ogg.

۴. محتوای جاسازی‌شده (iframe)

• <iframe>: برای جاسازی محتوای خارجی، مانند ویدیوهای یوتیوب یا نقشه‌های گوگل.

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

• ویژگی‌های کلیدی:
  • src: آدرس URL محتوای جاسازی‌شده.
  • width و height: تنظیم ابعاد قاب.
  • allowfullscreen: اجازه نمایش تمام‌صفحه.

۵. بوم (Canvas)

• <canvas>: فضایی برای ترسیم که با استفاده از JavaScript می‌توان گرافیک ایجاد کرد.

  <canvas id=“myCanvas” width=“200” height=“200”></canvas>

  <script>

  ;const canvas = document.getElementById(‘myCanvas’)

  ;const ctx = canvas.getContext(‘2d’)

  ;“ctx.fillStyle = “blue          

  ;ctx.fillRect(10, 10, 100, 100)

  <script/>

• برای گرافیک، انیمیشن و تجسم داده‌ها استفاده می‌شود.

۶. گرافیک برداری مقیاس‌پذیر (SVG)

• <svg>: برای درج تصاویر برداری که با تغییر اندازه، کیفیت خود را از دست نمی‌دهند.

  <“svg width=“100” height=“100>

  </“circle cx=“50” cy=“50” r=“40” stroke=“black” stroke-width=“3” fill=“green>

  <svg/>