คอร์ส IT พื้นฐาน HTML 014_มัลติมีเดียและเนื้อหาฝังตัว

มัลติมีเดียและเนื้อหาฝังตัว การใช้แท็กเสียงและวิดีโอใน HTML5 การประยุกต์ใช้เนื้อหาฝังตัว เช่น แผนที่ การฝังหน้าเว็บ ฯลฯ

รูปภาพ

รูปภาพเป็นประเภทสื่อที่สำคัญมาก สามารถปรับปรุงประสบการณ์ผู้ใช้ ทำให้การถ่ายทอดข้อมูลมีความชัดเจนและมีชีวิตชีวามากขึ้น ใน HTML เราใช้แท็ก <img> เพื่อแทรกรูปภาพ แท็ก <img> เป็นแท็กว่างที่ปิดตัวเอง กล่าวคือไม่มีแท็กปิด ที่อยู่ของรูปภาพถูกระบุผ่านคุณสมบัติ src (source) ของแท็ก <img>

ตัวอย่าง:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="คำอธิบายรูปภาพ">

ผลลัพธ์:

องค์ประกอบรูปภาพยังสามารถมีคุณสมบัติต่อไปนี้:

• width: ระบุความกว้างของรูปภาพ
• height: ระบุความสูงของรูปภาพ
• align: ระบุการจัดแนวของรูปภาพ
• border: ระบุเส้นขอบของรูปภาพ
• hspace: ระบุระยะห่างแนวนอนระหว่างรูปภาพกับองค์ประกอบรอบข้าง
• vspace: ระบุระยะห่างแนวตั้งระหว่างรูปภาพกับองค์ประกอบรอบข้าง
• ismap: ระบุว่ารูปภาพเป็นรูปภาพแผนที่หรือไม่

ตั้งค่าขนาดรูปภาพ

เราสามารถตั้งค่าความกว้างและความสูงของรูปภาพผ่านคุณสมบัติ width และ height ของแท็ก <img> ค่าของทั้งสองคุณสมบัตินี้สามารถเป็นค่าพิกเซลที่เฉพาะเจาะจงหรือเป็นเปอร์เซ็นต์

ตัวอย่าง:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="คำอธิบายรูปภาพ" width="100" height="100" align="center" border="1">

ผลลัพธ์:

ตั้งค่าข้อความทางเลือก

ข้อความทางเลือก (alt text) ใช้แสดงเมื่อไม่สามารถโหลดรูปภาพได้ และยังถูกใช้โดยโปรแกรมอ่านหน้าจอเพื่ออ่านเนื้อหาของรูปภาพ ช่วยให้ผู้ที่มีความบกพร่องทางสายตาเข้าใจรูปภาพได้ เราตั้งค่าข้อความทางเลือกผ่านคุณสมบัติ alt ของแท็ก <img>

ตัวอย่าง:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar1.png" alt="แสดงข้อความนี้เมื่อไม่พบรูปภาพ">

ผลลัพธ์:

ลิงก์รูปภาพ

รูปภาพยังสามารถใช้เป็นไปเปอร์ลิงก์ได้ เพียงแค่วางแท็ก <img> ไว้ภายในแท็ก <a> ก็สามารถสร้างลิงก์รูปภาพได้

ตัวอย่าง:

1
<a href="https://www.zhaojian.net/">
2
  <img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="คำอธิบายรูปภาพ" width="100" height="100" align="center" border="5">
3
</a>

ผลลัพธ์:

[!สรุป]

• คุณสมบัติ width และ height ใช้ตั้งค่าความกว้างและความสูงของรูปภาพ ค่าของทั้งสองคุณสมบัตินี้สามารถเป็นค่าพิกเซลที่เฉพาะเจาะจงหรือเป็นเปอร์เซ็นต์
• หากตั้งค่าความกว้างและความสูงของรูปภาพพร้อมกัน และอัตราส่วนของค่าทั้งสองไม่สอดคล้องกับอัตราส่วนของรูปภาพเอง รูปภาพอาจถูกยืดหรือบีบอัด ทำให้เกิดการเสียรูป
• หากลิงก์รูปภาพมีการตั้งค่าเส้นขอบ เส้นขอบจะมีสีเดียวกับไฮเปอร์ลิงก์โดยค่าเริ่มต้น

วิดีโอ

องค์ประกอบวิดีโอ HTML ใช้สำหรับฝังวิดีโอในหน้าเว็บ แท็กขององค์ประกอบวิดีโอคือ <video>

ตัวอย่าง:

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

ผลลัพธ์:

องค์ประกอบวิดีโอยังสามารถมีคุณสมบัติต่อไปนี้:

• width: ระบุความกว้างของวิดีโอ
• height: ระบุความสูงของวิดีโอ
• poster: ระบุเฟรมโปสเตอร์ของวิดีโอ
• autoplay: ระบุว่าจะเล่นวิดีโออัตโนมัติเมื่อโหลดหรือไม่
• loop: ระบุว่าจะเล่นวิดีโอซ้ำหรือไม่
• muted: ระบุว่าจะปิดเสียงวิดีโอหรือไม่
• preload: ระบุว่าจะโหลดวิดีโอล่วงหน้าเมื่อโหลดหรือไม่

ตัวอย่าง:

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls width="400" height="300" poster="https://www.zhaojian.net/images/zhaojian-avatar.png" autoplay loop muted preload="auto">
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

ตัวอย่างนี้ประกอบด้วยองค์ประกอบวิดีโอ URL ของไฟล์วิดีโอตั้งค่าเป็น mp4.mp4 ความกว้างตั้งค่าเป็น 400 พิกเซล ความสูงตั้งค่าเป็น 300 พิกเซล เฟรมโปสเตอร์ตั้งค่าเป็น zhaojian-avatar.png การเล่นอัตโนมัติตั้งค่าเป็น true การเล่นซ้ำตั้งค่าเป็น true การปิดเสียงตั้งค่าเป็น true การโหลดล่วงหน้าตั้งค่าเป็น auto

ผลลัพธ์:

โซลูชันวิดีโอ HTML ที่ครอบคลุมมาก (ไม่แนะนำ)

ตัวอย่างต่อไปนี้ใช้รูปแบบวิดีโอ 4 รูปแบบที่แตกต่างกัน องค์ประกอบ <video> ของ HTML 5 จะพยายามเล่นวิดีโอในหนึ่งในรูปแบบ mp4, ogg หรือ webm หากล้มเหลวทั้งหมด จะกลับไปใช้องค์ประกอบ <embed>

ตัวอย่าง:

1
<video width="320" height="240" controls>
2
  <source src="video.mp4" type="video/mp4">
3
  <source src="video.ogg" type="video/ogg">
4
  <source src="video.webm" type="video/webm">
5
  <object data="video.mp4" width="320" height="240">
6
    <embed src="video.swf" width="320" height="240">
7
  </object>
8
</video>

[!สรุป]

• องค์ประกอบ <source> ให้ตัวเลือกสำรอง หากเบราว์เซอร์ไม่รองรับรูปแบบนั้น จะพยายามเล่นไฟล์วิดีโอที่ระบุโดยองค์ประกอบ <source> ที่สอง

เสียง

องค์ประกอบ <audio> ใน HTML ใช้สำหรับฝังเนื้อหาเสียงในหน้าเว็บ

ตัวอย่าง:

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls>
2
</audio>

ผลลัพธ์:

องค์ประกอบเสียงยังสามารถมีคุณสมบัติต่อไปนี้:

• controls: ระบุว่าจะแสดงตัวควบคุมเสียงหรือไม่ ค่าเริ่มต้นคือ true
• autoplay: ระบุว่าจะเล่นเสียงอัตโนมัติเมื่อโหลดหรือไม่
• loop: ระบุว่าจะเล่นเสียงซ้ำหรือไม่
• muted: ระบุว่าจะปิดเสียงหรือไม่
• preload: ระบุว่าจะโหลดเสียงล่วงหน้าเมื่อโหลดหรือไม่

ตัวอย่าง:

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls autoplay loop muted preload="auto">
2
</audio>

ตัวอย่างนี้ประกอบด้วยองค์ประกอบ <audio> URL ของไฟล์เสียงตั้งค่าเป็น mp3.mp3 ตัวควบคุมตั้งค่าเป็น true การเล่นอัตโนมัติตั้งค่าเป็น true การเล่นซ้ำตั้งค่าเป็น true การปิดเสียงตั้งค่าเป็น true การโหลดล่วงหน้าตั้งค่าเป็น auto

ผลลัพธ์:

องค์ประกอบ embed

องค์ประกอบ embed เป็นองค์ประกอบที่ถูกนำมาใช้ใน HTML 4.01 สามารถฝังทรัพยากรทุกประเภท รวมถึงวิดีโอ เสียง รูปภาพ Flash ฯลฯ องค์ประกอบ embed ต้องการให้เบราว์เซอร์รองรับปลั๊กอินเฉพาะเพื่อแสดงผล

ตัวอย่าง:

1
<embed src="URL ทรัพยากร" type="ประเภททรัพยากร">

[!สรุป]

• HTML5 ได้นำองค์ประกอบ <video> และ <audio> มาใช้เพื่อแทนที่องค์ประกอบ <embed>
• องค์ประกอบ embed สามารถฝังทรัพยากรทุกประเภท ในขณะที่องค์ประกอบ <video> และ <audio> สามารถฝังเฉพาะทรัพยากรวิดีโอและเสียงเท่านั้น
• องค์ประกอบ embed ต้องการให้เบราว์เซอร์รองรับปลั๊กอินเฉพาะเพื่อแสดงผล ในขณะที่องค์ประกอบ <video> และ <audio> ไม่ต้องการ
• องค์ประกอบ <embed> ยังสามารถใช้ได้ แต่ไม่แนะนำอีกต่อไป

องค์ประกอบ object

องค์ประกอบ object เป็นองค์ประกอบที่ถูกนำมาใช้ใน HTML 4.01 สามารถฝังทรัพยากรทุกประเภท รวมถึงวิดีโอ เสียง รูปภาพ Flash ฯลฯ องค์ประกอบ object ใช้องค์ประกอบ <param> เพื่อระบุคุณสมบัติของทรัพยากร เช่น ความกว้าง ความสูง สีพื้นหลัง ฯลฯ

ตัวอย่าง:

1
<object data="URL ทรัพยากร" type="ประเภททรัพยากร">
2
  <param name="ชื่อคุณสมบัติ" value="ค่าคุณสมบัติ">
3
  ...
4
</object>

ความแตกต่างที่เฉพาะเจาะจงระหว่างองค์ประกอบ object และ embed:

[!สรุป]

• หากคุณต้องการฝังทรัพยากรทุกประเภท และเบราว์เซอร์รองรับปลั๊กอินเฉพาะ คุณสามารถใช้องค์ประกอบ object ได้
• หากคุณต้องการฝังเฉพาะทรัพยากรประเภทเฉพาะ และไม่ต้องการให้เบราว์เซอร์รองรับปลั๊กอินเฉพาะ คุณสามารถใช้องค์ประกอบ embed ได้
• หากคุณต้องการฝังเฉพาะทรัพยากรวิดีโอหรือเสียง แนะนำให้ใช้องค์ประกอบ <video> หรือ <audio>
• องค์ประกอบ <video> และ <audio> ไม่ต้องการให้เบราว์เซอร์รองรับปลั๊กอินเฉพาะ และให้ฟังก์ชันการทำงานที่หลากหลายกว่า

เฟรม

องค์ประกอบ <iframe> เป็นแท็กใน HTML ที่ใช้สำหรับฝังเอกสารหนึ่งในอีกเอกสารหนึ่ง ช่วยให้สามารถฝังเอกสารหนึ่งในอีกเอกสารหนึ่งและแสดงเนื้อหาของเอกสารที่ถูกฝัง มักใช้สำหรับฝังหน้าเว็บอื่น วิดีโอ แผนที่ ฯลฯ

องค์ประกอบ <iframe> มีคุณสมบัติต่อไปนี้:

• คุณสมบัติ src กำหนด URL ของหน้าเว็บหรือเอกสารที่จะฝัง
• คุณสมบัติ width กำหนดความกว้างขององค์ประกอบ <iframe>
• คุณสมบัติ height กำหนดความสูงขององค์ประกอบ <iframe>
• คุณสมบัติ frameborder กำหนดว่าเส้นขอบขององค์ประกอบ <iframe> จะมองเห็นได้หรือไม่
• คุณสมบัติ border กำหนดความกว้างของเส้นขอบขององค์ประกอบ <iframe>
• คุณสมบัติ framespacing กำหนดระยะห่างระหว่างองค์ประกอบ <iframe> กับเนื้อหารอบข้าง
• คุณสมบัติ marginwidth กำหนดระยะขอบซ้ายและขวาขององค์ประกอบ <iframe>
• คุณสมบัติ marginheight กำหนดระยะขอบบนและล่างขององค์ประกอบ <iframe>
• คุณสมบัติ scrolling กำหนดว่าองค์ประกอบ <iframe> อนุญาตให้เลื่อนหรือไม่
• คุณสมบัติ name กำหนดชื่อขององค์ประกอบ <iframe>
• คุณสมบัติ id กำหนด ID ขององค์ประกอบ <iframe>
• คุณสมบัติ class กำหนดคลาสขององค์ประกอบ <iframe>

ตัวอย่าง:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <title>องค์ประกอบ iframe HTML</title>
5
</head>
6
<body>
7
  <iframe src="https://www.zhaojian.net">
8
    <p>นี่คือ iframe ที่แสดงเนื้อหาของเว็บไซต์ zhaojian.net</p>
9
  </iframe>
10
</body>
11
</html>

ผลลัพธ์: