home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แท็ก HTML <embed>: ฝังแอปพลิเคชัน/เนื้อหาภายนอก

แท็ก <embed> ใน HTML คืออะไร?

แท็ก <embed> ใช้สำห ฝังแอปพลิเคชันหรือเนื้อหาภายนอก (External Content) ลงในหน้า HTML** เช่น Flash (SWF), PDF, Video, Audio, SVG, 3D Models เป็นต้น เป็น Void Element (ไม่มีแท็กปิด)

แอตทริบิวต์หลัก

แอตทริบิวต์คำอธิบาย
srcURL ของไฟล์ที่จะฝัง (Required)
typeMIME Type ของไฟล์ (เช่น application/pdf, video/mp4)
widthความกว้างในพิกเซล
heightความสูงในพิกเซล

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <h2>แอปพลิเคชันสาธิต CSS</h2>
  <embed src="https://www.example.com/flex/samples/CSSApplication.swf" 
         width="600" height="400" 
         type="application/x-shockwave-flash">
</body>
</html>

ผลลัพธ์

แสดงแอปพลิเคชัน Flash (SWF) ขนาด 600x400 พิกเซล

<embed> vs <object> vs <iframe>

แท็กวัตถุประสงค์FallbackHTML5
<embed>ฝัง Plugin/External Content (Simple)ไม่มีรองรับ
<object>ฝัง Object พร้อม Fallback & Paramsมี (Child Content)รองรับ
<iframe>ฝังหน้าเว็บอีกหน้า (Browsing Context)ไม่มีรองรับ
<video>/<audio>ฝัง Media Native (HTML5)มี (Source + Text)แนะนำสำหรับ Media
<img>ฝังรูปภาพalt textแนะนำสำหรับ Images

MIME Types พบบ่อยสำหรับ embed

  • application/x-shockwave-flash - Flash (SWF) **Deprecated**
  • application/pdf - PDF
  • video/mp4, video/webm - Video
  • audio/mpeg, audio/ogg - Audio
  • image/svg+xml - SVG
  • model/gltf-binary - 3D Model (glTF)

จุดสำคัญ

  • <embed> ไม่มี Fallback Content ใช้ <object> ถ้าต้องการ Fallback
  • Flash Player จบชีวิต 2020 ไม่ควรใช้ SWF ใหม่
  • สำหรับ Video/Audio ใช้ <video>, <audio> Native HTML5
  • type attribute ช่วยเบราวเซอร์เลือก Plugin/Handler ที่เหมาะสม
  • Security: ใส่ sandbox บน iframe แทน embed สำหรับ Untrusted Content