HTML5 Audio และ Video

ในยุคที่มัลติมีเดียเข้ามามีบทบาทสำคัญในการสื่อสารบนเว็บไซต์ การนำเสนอเนื้อหาเสียงและวิดีโอจึงเป็นสิ่งที่ขาดไม่ได้ HTML5 ได้เข้ามาปฏิวัติการจัดการมัลติมีเดียบนเว็บไซต์ ด้วยแท็ก <audio> และ <video> ทำให้เราสามารถฝังไฟล์เสียงและวิดีโอลงในหน้าเว็บได้อย่างง่ายดายและมีประสิทธิภาพมากขึ้น โดยไม่ต้องพึ่งพาปลั๊กอินภายนอกอย่าง Flash อีกต่อไป

แท็ก <audio>

แท็ก <audio> ใช้สำหรับฝังไฟล์เสียงลงในหน้าเว็บ ตัวอย่างการใช้งานพื้นฐาน:


<audio src="audio.mp3" controls>
  Your browser does not support the audio element.
</audio>

คำอธิบาย:

src="audio.mp3": ระบุที่อยู่ (URL) ของไฟล์เสียงที่จะเล่น ในตัวอย่างนี้คือไฟล์ audio.mp3 ที่อยู่ใน directory เดียวกับไฟล์ HTML
controls: เพิ่มส่วนควบคุมการเล่น (play, pause, volume, seek bar) ให้กับไฟล์เสียง หากไม่ใส่ attribute นี้ ผู้ใช้จะไม่สามารถควบคุมการเล่นได้
Your browser does not support the audio element.: ข้อความที่จะแสดงหากเบราว์เซอร์ของผู้ใช้ไม่รองรับแท็ก <audio>

Attributes ที่สำคัญของแท็ก <audio>

src: (จำเป็น) ระบุ URL ของไฟล์เสียง
controls: แสดงส่วนควบคุมการเล่น
autoplay: เริ่มเล่นไฟล์เสียงอัตโนมัติเมื่อหน้าเว็บโหลด (ควรใช้อย่างระมัดระวัง เพราะอาจสร้างความรำคาญให้ผู้ใช้)
loop: เล่นไฟล์เสียงซ้ำเมื่อเล่นจบ
muted: ปิดเสียงเริ่มต้น
preload: กำหนดว่าจะโหลดไฟล์เสียงล่วงหน้าหรือไม่ (auto, metadata, none)

ตัวอย่างการใช้งาน attributes เพิ่มเติม:


<audio src="audio.mp3" controls autoplay loop muted preload="auto">
  Your browser does not support the audio element.
</audio>

การรองรับ format ของไฟล์เสียง:

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


<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

คำอธิบาย:

<source src="audio.mp3" type="audio/mpeg">: ระบุไฟล์เสียง audio.mp3 ที่เป็น format MPEG (MP3)
<source src="audio.ogg" type="audio/ogg">: ระบุไฟล์เสียง audio.ogg ที่เป็น format Ogg

เบราว์เซอร์จะเลือกไฟล์เสียงที่รองรับจากรายการ <source> ที่ระบุไว้

Format ของไฟล์เสียงที่ควรพิจารณา:

MP3: เป็น format ที่ได้รับความนิยมและรองรับโดยเบราว์เซอร์ส่วนใหญ่
Ogg Vorbis: เป็น format แบบเปิด (open source) ที่มีคุณภาพเสียงดี
WAV: เป็น format ที่ไม่บีบอัด (uncompressed) ทำให้มีคุณภาพเสียงดีที่สุด แต่ขนาดไฟล์จะใหญ่
AAC: มักใช้กับอุปกรณ์ Apple และเบราว์เซอร์ Safari

แท็ก <video>

แท็ก <video> ใช้สำหรับฝังไฟล์วิดีโอลงในหน้าเว็บ การใช้งานคล้ายกับแท็ก <audio>


<video src="video.mp4" controls width="640" height="360">
  Your browser does not support the video element.
</video>

คำอธิบาย:

src="video.mp4": ระบุที่อยู่ (URL) ของไฟล์วิดีโอที่จะเล่น
controls: เพิ่มส่วนควบคุมการเล่น
width="640" height="360": กำหนดขนาดความกว้างและความสูงของวิดีโอ (pixels)
Your browser does not support the video element.: ข้อความที่จะแสดงหากเบราว์เซอร์ของผู้ใช้ไม่รองรับแท็ก <video>

Attributes ที่สำคัญของแท็ก <video>

src: (จำเป็น) ระบุ URL ของไฟล์วิดีโอ
controls: แสดงส่วนควบคุมการเล่น
width: กำหนดความกว้างของวิดีโอ
height: กำหนดความสูงของวิดีโอ
autoplay: เริ่มเล่นวิดีโออัตโนมัติเมื่อหน้าเว็บโหลด (ควรใช้อย่างระมัดระวัง)
loop: เล่นวิดีโอซ้ำเมื่อเล่นจบ
muted: ปิดเสียงเริ่มต้น
poster: ระบุภาพโปสเตอร์ที่จะแสดงก่อนที่วิดีโอจะเริ่มเล่น
preload: กำหนดว่าจะโหลดไฟล์วิดีโอหรือไม่ (auto, metadata, none)

ตัวอย่างการใช้งาน attributes เพิ่มเติม:


<video src="video.mp4" controls width="640" height="360" autoplay loop muted poster="poster.jpg" preload="auto">
  Your browser does not support the video element.
</video>

การรองรับ format ของไฟล์วิดีโอ:

เช่นเดียวกับไฟล์เสียง เบราว์เซอร์แต่ละตัวรองรับ format ของไฟล์วิดีโอที่แตกต่างกัน คุณควรเตรียมไฟล์วิดีโอในหลาย format และใช้แท็ก <source> ภายในแท็ก <video> เพื่อระบุไฟล์วิดีโอแต่ละ format


<video controls width="640" height="360" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  Your browser does not support the video element.
</video>

Format ของไฟล์วิดีโอที่ควรพิจารณา:

MP4: เป็น format ที่ได้รับความนิยมและรองรับโดยเบราว์เซอร์ส่วนใหญ่ (H.264 codec)
WebM: เป็น format แบบเปิด (open source) ที่พัฒนาโดย Google (VP8/VP9 codec)
Ogg Theora: เป็น format แบบเปิด (open source) อีก format หนึ่ง

ข้อควรระวังในการใช้งาน autoplay

การใช้ attribute autoplay อาจสร้างความรำคาญให้กับผู้ใช้ หากผู้ใช้เปิดหลายแท็บพร้อมกันและแต่ละแท็บมีวิดีโอที่เล่นอัตโนมัติ จะทำให้เกิดเสียงรบกวนและอาจทำให้ผู้ใช้ปิดแท็บนั้นไป ดังนั้นควรพิจารณาถึงประสบการณ์ของผู้ใช้ก่อนที่จะใช้ autoplay หากจำเป็นต้องใช้ ควรใช้ร่วมกับ attribute muted เพื่อปิดเสียงเริ่มต้น และให้ผู้ใช้เปิดเสียงเองหากต้องการ

สรุป

HTML5 ได้มอบเครื่องมือที่ทรงพลังในการจัดการมัลติมีเดียบนเว็บไซต์ การใช้แท็ก <audio> และ <video> ช่วยให้เราสามารถนำเสนอเนื้อหาเสียงและวิดีโอได้อย่างง่ายดายและมีประสิทธิภาพ อย่าลืมพิจารณาถึงการรองรับ format ของไฟล์และประสบการณ์ของผู้ใช้เมื่อใช้งาน attributes ต่างๆ เพื่อให้เว็บไซต์ของคุณเป็นมิตรกับผู้ใช้มากที่สุด