عناصر Media

آموزش جاوااسکریپت

مقدمه

عناصر <audio> و <video> در HTML5 به ما اجازه می‌دهند تا محتوای چندرسانه‌ای را به راحتی در صفحات وب قرار دهیم. این عناصر به خودی خود کنترل‌های پیش‌فرض مرورگر را نمایش می‌دهند، اما قدرت واقعی زمانی آشکار می‌شود که از HTMLMediaElement API برای ساخت کنترل‌های سفارشی و تعاملات پیشرفته با استفاده از جاوااسکریپت بهره ببریم. این API مجموعه‌ای غنی از پراپرتی‌ها، متدها و رویدادها را برای مدیریت کامل پخش صدا و تصویر فراهم می‌کند.

پراپرتی‌ها و متدهای اصلی

با انتخاب یک عنصر <audio> یا <video> در جاوااسکریپت، به مجموعه‌ای از ابزارها برای کنترل وضعیت آن دسترسی پیدا می‌کنیم.

پراپرتی‌های رایج

  • currentTime: موقعیت فعلی پخش را بر حسب ثانیه نشان می‌دهد. این پراپرتی هم قابل خواندن و هم قابل نوشتن است.
  • duration: کل مدت زمان مدیا را بر حسب ثانیه نشان می‌دهد. این پراپرتی فقط خواندنی است.
  • paused: یک مقدار بولی که اگر مدیا متوقف باشد true است.
  • ended: یک مقدار بولی که اگر پخش مدیا به پایان رسیده باشد true است.
  • volume: حجم صدا را بین ۰.۰ (بی‌صدا) و ۱.۰ (حداکثر) تنظیم می‌کند.
  • muted: یک مقدار بولی برای بی‌صدا کردن یا فعال کردن صدا.

متدهای اصلی

  • play(): پخش مدیا را شروع یا از سر می‌گیرد. این متد یک `Promise` برمی‌گرداند.
  • pause(): پخش مدیا را متوقف می‌کند.
  • load(): مدیا را مجدداً بارگذاری می‌کند. این متد زمانی مفید است که منبع (src) مدیا به صورت پویا تغییر کرده باشد.

به دلیل سیاست‌های مربوط به پخش خودکار (Autoplay Policies) در مرورگرهای مدرن، متد play() ممکن است با خطا مواجه شود (مثلاً اگر پخش بدون تعامل کاربر شروع شود). به همین دلیل، همیشه باید Promise بازگشتی آن را با try...catch یا .catch() مدیریت کرد.

رویدادهای Media

HTMLMediaElement API مجموعه‌ای از رویدادها را برای اطلاع‌رسانی از تغییرات وضعیت مدیا فراهم می‌کند. با گوش دادن به این رویدادها، می‌توانیم رابط کاربری خود را به صورت زنده به‌روزرسانی کنیم.

  • play: زمانی که پخش شروع یا از سر گرفته می‌شود.
  • pause: زمانی که پخش متوقف می‌شود.
  • ended: زمانی که پخش به پایان می‌رسد.
  • timeupdate: به طور مداوم در حین پخش اجرا می‌شود و نشان‌دهنده تغییر در currentTime است. این رویداد برای به‌روزرسانی نوار پیشرفت (progress bar) یا تایمر ایده‌آل است.
  • volumechange: زمانی که volume یا muted تغییر می‌کند.
  • loadedmetadata: زمانی که متادیتای مدیا (مانند duration) بارگذاری شده و در دسترس است.
Copy Icon JAVASCRIPT 
// HTML: <video id="my-video" src="..."></video>
//       <button id="play-pause">Play</button>
//       <div id="timer">0s / 0s</div>

const video = document.getElementById('my-video');
const playPauseBtn = document.getElementById('play-pause');
const timerDiv = document.getElementById('timer');

// Play/Pause functionality
playPauseBtn.addEventListener('click', () => {
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
});

// Update button text based on events
video.addEventListener('play', () => { playPauseBtn.textContent = 'Pause'; });
video.addEventListener('pause', () => { playPauseBtn.textContent = 'Play'; });

// Update timer display
video.addEventListener('timeupdate', () => {
    const current = Math.floor(video.currentTime);
    const duration = Math.floor(video.duration) || 0;
    timerDiv.textContent = `${current}s / ${duration}s`;
});

این مثال یک کنترلر ساده برای یک ویدئو را پیاده‌سازی می‌کند. دکمه، وضعیت پخش را کنترل کرده و متن آن بر اساس رویدادهای play و pause تغییر می‌کند. همچنین، با استفاده از رویداد timeupdate، یک نمایشگر زمان ساده به‌روزرسانی می‌شود.

در این درس با نحوه کنترل عناصر <audio> و <video> با استفاده از API قدرتمند HTMLMediaElement آشنا شدیم. این مهارت برای ساخت هر نوع تجربه‌ی رسانه‌ای سفارشی در وب ضروری است و به شما اجازه می‌دهد تا کنترل‌کننده‌های پخش کاملاً شخصی‌سازی‌شده بسازید. در درس بعدی، به سراغ `Notification API` خواهیم رفت و یاد می‌گیریم که چگونه از صفحات وب خود، اعلان‌های سیستمی (System Notifications) برای کاربر ارسال کنیم.