HTML สกุล <source>

  • หน้าก่อนหน้า <small>
  • หน้าต่อไป <span>

คำนิยามและการใช้งาน

<source> แท็กซ์ต์อนุญาตให้กำหนดสมบัติสำหรับองค์ประกอบมีเดีย (เช่น <video>、<audio> และ <picture>）กำหนดแหล่งมีเดียหลายแหล่ง

<source> แท็กซ์ต์อนุญาตให้คุณกำหนดไฟล์วิดีโอ/ออดิโอ/ภาพที่มีอีกแหล่งที่มา โดยบราวเซอร์จะเลือกแหล่งที่มีการสนับสนุน <source>.

ดูเพิ่มเติมที่:

ตัวเรียน HTML:HTML วิดีโอ

ตัวเรียน HTML:HTML แสงเสียง

คู่มืออ้างอิง HTML DOM:โอบเจกต์ Source

ตัวอย่าง

ตัวอย่าง 1

นี่คือโปรแกรมเล่นเสียงที่มีไฟล์เสียงแหล่งที่มาสองเฟิสต์ บราวเซอร์จะเลือกแหล่งที่มีการสนับสนุน <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  เว็บเบราเซอร์ของคุณไม่สนับสนุนแท็กซ์ต์ออดิโอ
</audio>

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ใช้ใน <video> <source> เล่นวิดีโอ:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  เว็บเบราเซอร์ของคุณไม่สนับสนุนแท็กซ์ต์วิดีโอ
</video>

ทดลองด้วยตัวเอง

ตัวอย่าง 3

ใช้ใน <picture> <source> จัดให้มีภาพต่างๆตามความกว้างของมุมมอง

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

ทดลองด้วยตัวเอง

คุณสมบัติ

คุณสมบัติ ค่า บรรยาย
media คำถามเมดิยา ยอมรับคำถามเมดิ�าที่มีประสิทธิภาพทั้งหมด ซึ่งมักถูกกำหนดใน CSS
sizes กำหนดขนาดภาพสำหรับโครงสร้างหน้าเว็บต่างๆ
src URL

ใช้เพื่อกำหนด URL ของไฟล์มีเดีย

เมื่อ <source> ใช้กับ <audio> และ <video> นี้คือคุณสมบัติที่จำเป็น
srcset URL

ใช้เพื่อกำหนด URL ของรูปภาพที่ใช้ในสถานการณ์ต่าง ๆ

เมื่อ <source> ใช้กับ <picture> นี้ ตัวแปรนี้เป็นสิ่งที่จำเป็น
type รูปแบบ MIME กำหนดรูปแบบ MIME ของทรัพยากร

องค์ประกอบโลก

<source> แบบภาพยังสนับสนุน องค์ประกอบโลกใน HTML.

ตัวแปรเหตุ

<source> แบบภาพยังสนับสนุน ตัวแปรเหตุใน HTML.

การตั้งค่า CSS โดยเริ่มต้น

ไม่มี

การสนับสนุนโปรแกรมนี้

ตัวเลขในตารางนี้บอกเล่าถึงสีบรรดาที่สนับสนุนองค์ประกอบนี้ในรุ่นแรก

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5
  • หน้าก่อนหน้า <small>
  • หน้าต่อไป <span>