HTML5 การใช้งาน source Tag

<source> Tag ใน HTML5 ใช้เพื่อระบุแหล่งข้อมูลที่หลากหลายให้กับองค์ประกอบสื่อ เช่น <video>, <audio>, และ <picture> ซึ่งจะช่วยให้เบราว์เซอร์สามารถเลือกใช้ไฟล์ที่เหมาะสมที่สุดตามรูปแบบไฟล์ (file format) หรือเงื่อนไขต่างๆ ที่กำหนดไว้ เช่น ความกว้างของหน้าจอ ความละเอียดของอุปกรณ์ เป็นต้น

การใช้งาน <source> Tag ในแต่ละบริบท

สำหรับ <video> ใช้เพื่อระบุแหล่งที่มาของไฟล์วิดีโอในรูปแบบต่าง ๆ เช่น MP4, WebM, หรือ Ogg เพื่อให้เบราว์เซอร์เลือกไฟล์ที่รองรับได้ดีที่สุด

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

สำหรับ <audio> ใช้เพื่อระบุแหล่งที่มาของไฟล์เสียงในรูปแบบต่าง ๆ เช่น MP3, Ogg, หรือ WAV

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.wav" type="audio/wav">
  Your browser does not support the audio tag.
</audio>

สำหรับ <picture> ใช้ร่วมกับ <img> เพื่อแสดงภาพที่เหมาะสมกับเงื่อนไขต่าง ๆ เช่น ความละเอียดของหน้าจอหรือความกว้างของหน้าจอ (viewport width)

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Image description">
</picture>

การตั้งค่าอื่น ๆ นอกเหนือจากการระบุ src และ type แล้ว <source> ยังสามารถระบุคุณสมบัติอื่นๆ ได้ เช่น media และ srcset เพื่อช่วยให้เลือกไฟล์ที่เหมาะสมตามเงื่อนไขที่ต้องการ

ตัวอย่าง: การใช้ media เพื่อเลือกแหล่งข้อมูลตามขนาดหน้าจอ

<video controls>
  <source src="high-res.mp4" media="(min-width: 800px)" type="video/mp4">
  <source src="low-res.mp4" media="(max-width: 799px)" type="video/mp4">
  Your browser does not support the video tag.
</video>

สรุป

• <source> ใช้เพื่อระบุแหล่งข้อมูลหลายรูปแบบที่ใช้กับ <video>, <audio>, และ <picture>
• ช่วยให้เบราว์เซอร์เลือกไฟล์ที่เหมาะสมที่สุดตามรูปแบบไฟล์หรือเงื่อนไขต่างๆ
• ช่วยปรับปรุงประสิทธิภาพและประสบการณ์ผู้ใช้ในหลากหลายอุปกรณ์