HTML5 ভিডিওর ডিউরেশন (Duration) পাওয়ার সমস্যা এবং সমাধান

সমস্যা: video.duration শুরুর দিকে NaN রিটার্ন করে

ভিডিওর মেটাডেটা লোড হওয়ার আগে duration প্রপার্টি উপলব্ধ নয়। readyState প্রপার্টি দিয়ে মেটাডেটা লোড হওয়ার অপেক্ষা করতে হয়।

ReadyState মানগুলো

• 0 = HAVE_NOTHING
• 1 = HAVE_METADATA (ডিউরেশন এখন পাওয়া যাবে)
• 2 = HAVE_CURRENT_DATA
• 3 = HAVE_FUTURE_DATA
• 4 = HAVE_ENOUGH_DATA

সমাধান: loadedmetadata ইভেন্ট বা পোলিং

মেথড ১: ইভেন্ট লিসেনার (সুপারিশকৃত)

const video = document.querySelector('video');
const timer = setInterval(() => {
  if (video.readyState >= 1) { // HAVE_METADATA
    const duration = Math.round(video.duration);
    document.getElementById('duration').textContent = duration + 's';
    clearInterval(timer);
  }
}, 1000);

টিপ: loadedmetadata ইভেন্ট সব ব্রাউজারেই নিশ্চিতভাবেই ফায়ার হয়। পোলিং এড়িয়ে ইভেন্ট-ভিত্তিক পদ্ধতি ব্যবহার করুন।