แอตทริบิวต์ controls: แสดงควบคุมเล่นวิดีโอ/เสียงใน HTML

แอตทริบิวต์ controls (Boolean Attribute) ใช้ในแท็ก <video> และ <audio> เพื่อแสดง UI ควบคุมการเล่นมาตรฐานของเบราว์เซอร์ (Play/Pause, Volume, Seek bar, Fullscreen, Playback rate, Captions, etc.)

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

<!DOCTYPE html>
<html>
<head>
    <title>ตัวอย่าง HTML video Tag</title>
</head>
<body>
    <p>คอมไพเลอร์ออนไลน์</p>
    <br>
    <video width="500" height="300" controls>
        <source src="/html/compileonline.mp4" type="video/mp4">
        เบราว์เซอร์นี้ไม่รองรับแท็ก video
    </video>
</body>
</html>

ควบคุมมาตรฐานที่แสดง (Browser Default)

• ▶ Play / ⏸ Pause
• 🔊 Volume slider + Mute
• ⏪⏩ Seek bar / Timeline
• ⛶ Fullscreen
• ⚙ Playback speed (บางเบราว์เซอร์)
• 📝 Captions/Subtitles (ถ้ามี <track>)
• 📥 Download (บางเบราว์เซอร์)
• 🎨 Picture-in-Picture (Chrome/Edge)

แอตทริบิวต์เสริมที่ใช้ร่วมกันบ่อย

Custom Controls (สร้าง UI เอง)

หากต้องการ UI เฉพาะตัว ให้ ไม่ใส่ controls และใช้ JavaScript ควบคุมผ่าน Media API:

<video id="myVideo" src="video.mp4"></video>
<button onclick="myVideo.play()">Play</button>
<button onclick="myVideo.pause()">Pause</button>
<input type="range" min="0" max="1" step="0.1" value="1" oninput="myVideo.volume=this.value">