การสร้างแหล่งสื่อ (Media Resources) สำหรับองค์ประกอบ audio และ video ใน HTML5

แท็ก <source> ใน HTML ใช้สำหรับกำหนดทรัพยากรสื่อมัลติมีเดียสำหรับองค์ประกอบ <audio> และ <video> เบราว์เซอร์สามารถเลือกแหล่งที่มาตามประเภทสื่อและการรองรับโค덱ได้

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อสร้างแหล่งสื่อสำหรับองค์ประกอบ media ใน HTML5:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML source Tag</title>
  </head>
  <body>
    <audio controls>
      <source src="yourfile.mp3" type="audio/mpeg">
      <source src="yourfile.ogg" type="audio/ogg">
      <p>Your browser does not support the audio element.</p>
    </audio>
    
    <video controls width="320" height="240">
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.webm" type="video/webm">
      <p>Your browser does not support the video element.</p>
    </video>
  </body>
</html>

แอตทริบิวต์ของแท็ก <source>

ประเภทสื่อของทรัพยากร (MIME type) เช่น video/mp4, audio/mpeg

แอตทริบิวต์	ค่า	คำอธิบาย
`media`	media_query	กำหนดประเภทของทรัพยากรสื่อ (เช่น `screen and (min-width: 600px)`)
`src`	URL	URL ของไฟล์สื่อ (จำเป็น)
`type`	media_type

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

ระบุหลายรูปแบบไฟล์: ใส่ <source> หลายตัวด้วยรูปแบบต่างกัน เพื่อความเข้ากันได้กับเบราว์เซอร์ต่างๆ
ระบุ MIME type: ควรระบุแอตทริบิวต์ type เสมอ เพื่อช่วยให้เบราว์เซอร์ตัดสินใจเร็วขึ้นว่าเล่นได้หรือไม่
ลำดับสำคัญ: ใส่รูปแบบที่ต้องการให้เล่นก่อนหน้าสุด (เช่น MP4 ก่อน WebM)
Fallback: ใส่ข้อความหรือลิงก์ดาวน์โหลดไว้ภายใน <video>/<audio> สำหรับเบราว์เซอร์เก่าที่ไม่รองรับ

รูปแบบไฟล์ที่นิยมและรองรับกว้างขวาง

Video: MP4 (H.264) - รองรับทุกเบราว์เซอร์หลัก, WebM (VP8/VP9) - ทันสมัย, Ogg (Theora) - เก่า
Audio: MP3 - รองรับทุกที่, AAC - คุณภาพดีกว่า, Ogg Vorbis - เปิด/ฟรี, WebM/Opus - ทันสมัย