การดำเนินการสคริปต์เมื่อไฟล์พร้อมเล่น (Can Play) ใน HTML

ใช้แอตทริบิวต์ oncanplay เพื่อดำเนินการสคริปต์เมื่อไฟล์สื่อ (Audio/Video) พร้อมที่จะเริ่มเล่นได้ ทำงานกับ <audio>, <video>, <embed>, <object>

ตัวอย่าง

<!DOCTYPE HTML>
<html>
  <body>
    <video width="300" height="200" controls oncanplay="onCanPlay()">
      <source src="/html5/foo.ogg" type="video/ogg" />
      <source src="/html5/foo.mp4" type="video/mp4" />
      Your browser does not support the video element.
    </video>
    <script>
      function onCanPlay() {
        alert("I am ready to begin.");
        // หรือ console.log, update UI, enable buttons, etc.
      }
    </script>
  </body>
</html>

Media Events ลำดับการโหลด

1. loadstart - เริ่มโหลด
2. durationchange - รู้ Duration แล้ว
3. loadedmetadata - โหลด Metadata เสร็จ (Duration, Dimensions)
4. loadeddata - โหลด Frame แรกเสร็จ
5. canplay - พร้อมเล่นได้ (มีข้อมูลพอเล่นต่อเนื่องสั้นๆ)
6. canplaythrough - โหลดพอเล่นจบโดยไม่ต้องหยุด Buffer
7. playing - กำลังเล่นจริง

ความแตกต่าง: canplay vs canplaythrough

ตัวอย่าง: Custom Video Player Controls

<video id="player" src="video.mp4" preload="metadata"></video>
<div class="controls">
  <button id="playBtn" disabled>Play</button>
  <span id="duration">0:00</span>
</div>

<script>
const video = document.getElementById('player');
const playBtn = document.getElementById('playBtn');
const durationEl = document.getElementById('duration');

video.addEventListener('loadedmetadata', () => {
  durationEl.textContent = formatTime(video.duration);
});

video.addEventListener('canplay', () => {
  playBtn.disabled = false;
  playBtn.textContent = 'Play';
});

video.addEventListener('play', () => playBtn.textContent = 'Pause');
video.addEventListener('pause', () => playBtn.textContent = 'Play');
video.addEventListener('timeupdate', () => {
  // Update progress bar
});

playBtn.addEventListener('click', () => {
  video.paused ? video.play() : video.pause();
});

function formatTime(seconds) {
  const m = Math.floor(seconds / 60);
  const s = Math.floor(seconds % 60).toString().padStart(2, '0');
  return `${m}:${s}`;
}
</script>

Event Attributes อื่นๆ ของ Media