แท็กที่เกี่ยวข้องกับสื่อ

บทความนี้อธิบายเกี่ยวกับแท็กที่เกี่ยวข้องกับสื่อ

อธิบายวิธีการอธิบายรูปภาพ วิดีโอ เสียง ฯลฯ ใน HTML รวมถึงองค์ประกอบที่ยุบได้และเฟรมแบบอินไลน์

YouTube Video

แท็กที่เกี่ยวข้องกับสื่อ

แท็ก <img>

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• แท็ก <img> ใช้สำหรับแทรกรูปภาพ แอตทริบิวต์ src กำหนดพาธของภาพ และแอตทริบิวต์ alt ให้รายละเอียดเมื่อไม่สามารถแสดงภาพได้

แท็ก <figure> และ <figcaption>

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• แท็ก <figure> กลุ่มเนื้อหามัลติมีเดีย เช่น รูปภาพหรือภาพวาด พร้อมกับคำบรรยายโดยใช้แท็ก <figcaption>

แท็ก <picture>

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• แท็ก <picture> ใช้สำหรับสนับสนุนภาพที่ตอบสนอง ทำให้ภาพที่เหมาะสมถูกเลือกตามเงื่อนไขจอแสดงผลที่แตกต่างกัน

• แอตทริบิวต์ media กำหนดเงื่อนไขในรูปแบบเดียวกับการใช้ CSS media queries

  • คุณสามารถกำหนดเงื่อนไข เช่น ความกว้างขั้นต่ำ (min-width), ความกว้างสูงสุด (max-width) หรือการวางแนวหน้าจอ (orientation)

• ในตัวอย่างนี้ รูปภาพต่อไปนี้จะแสดงขึ้นอยู่กับความกว้างของหน้าจอ

  • ถ้าความกว้างของหน้าจออยู่ที่ 800px หรือมากกว่า large.jpg จะแสดงผล
  • ถ้าความกว้างของหน้าจออยู่ที่ 400px หรือมากกว่า แต่ไม่ถึง 800px medium.jpg จะแสดงผล
  • ถ้าความกว้างของหน้าจอน้อยกว่า 400px small.jpg (รูปภาพในแท็ก <img>) จะแสดงผล

แท็ก <canvas>

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• แท็ก <canvas> ให้พื้นที่สำหรับการวาดกราฟิกแบบไดนามิกโดยใช้ JavaScript

แท็ก <map>

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

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

แท็ก <embed>

1<embed src="movie.mp4" width="300" height="200">

• แท็ก <embed> ใช้สำหรับแทรกเนื้อหาภายนอกเช่น PDF, วิดีโอ, หรือเสียง

แท็ก <video>

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• แท็ก <video> ใช้สำหรับแทรกเนื้อหาวิดีโอ คุณสามารถกำหนดหลายรูปแบบโดยใช้แท็ก <source>

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• แอตทริบิวต์ preload ช่วยให้คุณกำหนดได้ว่าจะให้เบราว์เซอร์โหลดวิดีโอมากน้อยเพียงใดก่อนที่จะเริ่มเล่น
  • auto บอกให้เบราว์เซอร์โหลดมีเดียทั้งหมดล่วงหน้า สามารถลดความล่าช้าเมื่อเริ่มเล่นได้ แต่ข้อมูลอาจถูกดาวน์โหลดแม้ว่าผู้ใช้จะไม่ได้เล่นสื่อก็ตาม
  • metadata จะโหลดเพียงข้อมูลเมตาของมีเดีย (เช่น ระยะเวลา ข้อมูลแทร็ก) ข้อมูลสื่อเองจะยังไม่ถูกโหลดจนกว่าผู้ใช้จะเริ่มเล่น เหมาะสำหรับเมื่อคุณต้องการข้อมูลสรุปของสื่อ
  • none ไม่โหลดไฟล์มีเดียล่วงหน้า สื่อจะไม่ดาวน์โหลดทรัพยากรจนกว่าจะเริ่มเล่น เหมาะสำหรับเมื่อคุณต้องการลดการใช้งานข้อมูลให้น้อยที่สุด

แท็ก <audio>

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• แท็ก <audio> ใช้สำหรับแทรกเนื้อหาเสียง แท็ก <source> รองรับหลายรูปแบบ
• เช่นเดียวกับแท็ก <video> คุณสามารถใช้แอตทริบิวต์ preload เพื่อกำหนดว่าจะให้โหลดเสียงมากน้อยเพียงใดก่อนเริ่มเล่น

แท็ก <track>

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• แท็ก <track> ใช้สำหรับกำหนดแทร็กข้อความ เช่น คำบรรยายและคำอธิบายภาพ สามารถใช้ภายในแท็ก <audio> หรือ <video> ได้
• แอตทริบิวต์ kind ช่วยให้คุณกำหนดวัตถุประสงค์ของแทร็ก (เช่น คำบรรยาย คำอธิบาย บทต่าง ๆ เป็นต้น) คุณสามารถระบุมูลค่าดังต่อไปนี้
  • subtitles ให้คำบรรยายที่แปลเนื้อหาของวิดีโอหรือเสียง หรือช่วยให้ผู้ชมเข้าใจง่ายขึ้น วัตถุประสงค์หลักคือการแปลเสียงโดยตรง
  • captions ให้ข้อมูลเพิ่มเติม เช่น ดนตรีและเอฟเฟกต์เสียง สำหรับผู้ที่หูหนวกหรือมีปัญหาการได้ยิน นอกเหนือจากเสียง
  • descriptions เป็นแทร็กที่อธิบายเนื้อหาภาพของวิดีโอ เช่น การกระทำและทิวทัศน์ สำหรับผู้ที่มีปัญหาทางสายตา
  • chapters ให้ตัวบ่งชี้บท (ชื่อบท) เพื่อแสดงจุดที่เฉพาะเจาะจงภายในวิดีโอ
  • metadata ให้ข้อมูลเพิ่มเติมสำหรับการวิเคราะห์หรือประมวลผลสื่อ แต่จะไม่แสดงต่อผู้ใช้

แท็ก <iframe>

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• แท็ก <iframe> ใช้ในการฝังหน้า HTML อื่นหรือเนื้อหาภายนอก (เช่น เว็บไซต์ วิดีโอ หรือเอกสารต่างๆ) ลงในหน้าปัจจุบัน มักใช้สำหรับฝังวิดีโอจาก YouTube ลงในหน้า

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video