Skip to main content
0

สรุปสั้น ๆ

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

เขียนโดย
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 ไปเลย !!
เข้าใช้งานระบบ DevLab ฟรี !เรียนรู้เพิ่มเติม

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

BorntoDev

Author BorntoDev

BorntoDev Co., Ltd.

More posts by BorntoDev
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า