In html, บทความทั้งหมด

คุณสมบัติสำคัญประการหนึ่งของ HTML5 คือ ได้เตรียมแท็กสำหรับการเล่นไฟล์ Audio และ Video โดยเฉพาะ พร้อมกันนั้นยังอนุญาตให้เราสามารถควบคุมการเล่นมัลติมีเดียเหล่านี้ได้โดยตรง ไม่ว่าจะเป็นการเล่น หยุดเล่น กรอกไปข้างหน้า ย้อนกลับ ฯลฯ ซึ่งในบทนี้จะกล่าวถึงบราวเซอร์รุ่นต่างๆ ที่รองรับ Video และ Audio การเลือกฟอร์แมตของไฟล์ที่สนับสนุน รวมถึงการใช้ JavaScript เพื่อควบคุมการเล่น Video และ Audio

วีดีโอใน HTML5

ในยุคแรกๆ หากต้องการแทรกวิดีโอลงในเว็บเพจ เราอาจต้องติดตั้งส่วนประกอบเสริมลงไปในบราวเซอร์ อาทิเช่น Real Player, Quicktime หรือ Window Media จนมาถึงในยุคปัจจุบัน ก็ได้ปรับเปลี่ยนไปใช้ Flash, Quicktime หรือ Silver Live กันมากขึ้น ส่วนในอนาคตคาดว่า การเล่นวิดีโอบนเว็บเพจก็จะเหลือเพียงการใช้ Flash หรือ HTML5 เท่านั้น

จุดเริ่มต้นของการเล่นวิดีโอโดยใช้ HTML5 เกิดขึ้นในปี 2007 เว็บบราวเซอร์ชั้นนำอย่าง Opera ได้เสนอแท็ก <video> ที่ช่วยให้สามารถเล่นวิดีโอบนเว็บเพจได้โดยไม่ต้องติดตั้ง Plug-in หรือส่วนประกอบเสริมใดๆ บนบราวเซอร์เลย หลังจากนั้นบราวเซอร์อื่นๆ ก็เริ่มหันมาสนับสนุนแนวคิดดังกล่าว โดยมีการปรับปรุงให้สามารถเล่นไฟล์วิดีโอบนบราวเซอร์ของตน แต่อาจมีการรองรับฟอร์แมตของวิดีโอที่แตกต่างกันออกไป ซึ่งในปัจจุบันบราวเซอร์ส่วนใหญ่ ไม่ว่าจะเป็น Edge, IE, Firefox, Safari, Chrome หรือ Opera ก็สามารถใช้งานแท็ก <video> ได้ทั้งหมดแล้ว

การใช้แท็ก <video>

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

รูปแบบพื้นฐาน จะเริ่มด้วยแท็ก <video> และปิดด้วยแท็ก </video> โดยเราจะใช้ src เพื่อเลือกว่าจะใช้แสดงวิดีโอใด และใช้ controls เพื่อกำหนดว่าจะให้แสดงแถบสำหรับควบคุมวิดีโอด้วยหรือไม่

สิ่งสำคัญประการหนึ่งที่ควรทราบคือ บราวเซอร์แต่ละตัวรองรับไฟล์วิดีโอที่แตกต่างกันออกไป เช่น IE, Edge และ Safari รองรับเฉพาะ H.264 ส่วน Firefox, Chrome และ Opera จะรองรับวิดีโอที่มีฟอร์แมตต่างออกไป คือสนับสนุนเฉพาะ WebM กับ Theora ดังนั้นการกำหนดแท็ก <video> เราควรเตรียมวิดีโอให้ครบทุกฟอร์แมต เพื่อให้สามารถเล่นกับบราวเซอร์ได้ครบถ้วน ดังตัวอย่างต่อไปนี้

จากตัวอย่างข้างต้น จะเห็นได้ว่า ได้มีการใช้แท็ก <source> เพื่อกำหนดวิดีโอในฟอร์แมตต่างๆ ซึ่งเราควรเตรียมให้ครบทั้ง 3 ฟอร์แมต คือ .mp4 สำหรับเล่นกับ IE และ Safari ส่วน .webm และ .ogv จะใช้กับ Firefox, Chrome หรือ Opera

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

บราวเซอร์แต่ละรุ่นแต่ละเวอร์ชัน สนับสนุนไฟล์วิดีโอในฟอร์แมตที่ต่างกันออกไป โดยเริ่มแรก Safari และ IE จะสนับสนุนวิดีโอแบบ H.264 ซึ่งถือว่าเป็นฟอร์แมตชื่อดังของ Apple ที่นิยมใช้งานแพร่หลาย และถูกใช้ใน iPhone และ iPad ส่วน Firefox, Chrome และ Opera จะใช้วิดีโอที่เป็น Open Source ซึ่งไม่ติดลิขสิทธิ์ โดยสนับสนุนทั้ง WebM และ Theora Ogg

สรุปได้ว่า หากต้องการให้วิดีโอสามารถเล่นในบราวเซอร์ใดๆ ก็ได้ แนะนำว่าควรเขียนโค๊ต โดยกำหนดวิดีโอให้ครบทุกฟอร์แมต

การใช้งาน preloading

preloading เป็นการสั่งให้โหลดวิดีโอไปพร้อมๆ กับโหลดเว็บเพจ ซึ่งวิธีนี้ช่วยให้ผู้ใช้สามารถเปิดวิดีโอได้รวดเร็วยิ่งขึ้นได้ เนื่องจากไม่ต้องรอให้โหลดเว็บเพจเสร็จ และต้องรอโหลดวิดีโออีกครั้งนั่นเอง

เราสามารถกำหนด preloading ได้ 3 แบบ ดังนี้

  • preloading = “none” หมายถึงไม่ต้องการให้โหลดอัตโนมัติเวลาโหลดเว็บเพจ
  • preloading = “auto” หมายถึง ให้ตรวจสอบอุปกรณ์และความเร็วในการเชื่อมต่ออินเทอร์เน็ต เช่น ถ้าเปิดเว็บเพจด้วย iPhone ก็จะไม่มีการสั่งให้โหลดวิดีโอ แต่ถ้าเป็นคอมพิวเตอร์ทั่วไปก็สั่งให้โหลดวิดีโอทันทีที่โหลดเว็บเพจ หรืออาจพิจารณาจากความเร็วอินเทอร์เน็ต ถ้ามีความเร็วสูงพอก็จะโหลดให้โดยอัตโนมัติ
  • preloading = “metadata” หมายถึง การโหลดเฉพาะคุณสมบัติของวิดีโอ เช่น โหลดเฟรมแรก โหลดจำนวนเฟรมทั้งหมด ความยาววิดีโอ ฯลฯ จุดประสงค์ก็เพื่อบอกให้บราวเซอร์ทราบว่า ควรจะเตรียมพื้นที่สำหรับเล่นวิดีโอนี้มากน้อยเพียงใด

สำหรับเว็บเพจที่มีจุดประสงค์สำหรับเล่นวิดีโอเป็นหลัก เช่น YouTube ก็จะแนะนำให้กำหนด preloading = “auto” แต่ถ้าเป็นเว็บเพจทั่วๆ ไปที่ไม่ได้ให้ความสำคัญกับวิดีโอมากนัก ก็ควรกำหนด preloading = “none”

เล่นอัตโนมัติด้วย autoplay

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

เล่นวนซ้ำด้วย loop

loop คือ การสั่งให้เล่นวนซ้ำหลังจากเล่นวิดีโอนั้นๆ จบไปแล้ว การสั่งวน Loop นี้ เหมาะสำหรับเว็บเพจที่ต้องการแสดงภาพเคลื่อนไหวที่เป็นพื้นหลังของเว็บเพจ เป็นการเล่นวนซ้ำๆ กันไปมา ทำให้เว็บเพจดูมีการเคลื่อนไหวตลอดเวลา ในบางบราวเซอร์อาจไม่สนับสนุนการวนซ้ำด้วย loop เช่น ใน Firefox แต่ยังสามารถใช้ JavaScript ควบคุมการวนซ้ำแทนได้

แสดงภาพตัวอย่างด้วย poster

ภาพหรือเฟรมที่ใช้แทนวิดีโอ ช่วยให้เราสามารถทราบได้อย่างคร่าวๆ ว่า วิดีโอนี้เกี่ยวข้องกับอะไร ซึ่งใน HTML5 เราสามารถใช้ poster เพื่อกำหนดภาพตัวอย่างของวิดีโอเช่นดีได้ ซึ่งสามารถนำเอาภาพที่เป็น .gif, .jpeg หรือ .png มาใช้ก็ได้ แต่ภาพที่นำมาใช้ควรมีความละเอียดเท่าความกว้างและความยาวของวิดีโอ

การกำหนด poster กับ preload ควรมีความสัมพันธ์กัน เช่น หากไม่ต้องการเน้นวิดีโอ ก็ไม่ต้องกำหนดทั้ง poster และ preload แต่ถ้าเป็นเว็บที่เน้นการแสดงวิดีโอแล้ว แนะนำว่าควรกำหนดทั้ง poster และ preload ให้อยู่คู่กัน

ความกว้างและความสูงของวีดีโอ

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

การใช้งาน JavaScript ปรับแต่งวิดีโอ

นอกจาก HTML5 จะได้เตรียมแท็ก <video> ไว้แล้ว เรายังสามารถใช้ JavaScript เพื่อควบคุมการทำงานของวิดีโอบนเว็บเพจได้อีกด้วย เช่น

  • .play(); เป็น method สำหรับการเล่นไฟล์วิดีโอ
  • .pause(); เป็น method สำหรับการหยุดเล่นไฟล์วิดีโอชั่วคราว
  • .currentTime = 0; ใช้เพื่อกำหนด properties สำหรับกำหนดตำแหน่งของแถบเวลา

ในขณะที่เราใช้งานวิดีโออยู่นั้น เราสามารถกำหนด event รูปแบบใหม่ๆ ที่เกี่ยวข้องการับเล่นวิดีโอได้โดยตรง เช่น ในขณะที่หยุดเล่นไปแล้ว จะให้ไปรันฟังก์ชันใดต่อไป ต่อไปนี้คือตัวอย่าง JavaScript ที่ใช้สำหรับควบคุมการทำงานของวีดีโอ

การเล่นไฟล์เสียงใน HTML5

Audio ใน HTML5 ก็มีลักษณะเช่นเดียวกับ Video ทั้งนี้เนื่องมาจากเสียงเป็นส่วนหนึ่งของวิดีโอ หาก HTML5 รองรับวิดีโอได้แล้ว ก็แน่นอนว่าจะสามารถเล่นไฟล์เสียงได้เช่นเดียวกัน ส่วนสิ่งที่แตกต่างกันคือ Audio ใน HTML5 จะไม่มีคุณสมบัติในการควบคุมเกี่ยวกับภาพ เช่น ความกว้างและความสูงของวิดีโอ ภาพตัวอย่าง อัตราการแสดงภาพ (เฟรมต่อวินาที) เป็นต้น

การใช้แท็ก <audio>

การแทรกไฟล์เสียงใน HTML5 สามารถทำได้ง่ายๆ ด้วยการกำหนดแท็ก <audio> โดยเราจะใช้ src เพื่อเลือกว่าจะใช้แสดงไฟล์เสียงใดบนเว็บเพจ และใช้ controls เพื่อกำหนดว่าจะให้แสดงแถบสำหรับควบคุมวิดีโอด้วยหรือไม่

เนื่องจากบราวเซอร์แต่ละตัวรองรับไฟล์เสียงที่แตกต่างกันออกไป เช่น IE และ Safari รองรับ MP3 กับ ACC ส่วน Firefox, Chrome และ Opera จะเน้นรองรับ Ogg Vorbis กับ WAV ดังนั้นการกำหนดแท็ก <audio> เราควรเตรียมไฟล์เสียงให้ครบทุกฟอร์แมต เพื่อให้สามารถเล่นกับบราวเซอร์ได้ครบถ้วน ดังตัวอย่างต่อไปนี้

บราวเซอร์แต่ละรุ่นจะสนับสนุนไฟล์เสียงในฟอร์แมตที่ต่างกันออกไป โดยไฟล์เสียงที่นิยมใช้ได้แก่ WAV, Ogg Vorbis, MP3 และ AAC  ไฟล์เสียงจะถูกแบ่งเป็นสองฝั่ง ฝั่งแรกคือ IE, Edge กับ Safari ที่สนับสนุนไฟล์ MP3 และ AAC ส่วนอีกฝั่งหนึ่ง ได้แก่ Chrome, Firefox และ Opera จะสนับสนุน Ogg Vorbis และ WAV เป็นหลัก

เช่นเดียวกับการกำหนดวิดีโอ หากเราต้องการให้สามารถเล่นไฟล์เสียงในทุกๆ บราวเซอร์ เราก็ควรเขียนโค๊ต โดยกำหนดไฟล์เสียงให้ครบทุกฟอร์แมตเช่นเดียวกัน

ติดต่อเรา

หากสมาชิกท่านใดพบปัญหา หรือมีข้อสงสัยประการใด สามารถติชม หรือเสนอแนะ มายังเว็บมาสเตอร์ได้ตลอดเวลานะครับ

Not readable? Change text. captcha txt
0

Start typing and press Enter to search