สื่อ: audio, video, figure และ figcaption

ฝังเสียง วิดีโอ และภาพประกอบที่มีคำบรรยาย โดยไม่ต้องใช้ปลั๊กอินใดๆ

8 นาที · 3 คำถาม

HTML เล่นเสียงและวิดีโอได้โดยตรง: ไม่ต้องใช้โปรแกรมเล่นภายนอก กรณีใช้งานจริง: ตอนพอดแคสต์บนบล็อก การสาธิตสินค้าบนหน้าแลนดิ้ง หรือบทเรียนที่ฝังอยู่ในเอกสาร มาดูวิธีทำอย่างถูกต้องกัน

<video controls width="640" poster="preview.jpg">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">
  <track src="subs-fr.vtt" kind="subtitles"
         srclang="fr" label="French" default>
  Your browser doesn't support HTML5 video.
</video>

สามข้อสรุปเชิงมืออาชีพ เอลิเมนต์ source จะถูกลอง ตามลำดับ: เบราว์เซอร์จะเล่นตัวแรกที่มันถอดรหัสได้ แอตทริบิวต์ poster แสดงภาพแทนที่ก่อนเริ่มเล่น สุดท้าย track เพิ่มคำบรรยายในรูปแบบ WebVTT: จำเป็นต่อการเข้าถึง และเป็นที่ชื่นชอบมากสำหรับการดูแบบไม่มีเสียง

<audio controls preload="metadata">
  <source src="podcast-ep12.mp3" type="audio/mpeg">
  <a href="podcast-ep12.mp3">Download the episode</a>
</audio>

เพื่อประกอบเนื้อหา figure จับคู่เอลิเมนต์สื่อเข้ากับคำบรรยายของมันผ่าน figcaption และไม่ใช่แค่รูปภาพเท่านั้น: แผนภูมิ ชิ้นส่วนโค้ด หรือคำคม ก็เป็นตัวเลือกที่ดีเช่นกัน คำบรรยายถูกเชื่อมกับ figure แบบ เชิงโปรแกรม (programmatically) ซึ่งเป็นสิ่งที่ย่อหน้าธรรมดาใต้รูปภาพให้ไม่ได้

<figure>
  <img src="chart-sales.png"
       alt="Sales up 12% in Q2 2026">
  <figcaption>
    Sales trend, second quarter of 2026.
  </figcaption>
</figure>

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. ทำไมจึงวางเอลิเมนต์ source หลายตัวไว้ในแท็ก video?
   • เพื่อเล่นวิดีโอทั้งหมดต่อเนื่องกันไป
   • เพื่อให้เบราว์เซอร์เลือกรูปแบบแรกที่มันเล่นเป็น
   • เพื่อเร่งการดาวน์โหลดแบบขนาน
2. แอตทริบิวต์ใดที่แสดงปุ่มเล่น หยุดชั่วคราว และปรับเสียงบนโปรแกรมเล่นวิดีโอ?
   • controls
   • poster
   • preload
   • muted
3. บทบาทของ figcaption คืออะไร?
   • แทนที่แอตทริบิวต์ alt ของรูปภาพ
   • ให้คำบรรยายที่มองเห็นได้ เชื่อมโยงเชิงความหมายกับ figure ของมัน
   • แสดงคำแนะนำเมื่อวางเมาส์เหนือรูปภาพ