พัฒนาเว็บไซต์ด้วย HTML5

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

ใน HTML5 แท็ก <embed> ใช้ในการฝังหรือแสดงเนื้อหาภายนอก เช่น ไฟล์วิดีโอ ไฟล์เสียง ไฟล์ PDF และแอปพลิเคชันที่สร้างจากปลั๊กอิน (เช่น Flash) ลงในหน้าเว็บ แท็กนี้เป็นแบบ self-closing (ไม่มีแท็กปิด) และมีแอตทริบิวต์หลักคือ src และ type ที่ใช้กำหนดแหล่งที่มาและประเภทของไฟล์ที่จะแสดง

การใช้งาน <embed> และตัวอย่าง

การฝังไฟล์ PDF

ใช้ฝังไฟล์ PDF เพื่อให้ผู้ใช้สามารถดูหรือดาวน์โหลดเอกสารได้

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ฝัง PDF ด้วย Embed</title>
</head>
<body>
    <h1>ตัวอย่างการฝัง PDF</h1>
    <embed src="document.pdf" type="application/pdf" width="600" height="500">
</body>
</html>

ในตัวอย่างนี้จะฝังไฟล์ PDF ชื่อ document.pdf ในหน้าเว็บ ซึ่งผู้ใช้สามารถเลื่อนอ่านเนื้อหาในเอกสารได้

การฝังไฟล์วิดีโอ

ใช้ฝังวิดีโอในรูปแบบไฟล์ต่างๆ เช่น MP4 หรือ OGV

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ฝังวิดีโอด้วย Embed</title>
</head>
<body>
    <h1>ตัวอย่างการฝังวิดีโอ MP4</h1>
    <embed src="video.mp4" type="video/mp4" width="640" height="360">
</body>
</html>

ตัวอย่างนี้แสดงวิดีโอจากไฟล์ video.mp4 ซึ่งจะแสดงในขนาด 640×360 พิกเซล

การฝังไฟล์เสียง

สามารถฝังไฟล์เสียง (เช่น MP3) เพื่อให้เล่นได้ในหน้าเว็บ

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ฝังเสียงด้วย Embed</title>
</head>
<body>
    <h1>ตัวอย่างการฝังเสียง MP3</h1>
    <embed src="audio.mp3" type="audio/mpeg" width="300" height="32">
</body>
</html>

ในตัวอย่างนี้จะฝังไฟล์ audio.mp3 ไว้ในหน้าเว็บ ซึ่งมีขนาด 300×32 พิกเซลสำหรับการแสดงตัวเล่นเสียง

การแสดงเนื้อหาภายนอกจาก URL

สามารถฝังหน้าเว็บหรือเนื้อหาภายนอกจาก URL ได้

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ฝังเนื้อหาภายนอกด้วย Embed</title>
</head>
<body>
    <h1>ตัวอย่างการฝังเนื้อหาภายนอกจาก URL</h1>
    <embed src="https://example.com" width="800" height="600">
</body>
</html>

ในตัวอย่างนี้จะฝังหน้าเว็บจาก https://example.com ลงในหน้าของเรา

สรุป

แท็ก <embed> ใน HTML5 ใช้สำหรับฝังเนื้อหาภายนอกเช่น วิดีโอ เสียง PDF หรือเนื้อหาอื่นๆ ที่อยู่ในรูปแบบไฟล์หรือจาก URL โดยข้อควรระวังคือบางไฟล์หรือปลั๊กอินอาจไม่รองรับในเบราว์เซอร์ที่ทันสมัย

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ