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

HTML5 การใช้งาน Multimedia

ใน HTML5 มีการปรับปรุงและเพิ่มฟีเจอร์ใหม่ๆ ที่ทำให้การใช้งานสื่อมัลติมีเดีย (Multimedia) สะดวกและเป็นมาตรฐานมากขึ้น โดย Multimedia ใน HTML5 สามารถแบ่งได้เป็นสองประเภทหลัก คือ เสียง (Audio) และ วิดีโอ (Video) โดยใช้แท็ก <audio> และ <video> ที่สามารถฝังไฟล์สื่อภายในหน้าเว็บได้โดยไม่ต้องใช้ปลั๊กอินเสริม เช่น Flash Player

การใช้งานเสียง (Audio)

HTML5 มี <audio> แท็กที่ใช้สำหรับการเล่นไฟล์เสียง เช่น MP3, WAV, และ Ogg โดยสามารถตั้งค่าให้ควบคุมการเล่นได้ เช่น การเล่นซ้ำอัตโนมัติ การควบคุมระดับเสียง เป็นต้น

ตัวอย่าง

HTML
<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  เบราว์เซอร์ของคุณไม่รองรับแท็กเสียง
</audio>

ในตัวอย่างนี้ แท็ก <audio> มีแอตทริบิวต์ controls เพื่อแสดงตัวควบคุมการเล่นเสียง และมี <source> เพื่อรองรับไฟล์เสียงหลายรูปแบบ (MP3 และ Ogg)

การใช้งานวิดีโอ (Video)

สำหรับวิดีโอ HTML5 มีแท็ก <video> ที่รองรับฟอร์แมตต่างๆ เช่น MP4, WebM, และ Ogg โดยสามารถตั้งค่าให้แสดงตัวควบคุมการเล่น กำหนดขนาด หรือการเล่นอัตโนมัติได้

ตัวอย่าง

HTML
<video width="320" height="240" controls>
  <source src="video-file.mp4" type="video/mp4">
  เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ
</video>

ในตัวอย่างนี้ <video> มีแอตทริบิวต์ controls สำหรับแสดงตัวควบคุมการเล่น และกำหนดขนาดของวิดีโอผ่านแอตทริบิวต์ width และ height

การใช้งานกับฟอร์แมตต่างๆ

  • MP3, MP4: เป็นฟอร์แมตที่ได้รับการสนับสนุนโดยเบราว์เซอร์ส่วนใหญ่
  • Ogg, WebM: ฟอร์แมตที่เปิดกว้างและมีการบีบอัดข้อมูลที่ดี

การใช้งานการฝังสื่อมัลติมีเดียอื่นๆ เช่น วิดีโอจาก YouTube

สามารถฝังวิดีโอจากแหล่งภายนอกได้โดยใช้ iframe

ตัวอย่าง

HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

การใช้งานร่วมกับ JavaScript

สามารถควบคุมการเล่นหรือหยุดเสียงและวิดีโอผ่าน JavaScript ได้ โดยใช้คำสั่งเช่น .play() และ .pause() เพื่อควบคุมมัลติมีเดีย

ตัวอย่าง

HTML
<video id="myVideo" width="320" height="240" controls>
  <source src="video-file.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('myVideo').play()">Play Video</button>
<button onclick="document.getElementById('myVideo').pause()">Pause Video</button>

สรุป

HTML5 ทำให้การใช้งาน Multimedia บนเว็บไซต์ง่ายขึ้นและสามารถใช้งานได้ในหลายแพลตฟอร์มโดยไม่ต้องใช้ปลั๊กอินเสริม

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

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