ใช้แอตทริบิวต์ src (source) เพื่อระบุ URL ของไฟล์สื่อ เช่น รูปภาพ เสียง วิดีโอ หรือสคริปต์ แอตทริบิวต์นี้ทำงานกับหลายแท็กที่เกี่ยวข้องกับสื่อ
แท็กที่รองรับแอตทริบิวต์ src
| แท็ก | ประเภทสื่อ | ตัวอย่าง |
|---|---|---|
<img> |
รูปภาพ | <img src="photo.jpg"> |
<video> |
วิดีโอ | <video src="movie.mp4"> |
<audio> |
เสียง | <audio src="sound.mp3"> |
<source> |
แหล่งสื่อหลายรูปแบบ | ใช้ภายใน video/audio |
<iframe> |
หน้าเว็บฝัง | <iframe src="page.html"> |
<embed> |
ปลั๊กอิน/เนื้อหาภายนอก | <embed src="flash.swf"> |
<script> |
JavaScript ไฟล์ | <script src="app.js"> |
<input type="image"> |
ปุ่มส่งแบบรูปภาพ | <input type="image" src="btn.png"> |
<track> |
ซับไตเติล/คำบรรยาย | <track src="sub.vtt"> |
ตัวอย่างการใช้งานกับ video (แนะนำใช้ source)
<!DOCTYPE HTML>
<html>
<body>
<video width="300" height="200" controls autoplay>
<source src="/media/video.webm" type="video/webm" />
<source src="/media/video.mp4" type="video/mp4" />
<source src="/media/video.ogg" type="video/ogg" />
เบราว์เซอร์ของคุณไม่รองรับแท็ก video
</video>
</body>
</html>แนวทางปฏิบัติที่ดีที่สุด
- ใช้ <source> หลายตัว ให้เบราว์เซอร์เลือกฟอร์แมตที่รองรับ
- ระบุ type attribute ช่วยให้เบราว์เซอร์ตัดสินใจเร็วขึ้นโดยไม่ต้องดาวน์โหลดบางส่วน
- ใช้ relative URL สำหรับไฟล์ในโดเมนเดียวกัน
- พิจารณา lazy loading เพิ่ม
loading="lazy"สำหรับ img/iframe - กำหนด width/height ป้องกัน layout shift
ข้อควรระวังด้านความปลอดภัย
- หลีกเลี่ยง mixed content (HTTP ในหน้า HTTPS)
- ใช้ CSP (Content Security Policy) จำกัดแหล่ง src ที่ไว้ใจได้
- ตรวจสอบไฟล์ที่อัปโหลดโดยผู้ใช้ก่อนให้บริการ
