วิธีระบุวิธีโหลดสื่อ (Preload) สำหรับ Audio/Video ใน HTML

ใช้แอตทริบิวต์ preload เพื่อให้คำแนะนำเบราว์เซอร์ว่าควรโหลดสื่อ (Audio/Video) อย่างไรเมื่อโหลดหน้า เพื่อประสบการณ์ผู้ใช้ที่ดีที่สุด ทำงานกับ <audio> และ <video>

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ preload:

<!DOCTYPE HTML>
<html>
  <body>
    <video width="300" height="200" preload="none" controls>
      <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>
  </body>
</html>

ค่าของ preload

Preload vs Autoplay

การควบคุมด้วย JavaScript

<video id="myVideo" preload="metadata">
  <source src="video.mp4">
</video>

<script>
const video = document.getElementById('myVideo');

// ตรวจสอบสถานะโหลด
console.log(video.readyState); // 0=none, 1=metadata, 2=current, 3=future, 4=enough

// เปลี่ยน preload แบบไดนามิก
video.preload = 'auto'; // เริ่มโหลดเต็มที่

// Event เมื่อโหลด Metadata เสร็จ
video.addEventListener('loadedmetadata', () => {
  console.log('Duration:', video.duration);
  console.log('Dimensions:', video.videoWidth, 'x', video.videoHeight);
});

// Event เมื่อโหลดพอเล่นได้
video.addEventListener('canplay', () => {
  console.log('Can start playing');
});

// Event เมื่อโหลดพอเล่นจบโดยไม่หยุด
video.addEventListener('canplaythrough', () => {
  console.log('Can play through');
});
</script>

แนวทางปฏิบัติที่ดีที่สุด

• หน้าที่มีวิดีโอหลายตัว: ใช้ preload="none" หรือ "metadata" เพื่อประหยัด Bandwidth
• Hero Video (วิดีโอหลัก): ใช้ preload="auto" หรือ preload="metadata" + poster
• Mobile: ควรใช้ none หรือ metadata เสมอ (ประหยัด Data)
• Autoplay: ต้อง muted ไม่งั้นเบราว์เซอร์จะบล็อก

Poster Attribute (รูปปกขณะโหลด)

<video preload="metadata" poster="thumbnail.jpg" controls>
  <source src="video.mp4">
</video>