HTML <translation>แท็ก
ตัวอย่าง
เครื่องเล่นเสียงที่มีไฟล์ต้นฉบับสองไฟล์ เบราว์เซอร์จะเลือก <source> ตัวแรกที่รองรับ:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
แท็ ก<source>นี้ใช้เพื่อระบุทรัพยากรสื่อหลายรายการสำหรับองค์ประกอบสื่อ เช่น
<video> , <audio>และ<picture >
แท็ ก<source>ช่วยให้คุณระบุไฟล์วิดีโอ/เสียง/รูปภาพสำรองซึ่งเบราว์เซอร์อาจเลือกได้ โดยขึ้นอยู่กับการรองรับเบราว์เซอร์หรือความกว้างของวิวพอร์ต เบราว์เซอร์จะเลือกอันแรก<source>
ที่รองรับ
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนองค์ประกอบอย่างสมบูรณ์
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
คุณลักษณะ
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| type | MIME-type | Specifies the MIME-type of the resource |
คุณสมบัติสากล
แท็ ก<source>ยังสนับสนุน Global Attributes ในHTML
คุณสมบัติของเหตุการณ์
แท็ ก<source>ยังสนับสนุนแอตทริบิวต์เหตุการณ์ใน HTML
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ใช้ <source> ภายใน <video> เพื่อเล่นวิดีโอ:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
ตัวอย่าง
ใช้ <source> ภายใน <picture> เพื่อกำหนดรูปภาพต่างๆ ตามความกว้างของวิวพอร์ต:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
หน้าที่เกี่ยวข้อง
กวดวิชา HTML: HTML วิดีโอ
กวดวิชา HTML: HTML Audio
การอ้างอิง HTML DOM: Source Object
การตั้งค่า CSS เริ่มต้น
ไม่มี.