home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แอตทริบิวต์ loop: ทำให้วิดีโอ/เสียงเล่นวนลูปใน HTML

แอตทริบิวต์ loop (Boolean Attribute) ใช้ใน <video> และ <audio> เพื่อทำให้สื่อเล่นซ้ำวนลูปอัตโนมัติเมื่อจบสิ้นสุด

ตัวอย่างการใช้งาน

<!DOCTYPE HTML>
<html>
<body>
    <video width="300" height="200" controls loop>
        <source src="/html5/foo.ogg" type="video/ogg" />
        <source src="/html5/foo.mp4" type="video/mp4" />
        เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบ video
    </video>
    
    <br><br>
    
    <audio controls loop>
        <source src="/html5/audio.ogg" type="audio/ogg" />
        <source src="/html5/audio.mp3" type="audio/mpeg" />
    </audio>
</body>
</html>

พฤติกรรม Loop

  • วิดีโอ/เสียงจบ → กลับไปที่ 0:00 → เล่นใหม่ทันที
  • ไม่มีช่วงหยุดพักระหว่างรอบ (Seamless Loop)
  • เหตุการณ์ onended จะยิง ทุกรอบ ที่จบ
  • ผู้ใช้สามารถ Pause/Seek ได้ปกติ

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

const video = document.querySelector('video');

// Toggle Loop
function toggleLoop() {
    video.loop = !video.loop;
    console.log('Loop:', video.loop);
}

// Loop เฉพาะช่วง (Segment Loop)
let loopStart = 10; // วินาที
let loopEnd = 30;

video.addEventListener('timeupdate', () => {
    if (video.loop && video.currentTime >= loopEnd) {
        video.currentTime = loopStart;
    }
});

กรณีการใช้งาน (Use Cases)

  • Background Video / Hero Banner (Muted + Autoplay + Loop)
  • GIF Replacement: วิดีโอสั้น Loop แทน GIF (ขนาดเล็กกว่า, ควบคุมได้)
  • Ambient Audio: เสียงพื้นหลัง (Rain, Cafe, White Noise)
  • Demo/Showcase: สินค้า/ฟีเจอร์วนลูป
  • Kiosk/Display: เนื้อหาโชว์เคสต่อเนื่อง

แนวทางปฏิบัติที่ดีสำหรับ Background Video

<video 
    autoplay 
    muted 
    loop 
    playsinline 
    poster="poster.jpg"
    preload="metadata"
    style="width: 100%; height: 100%; object-fit: cover;">
    <source src="bg.webm" type="video/webm">
    <source src="bg.mp4" type="video/mp4">
</video>
  • muted + autoplay = เริ่มเล่นอัตโนมัติได้ (Browser Policy)
  • playsinline = ไม่บังคับ Fullscreen บน iOS
  • preload="metadata" = โหลด Metadata เท่านั้น ประหยัด Bandwidth
  • poster = รูปภาพรอโหลด/Error Fallback