home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีฝังวิดีโอ MP4 ใน HTML5 พร้อม Controls

วันนี้จะสอนฝังวิดีโอ MP4 ใน HTML ด้วย Element <video> ครอบคลุม:

  1. ปรับขนาด Video Player
  2. Autoplay วิดีโอ
  3. Loop วิดีโอแบบไม่มีที่สิ้นสุด

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

ฝังวิดีโอด้วย HTML5 Video Element

เพื่อแสดงวิดีโอ MP4 ใน HTML ต้องใช้ Element <video> HTML5 รูปแบบง่ายที่สุด:

<video width="500" controls> <source src="path-to-your-video.mp4" type="video/mp4" /> </video>

สามารถลบ controls ได้ แต่ไม่แนะนำ เพราะมันคือสิ่งที่ให้ผู้ใช้ Pause/Play/Rewind ได้

ค่า 500 วัดเป็น Pixel (500px)

แทนที่ "path-to-your-video.mp4" ด้วย Source จริง ใช้ตัวนี้ทดสอบ (จากบทความของผม):

https://res.cloudinary.com/techstacker/video/upload/f_auto/v1548698438/TechStacker/mac-drag-app-icon-to-dock.mp4

ปรับขนาด Video Player (Width/Height)

วิดีโอตอนนี้ Width 500px เปลี่ยนเป็นค่าไหนก็ได้ หากต้องการ 100% ของพื้นที่สัมพัทธ์ (Container ที่ Video อยู่) ใช้ width="100%"

ปรับ Height ด้วยแอตทริบิวต์ height ตัวอย่างทั้งคู่:

<video width="100%" height="400" controls> <source src="path-to-your-video.mp4" type="video/mp4" /> </video>

Autoplay วิดีโอ (ครั้งเดียว)

เพื่อ Autoplay MP4 ครั้งเดียว ครั้งแรกที่ผู้ใช้เห็นวิดีโอ ให้เพิ่ม Property autoplay บน Video Element:

<video width="500" controls autoplay> <source src="path-to-your-video.mp4" type="video/mp4" /> </video>

Autoplay ทำงานอย่างไร

Autoplay จะ Trigger อัตโนมัติเมื่อวิดีโอเข้ามาใน Viewport หน้าจอของผู้ใช้

Loop วิดีโอ

เพื่อ Loop (เล่นวน) MP4 ใน HTML5 ใช้แอตทริบิวต์ loop:

<video width="500" controls autoplay loop> <source src="path-to-your-video.mp4" type="video/mp4" /> </video>

Note: controls ให้ผู้ใช้ Pause/Stop ได้ แต่ Loop วิดีโออาจรบกวน โดยเฉพาะถ้ามีเสียง ใช้ Loop เฉพาะกรณีที่เหมาะสม

Browser Support

ยุคเบราว์เซอร์เก่าเกือบจบ แตสำหรับเบราว์เซอร์ที่ไม่รองรับ Video Element ใส่ข้อความระหว่างแท็ก <video> แจ้งผู้ใช้:

<video width="500" controls autoplay> <source src="path-to-your-video.mp4" type="video/mp4" /> Your browser is outdated, update it to display the video </video>

ข้อความจะแสดงเฉพาะเบราว์เซอร์เก่า (ต่ำกว่า Internet Explorer 9)

ใช้ WebM พร้อม MP4 Fallback

หากมีทั้ง WebM และ MP4 ใช้โค้ดนี้ ให้ MP4 เป็น Fallback หากเบราว์เซอร์ไม่รองรับ WebM:

<video width="500" controls> <source src="path-to-your-video.webm" type="video/webm" /> <source src="path-to-your-video.mp4" type="video/mp4" /> </video>

Note: ณ ตอนนี้ Chrome และ Opera รองรับ WebM เต็มที่ Firefox และ Edge กำลัง implement

Bonus Tip

เครื่องมือฟรีบันทึก MP4:

  • The Kap app (Mac)
  • Icecream Screen Record (Windows)

อัปโหลดและเก็บวิดีโอฟรี แนะนำ Cloudinary