HTML Video

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

<video> Element ใช้เพื่อแสดงวิดีโอบนหน้าเว็บ

ตัวอย่าง

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="video/brand-hostatom.mp4" type="video/mp4">
</video>

<p>
วิดีโอโดย <a href="https://www.hostatom.com/" target="_blank">hostatom</a>
</p>

</body> 
</html>
ลองดูสิ ❱

<video> Element

แสดง video ใน HTML จะใช้ <video> Element

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="video/brand-hostatom.mp4" type="video/mp4">
</video>

</body>
</html>
ลองดูสิ ❱

การทำงาน

Attribute controls เพิ่มส่วนควบคุมวิดีโอ เช่น การเล่น/หยุดชั่วคราว และปรับระดับเสียง

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

<source> ช่วยให้คุณสามารถระบุไฟล์วิดีโอทางเลือกที่เบราว์เซอร์อาจเลือกได้ เบราว์เซอร์จะใช้รูปแบบแรกที่รู้จัก

ข้อความระหว่าง Tag <video> และ </video> จะแสดงเฉพาะในเบราว์เซอร์ที่ไม่สนับสนุน <video> Element

<video> Autoplay

หากต้องการเริ่มวิดีโอโดยอัตโนมัติ ให้ใช้ Attribute autoplay

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" autoplay>
  <source src="video/brand-hostatom.mp4" type="video/mp4">
</video>

</body>
</html>
ลองดูสิ ❱

หมายเหตุ: เบราว์เซอร์ Chromium ไม่อนุญาตให้เล่นอัตโนมัติในกรณีส่วนใหญ่ 
อย่างไรก็ตาม อนุญาตให้เล่นอัตโนมัติแบบปิดเสียงได้เสมอ

เพิ่ม muted หลัง autoplay เพื่อให้วิดีโอของคุณเริ่มเล่นโดยอัตโนมัติ (แต่ปิดเสียง):

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" autoplay muted>
  <source src="video/brand-hostatom.mp4" type="video/mp4">
</video>

</body>
</html>
ลองดูสิ ❱

การสนับสนุนเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับ <video> Element ทั้งหมด

ElementChromeEdgeFirefoxSafariOpera
<video>4.09.03.54.010.5

HTML Video Formats

มี 3 รูปแบบวิดีโอที่ที่รองรับคือ MP4, WebM และ Ogg แต่ละเบราว์เซอร์มีรองรับรูปแบบวิดีโอต่างๆ ดังนี้

เบราว์เซอร์MP4WebMOgg
Edgeรองรับรองรับรองรับ
Chromeรองรับรองรับรองรับ
Firefoxรองรับรองรับรองรับ
Safariรองรับรองรับไม่รองรับ
Operaรองรับรองรับรองรับ

สกุลไฟล์วิดีโอ

File FormatMedia Type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

HTML Video – Methods, Properties, and Events

HTML DOM กำหนดวิธีการ คุณสมบัติ และเหตุการณ์สำหรับ <video> Element

ซึ่งช่วยให้คุณโหลด เล่น และหยุดวิดีโอชั่วคราว ตลอดจนกำหนดระยะเวลาและระดับเสียง

นอกจากนี้ยังมีเหตุการณ์ DOM ที่สามารถแจ้งให้คุณทราบเมื่อวิดีโอเริ่มเล่น หยุดชั่วคราว เป็นต้น

ตัวอย่างการใช้ JavaScript

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br><br>
  <video id="video1" width="420">
    <source src="video/brand-hostatom.mp4" type="video/mp4">
  </video>
</div>

<script>
var myVideo = document.getElementById("video1");

function playPause() {
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}

function makeBig() {
    myVideo.width = 560;
}

function makeSmall() {
    myVideo.width = 320;
}

function makeNormal() {
    myVideo.width = 420;
}
</script>

<p>วิดีโอโดย <a href="https://www.hostatom.com/" target="_blank">hostatom</a></p>

</body>
</html>
ลองดูสิ ❱

HTML Video Tags

Tagคำอธิบาย
<video>ใช้ระบุวิดีโอ หรือ หนัง
<source>ใช้ระบุแหล่งข้อมูลของสื่อ เช่น <video> และ <audio>
<track>ใช้กำหนดแทร็กข้อความในเครื่องเล่นมีเดีย
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯