วิธีฝังวิดีโอ MP4 ใน HTML5 ด้วยการควบคุม

วันนี้ คุณจะได้เรียนรู้วิธีฝังวิดีโอ MP4 ใน HTML อย่างรวดเร็วโดยใช้ <video> องค์ประกอบ. ฉันจะครอบคลุมสิ่งต่อไปนี้:

1. วิธีปรับขนาดของโปรแกรมเล่นวิดีโอของคุณ
2. วิธีเล่นวิดีโอของคุณโดยอัตโนมัติ
3. วิธีการวนซ้ำวิดีโอของคุณอย่างไม่สิ้นสุด

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

ฝังวิดีโอด้วยองค์ประกอบวิดีโอ HTML5

หากต้องการแสดงวิดีโอ MP4 ใน HTML คุณต้องใช้ HTML5 <video> องค์ประกอบ. การใช้งานที่ง่ายที่สุดมีลักษณะดังนี้:

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

คุณสามารถลบ controls แต่ฉันไม่แนะนำเพราะมันทำให้ผู้ใช้สามารถหยุดชั่วคราว/เล่น/ย้อนกลับวิดีโอของคุณได้

500 ค่าถูกวัดเป็นหน่วยพิกเซล (500px)

เพียงแทนที่ "path-to-your-video.mp4" ด้วยแหล่ง MP4 จริง คุณสามารถใช้สิ่งนี้เพื่อทดสอบ (จากหนึ่งในบทช่วยสอนของฉัน)

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

ปรับขนาดโปรแกรมเล่นวิดีโอของคุณ (กว้าง/สูง)

ปัจจุบันวิดีโอของคุณมีความกว้าง 500 พิกเซล คุณสามารถเปลี่ยนค่านั้นได้ตามต้องการ หากคุณต้องการใช้พื้นที่สัมพัทธ์ 100% (คอนเทนเนอร์องค์ประกอบวิดีโอของคุณอยู่ภายใน) คุณสามารถเปลี่ยนเป็น width="100%" .

คุณยังสามารถปรับความสูงได้โดยใช้ height . นี่คือตัวอย่างการใช้งานทั้งสองแบบ:

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

เล่นวิดีโอของคุณโดยอัตโนมัติ (หนึ่งครั้ง)

ในการเล่นวิดีโอ MP4 ของคุณโดยอัตโนมัติครั้งเดียว ในครั้งแรกที่ผู้ใช้เห็นวิดีโอของคุณบนหน้าจอ ให้เพิ่ม autoplay คุณสมบัติบนองค์ประกอบวิดีโอ:

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

วิธีเล่นอัตโนมัติ

ฟังก์ชันเล่นอัตโนมัติจะทริกเกอร์โดยอัตโนมัติทันทีที่ผู้ใช้มีวิดีโออยู่ในวิวพอร์ตของหน้าจอ

วนซ้ำวิดีโอของคุณ

ในการวนซ้ำ (เล่นอย่างไม่สิ้นสุด) วิดีโอ MP4 ของคุณใน HTML5 ให้ใช้ loop แอตทริบิวต์:

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

หมายเหตุ: controls คุณลักษณะช่วยให้คุณสามารถหยุดชั่วคราว/หยุดวิดีโอได้ แต่อย่าลืมว่าวิดีโอวนซ้ำอาจสร้างความรำคาญได้ โดยเฉพาะกับเสียง ใช้แอตทริบิวต์ loop เมื่อเหมาะสมในกรณีการใช้งานเฉพาะ

รองรับเบราว์เซอร์

ยุคสมัยของเบราว์เซอร์ไดโนเสาร์เก่าใกล้จะหมดลงแล้ว แต่สำหรับเบราว์เซอร์ที่ไม่รองรับองค์ประกอบวิดีโอ คุณสามารถเพิ่มข้อความระหว่าง <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 ทางเลือก

หากคุณมีทั้งเวอร์ชัน WebM และ MP4 ของวิดีโอ คุณสามารถใช้โค้ดต่อไปนี้เพื่อใช้ MP4 เป็นทางเลือก หากเบราว์เซอร์ผู้ใช้ของคุณไม่รองรับ 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>

หมายเหตุ:ณ ตอนนี้ เฉพาะ Chrome และ Opera เท่านั้นที่รองรับ WebM อย่างสมบูรณ์ แต่ FireFox และ Edge ก็กำลังดำเนินการติดตั้งเช่นกัน

เคล็ดลับโบนัส

หากต้องการบันทึกวิดีโอ MP4 อย่างรวดเร็ว คุณสามารถใช้เครื่องมือฟรีเหล่านี้:

• แอป The Kap (Mac)
• บันทึกหน้าจอไอศกรีม (Windows)

หากต้องการอัปโหลดและจัดเก็บวิดีโอของคุณฟรี ฉันขอแนะนำ Cloudinary