HTML - มัลติมีเดียแบบฝัง

บางครั้งคุณต้องเพิ่มเพลงหรือวิดีโอลงในหน้าเว็บของคุณ วิธีที่ง่ายที่สุดในการเพิ่มวิดีโอหรือเสียงในเว็บไซต์ของคุณคือการใส่แท็ก HTML พิเศษที่เรียกว่า<embed>. แท็กนี้ทำให้เบราว์เซอร์รวมตัวควบคุมสำหรับมัลติมีเดียที่เบราว์เซอร์ให้โดยอัตโนมัติรองรับแท็ก <embed> และประเภทสื่อ

คุณยังสามารถรวมไฟล์ <noembed>แท็กสำหรับเบราว์เซอร์ที่ไม่รู้จักแท็ก <embed> ตัวอย่างเช่นคุณสามารถใช้ <embed> เพื่อแสดงภาพยนตร์ที่คุณเลือกและ<noembed> เพื่อแสดงภาพ JPG ภาพเดียวหากเบราว์เซอร์ไม่รองรับแท็ก <embed>

ตัวอย่าง

นี่คือตัวอย่างง่ายๆในการเล่นไฟล์ midi แบบฝัง -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <embed src = "/html/yourfile.mid" width = "100%" height = "60" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

แอตทริบิวต์แท็ก <embed>

ต่อไปนี้เป็นรายการแอตทริบิวต์ที่สำคัญซึ่งสามารถใช้ได้กับแท็ก <embed>

Note− แอตทริบิวต์alignและautostart ที่เลิกใช้แล้วใน HTML5 อย่าใช้แอตทริบิวต์เหล่านี้

ซีเนียร์ No	คุณสมบัติและคำอธิบาย
1	align กำหนดวิธีการจัดแนววัตถุ มันสามารถกำหนดให้ศูนย์ทั้งทางซ้ายหรือขวา
2	autostart แอตทริบิวต์บูลีนนี้ระบุว่าสื่อควรเริ่มโดยอัตโนมัติหรือไม่ คุณสามารถตั้งค่าได้ว่าเป็นจริงหรือเท็จ
3	loop ระบุว่าควรเล่นเสียงอย่างต่อเนื่อง (ตั้งค่าลูปเป็นจริง) จำนวนครั้งที่แน่นอน (ค่าบวก) หรือไม่เลย (เท็จ)
4	playcount ระบุจำนวนครั้งในการเล่นเสียง นี่เป็นทางเลือกอื่นสำหรับการวนซ้ำหากคุณใช้ IE
5	hidden ระบุว่าควรแสดงอ็อบเจ็กต์มัลติมีเดียบนเพจหรือไม่ ค่าเท็จหมายถึงไม่ใช่และค่าจริงหมายถึงใช่
6	width ความกว้างของวัตถุเป็นพิกเซล
7	height ความสูงของวัตถุเป็นพิกเซล
8	name ชื่อที่ใช้อ้างอิงวัตถุ
9	src URL ของวัตถุที่จะฝัง
10	volume ควบคุมความดังของเสียง ได้ตั้งแต่ 0 (ปิด) ถึง 100 (ระดับเสียงเต็ม)

ประเภทวิดีโอที่รองรับ

คุณสามารถใช้สื่อประเภทต่างๆเช่นภาพยนตร์ Flash (.swf), AVI (.avi) และประเภทไฟล์ของ MOV (.mov) ภายในแท็กฝัง

.swf files - เป็นประเภทไฟล์ที่สร้างโดยโปรแกรม Flash ของ Macromedia
.wmv files - เป็นประเภทไฟล์ Media Video ของ Window ของ Microsoft
.mov files - เป็นรูปแบบ Quick Time Movie ของ Apple
.mpeg files - เป็นไฟล์ภาพยนตร์ที่สร้างโดยกลุ่มผู้เชี่ยวชาญด้านการเคลื่อนย้ายรูปภาพ

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>

   <body>
      <embed src = "/html/yourfile.swf" width = "200" height = "200" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

เสียงพื้นหลัง

คุณสามารถใช้ HTML <bgsound>แท็กเพื่อเล่นเพลงประกอบในพื้นหลังของหน้าเว็บของคุณ แท็กนี้ได้รับการสนับสนุนโดย Internet Explorer เท่านั้นและเบราว์เซอร์อื่น ๆ ส่วนใหญ่ไม่สนใจแท็กนี้ ดาวน์โหลดและเล่นไฟล์เสียงเมื่อผู้ใช้ดาวน์โหลดเอกสารโฮสต์เป็นครั้งแรกและแสดงขึ้น ไฟล์เสียงพื้นหลังจะเล่นซ้ำทุกครั้งที่ผู้ใช้รีเฟรชเบราว์เซอร์

Note- แท็ก bgsound เลิกใช้งานแล้วและควรจะลบออกใน HTML เวอร์ชันอนาคต ดังนั้นจึงไม่ควรใช้ แต่ขอแนะนำให้ใช้เสียงแท็ก HTML5 เพื่อเพิ่มเสียง แต่เพื่อจุดประสงค์ในการเรียนรู้บทนี้จะอธิบายรายละเอียดแท็ก bgsound

แท็กนี้จะมีเพียงสองคุณลักษณะห่วงและsrc คุณลักษณะทั้งสองนี้มีความหมายเหมือนกันตามที่อธิบายไว้ข้างต้น

นี่คือตัวอย่างง่ายๆในการเล่นไฟล์ midi ขนาดเล็ก -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <bgsound src = "/html/yourfile.mid">
         <noembed><img src = "yourimage.gif" ></noembed>
      </bgsound>
   </body>
	
</html>

ซึ่งจะทำให้หน้าจอว่างเปล่า แท็กนี้ไม่แสดงส่วนประกอบใด ๆ และยังคงซ่อนอยู่

Internet Explorer ยังสามารถจัดการไฟล์รูปแบบเสียงที่แตกต่างกันได้เพียงสามไฟล์ - wav ซึ่งเป็นรูปแบบดั้งเดิมสำหรับพีซี au ซึ่งเป็นรูปแบบดั้งเดิมสำหรับเวิร์กสเตชัน Unix ส่วนใหญ่ และ MIDI ซึ่งเป็นรูปแบบการเข้ารหัสเพลงสากล

แท็กวัตถุ HTML

HTML 4 แนะนำไฟล์ <object>องค์ประกอบซึ่งนำเสนอโซลูชันอเนกประสงค์สำหรับการรวมวัตถุทั่วไป <object> องค์ประกอบช่วยให้ผู้เขียน HTML ระบุทุกสิ่งที่ต้องการโดยออบเจ็กต์สำหรับการนำเสนอโดยตัวแทนผู้ใช้

นี่คือตัวอย่างบางส่วน -

ตัวอย่าง - 1

คุณสามารถฝังเอกสาร HTML ในเอกสาร HTML ได้ดังนี้ -

<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
   alt : <a href = "data/test.htm">test.htm</a>
</object>

นี่Altแอตทริบิวต์จะมาเป็นภาพหากเบราว์เซอร์ไม่สนับสนุนวัตถุแท็ก

ตัวอย่าง - 2

คุณสามารถฝังเอกสาร PDF ในเอกสาร HTML ได้ดังนี้ -

<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
   alt : <a href = "data/test.pdf">test.htm</a>
</object>

ตัวอย่าง - 3

คุณสามารถระบุพารามิเตอร์บางอย่างที่เกี่ยวข้องกับเอกสารด้วยไฟล์ <param>แท็ก นี่คือตัวอย่างการฝังไฟล์ wav -

<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
   <param name = "src" value = "data/test.wav">
   <param name = "autoplay" value = "false">
   <param name = "autoStart" value = "0">
   alt : <a href = "data/test.wav">test.wav</a>
</object>

ตัวอย่าง - 4

คุณสามารถเพิ่มเอกสารแฟลชได้ดังนี้ -

<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin" 
   codebase = "someplace/swflash.cab" width = "200" height = "300">
   
   <param name = "movie" value = "flash/penguin.swf" />
   <param name = "quality" value = "high" />
   <img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>

ตัวอย่าง - 5

คุณสามารถเพิ่ม java applet ลงในเอกสาร HTML ได้ดังนี้ -

<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" 
   width = "200" height = "200">
   <param name = "code" value = "applet.class">
</object>

classidแอตทริบิวต์ระบุเวอร์ชันของ Java Plug-in ที่จะใช้ คุณสามารถใช้แอตทริบิวต์codebaseทางเลือกเพื่อระบุว่าจะดาวน์โหลด JRE หรือไม่