วิธีตั้งค่ารูปภาพแสดงขณะโหลดวิดีโอ (Poster) ใน HTML

ใช้แอตทริบิวต์ poster ใน HTML เพื่อตั้งค่ารูปภาพที่จะแสดงขณะที่วิดีโอ กำลังโหลด หรือก่อนที่ผู้ใช้กดเล่น

ตัวอย่าง

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

<!DOCTYPE HTML>
<html>
  <body>
    <video width="300" height="200" 
           poster="https://example.com/thumbnail.jpg" 
           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>

การทำงานของ Poster

• แสดงรูปภาพทันทีที่โหลดหน้า (ก่อนโหลดวิดีโอ)
• แสดงระหว่างโหลด Metadata/Video
• ซ่อนเมื่อวิดีโอเริ่มเล่น
• แสดงอีกครั้งเมื่อวิดีโอจบ (ถ้าไม่มี loop)
• ไม่ส่งผลต่อ Bandwidth มาก (แค่รูปภาพ)

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

<video 
  width="640" height="360"
  poster="poster.jpg"           <!-- Poster image -->
  preload="metadata"            <!-- โหลด metadata + poster -->
  controls
  playsinline                   <!-- iOS inline playback -->
>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track kind="subtitles" src="sub.vtt" srclang="en" label="English">
</video>

Poster Image Guidelines

• Aspect Ratio: ตรงกับวิดีโอ (16:9, 4:3, 1:1)
• Size: ไม่เกิน 100-200KB (WebP/AVIF แนะนำ)
• Content: Frame ที่น่าสนใจ/บอกเนื้อหา + Play button overlay (Optional)
• Responsive: ใช้ image-set() หรือ <picture> สำหรับหลายขนาด (Advanced)

Responsive Poster (Advanced)

<video controls>
  <source src="video.mp4" type="video/mp4">
  <!-- Poster responsive with image-set (CSS) -->
  <style>
    video::-webkit-media-controls-poster {
      background-image: image-set(
        url("poster-320.jpg") 1x,
        url("poster-640.jpg") 2x
      );
    }
  </style>
</video>

JavaScript: เปลี่ยน Poster แบบไดนามิก

<video id="myVideo" src="video.mp4" controls></video>

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

// เปลี่ยน Poster
video.poster = 'new-poster.jpg';

// ลบ Poster
video.removeAttribute('poster');
// หรือ
video.poster = '';
</script>

กรณีไม่มี Poster

• เบราว์เซอร์จะแสดง frame แรกของวิดีโอ (ต้องโหลดบ้าง)
• หรือแสดงโปรแกรมเล่นสีดำพร้อมไอคอน Play
• ใช้ preload="none" โดยไม่มี Poster = ประหยัด Bandwidth สุดๆ แต่ UX แย่

สรุป: ควรใส่ poster เสมอสำหรับวิดีโอที่ไม่ได้ Autoplay เพื่อ UX ที่ดีและประหยัด Bandwidth