สรุปสั้น ๆ
สร้างหน้าเว็บที่มีวิดีโอใครว่ายาก ? เดี๋ยววันนี้เราจะมาพาทุกคนไปสร้างแบบขั้นกว่า ไม่ใช่แค่เอาวิดีโอมาแปะแล้วจบแบบเดิม ๆ แต่สามารถมีลูกเล่นได้มากกว่านั้น ถ้าอยากรู้ว่ามีลูกเล่นอะไร จะต่างจากการแปะวิดีโอเฉย ๆ ยัง ลองขยับเมาส์แล้วค่อย ๆ เลื่อนลงไปพบคำตอบกันเลยคร้าบ
เขียนโดย
Pachara Chaicharoen
MidLevel Software Developer
บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 12 สิงหาคม 2566
ใครที่ต้องการทำเว็บที่มีวิดีโอ ซึ่งคนที่เคยเขียนเว็บที่มีพื้นฐานเป็น HTML ไม่ว่าจะเป็น React, Vue อื่น ๆ มาก็อาจจะรู้จัก <video> กันอยู่แล้ว รวมถึงบางคนน่าจะเคยใช้เพื่อใส่วิดีโอลงในหน้าเว็บแล้วด้วย
แต่ถ้าอยากให้ตัว <video> ทำได้มากกว่าแค่การแสดงวิดีโอเฉย ๆ ก็อาจเจอปัญหาว่าจะทำเพิ่มยังไงดี ?
บางคนก็อาจจะบอกว่าหา Library ที่ตอบโจทย์มาใช้เลยน่าจะง่ายกว่ารึเปล่า ? คำตอบคือใช่เลยครับ แต่ว่าบางครั้งเราอาจจะเจอกับสถานการณ์ที่ว่าเราอยากได้การทำงานบางอย่างที่ตัว Library ที่ใช้อยู่ไม่มี ซึ่งบาง Library ที่มี Base เป็น <video> เราก็จะสามารถปรับแต่ง Config ให้สามารถทำงานที่ตรงกับที่เราต้องการได้ และสำหรับใครที่เพิ่งเริ่มต้นเขียนเว็บ HTML อยากได้ความรู้ในการขึ้น Video Player บนหน้าเว็บ เราไปดูพร้อม ๆ กันเลย
วิธีใส่วิดีโอ
วิธีสุดเบสิคที่ทุกคนรู้ก็คงจะเป็นการใส่ Attribute src ตามด้วยลิงก์วิดีโอลงไป
<video
controls
autoplay src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
/>หรืออีกวิธีคือการใส่ <source> ลงไปวิธีนี้จะแตกต่างจากแบบแรกคือในบาง Device หรือ Browser อาจไม่สามารถรองรับการ Render ไฟล์วิดีโอบาง Type ได้ การประกาศแบบนี้จะทำให้สามารถใส่ลิงก์ที่อยู่ของ Video ได้หลายที่ ถ้า src แรกไม่สามารถเล่นได้ก็จะลองอันถัดไปไปเรื่อย ๆ จนเจออันที่สามารถใช้งานได้ เป็นการลดความเสี่ยงที่ถ้าใส่ลิงก์วิดีโอไฟล์เดียวอาจจะไม่สามารถใช้ได้นั่นเอง
<video
controls
>
<source
src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
type="video/ogg" />
<source
src="https://archive.org/download/ElephantsDream/ed_hd.avi"
type="video/avi" />
<source
src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
type="video/mp4" />
</video>สำหรับเรื่องไฟล์ไหนรองรับกับ Browser ไหนได้บ้างสามารถไปดูได้ที่นี่เลย
https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs#common_codecs
Attributes
Attribute โดยทั่วไปของ Tag ใน HTML Element ที่ใช้กำหนดคุณสมบัติของ <video> เช่น src ใช้สำหรับกำหนดที่อยู่ของไฟล์ Video ตามตัวอย่าง
<video
controls
autoplay src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
/>ตัวอย่าง Attributes ของ <video>
- src : string > กำหนดที่อยู่ของไฟล์ Video,
- autoplay : boolean > การกำหนดว่าถ้าวิดีโอพร้อมเล่นจะเล่นทันทีหรือไม่
- controls : boolean > การแสดงแถบควบคุม
- loop : boolean > การเล่นซ้ำเมื่อวิดีโอสิ้นสุด
- poster : string > ที่อยู่ของไฟล์ Image ที่จะแสดงถ้าวิดีโอโหลดหรือหยุดเล่น
Attributes อื่น ๆ : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes
Events
เหตุการณ์ที่เกิดขึ้นใน Video Player ซึ่งเราสามารถดักฟัง Event เหล่านี้เพื่อให้มีการทำงานบางอย่างที่เราต้องการใน Event นั้น ๆ ได้ เช่นถ้าเราอยากให้มี Function ทำงานในแต่ละช่วงเวลาที่ Video กำลังเล่นอยู่ก็จะมี Event ชื่อ “timeupdate”
const video = document.querySelector("video");
video.addEventListener("timeupdate", handleEvent);
function handleEvent() {
console.log('playing');
}โค้ดด้านบนคือการเลือก Element Video มาเก็บไว้ในตัวแปรชื่อ video แล้ว addEventListener “timeupdate” ลงไป ซึ่งจะทำให้เมื่อมีการเปลี่ยนแปลงเวลาของ video จะมีการเรียกใช้ Function ชื่อ handleEvent ซึ่งจะ log คำว่า ‘playing’ ออกมา
ตัวอย่าง Event ของ <video>
- play > วิดีโอเริ่มเล่น
- timeupdate > เวลาเล่นของวิดีโอมีการเปลี่ยนแปลง
- seeked > การเลือกเวลาวิดีโอสำเร็จ
- pause > วิดีโอหยุด
- ended > วิดีโอเล่นจนจบ
Events อื่น ๆ :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events
Instance Methods
ชุดคำสั่งที่สั่งให้ Video Player ทำ Action บางอย่าง เช่น play() จะเป็นการสั่งให้ Video Player เริ่มเล่น
const video = document.querySelector("video");
video.play();โค้ดด้านบนคือการเลือก Element Video มาเก็บไว้ในตัวแปรชื่อ video แล้ว สั่งให้ Video Player เริ่มเล่น
ตัวอย่าง Event ของ <video>
- play() > เล่นวิดีโอ
- load() > Reset วิดีโอ
- pause() > หยุดวิดีโอ
Events อื่น ๆ :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#instance_methods
Instance Properties
คุณสมบัติ / ข้อมูลภายใน Video Player เช่น currentTime จะเป็นเวลาปัจจุบันของวิดีโอ
const video = document.querySelector("video");
video.addEventListener("timeupdate", handleEvent)
function handleEvent(){
console.log(video.currentTime)
}โค้ดนี้จะเริ่มรวมการทำงานมากขึ้นคือการเลือก Element Video มาเก็บไว้ในตัวแปรชื่อ video แล้วเพิ่มการดักฟัง Event timeupdate เพื่อให้ log เวลาปัจจุบันของวิดีโอ เราก็จะรู้ว่าตอนที่วิดีโอกำลังเล่นอยู่ถึงวินาทีที่เท่าไหร่แล้ว
ตัวอย่าง Instance properties ของ <video>
- currentTime > เวลาปัจจุบันของวิดีโอ
- duration > เวลาทั้งหมดของวิดีโอ
- ended > วิดีโออยู่ในจุดสิ้นสุดหรือไม่
- volume > ระดับเสียงของวิดีโอ
- autoplay > Video Player ถูกกำหนดให้อัตโนมัติหรือไม่
Instance properties อื่น ๆ :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#instance_properties
หรืออีกตัวอย่างคือการเปลี่ยน Property ของตัว Video Player ให้ autoplay เป็น true เมื่อวิดีโอพร้อมเล่นก็จะเล่นทันทีผ่าน JavaScript ได้
const video = document.querySelector("video");
video.autoplay = trueปิดท้ายด้วย “อยากได้แบบไหนจะ Config ยังไงดี?”
คำตอบของคำถามนี้สุดท้ายก็ขึ้นอยู่กับการประยุกต์ใช้ตามความต้องการของการทำงาน เช่น อยากให้วิดีโอเล่นจนถึง 50% แล้วให้มีการทำงานบางอย่าง ก็อาจจะหยิบ Event timeupdate มาใช้กับ Properties currentTime และ duration มาคำนวนแล้วเรียกใช้งาน Function
หรืออยากเพิ่มปุ่มภายนอกเพื่อเลื่อนวิดีโอไปยังจุดที่กำหนดก็อาจจะการกำหนดค่า currentTime ไปเป็นจุดที่กำหนด จะเห็นว่าถ้าเรารู้วิธีปรับแต่งตัว Video Player เราก็สามารถนำไปประยุกต์ตามความต้องการได้อีกเยอะ สุดท้ายก็อย่าลืมเข้าไปลองอ่านดูตัว Doc ที่แปะไว้ตามหัวข้อด้านบน ถ้าได้รู้จักตัวเลือกที่มากขึ้นก็อาจจะได้ไอเดียใหม่ ๆ หรือคำตอบที่กำลังหาอยู่ในการสร้างเว็บที่ใช้วิดีโอก็ได้นะ
ระบบฝึกทักษะ การเขียนโปรแกรม
ที่พร้อมตรวจผลงานคุณ 24 ชั่วโมง
- โจทย์ปัญหากว่า 200 ข้อ ที่รอท้าทายคุณอยู่
- รองรับ 9 ภาษาโปรแกรมหลัก ไม่ว่าจะ Java, Python, C ก็เขียนได้
- ใช้งานได้ฟรี ! ครบ 20 ข้อขึ้นไป รับ Certificate ไปเลย !!
