HTML Video

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

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

ตัวอย่าง

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="brand-hostatom.mp4" type="video/mp4">
 
  Your browser does not support HTML video.
</video>

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

</body> 
</html>

วิดีโอโดย hostatom.

<video> Element

To show a video in HTML, use the <video> element:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="brand-hostatom.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

</body>
</html>

การทำงาน

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

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

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

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

<video> Autoplay

หากต้องการเริ่มวิดีโอโดยอัตโนมัติ ให้ใช้ autoplay แอตทริบิวต์:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" autoplay>
  <source src="brand-hostatom.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

</body>
</html>

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

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

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" autoplay muted>
  <source src="brand-hostatom.mp4" type="video/mp4">
  Your browser does not support the video tag.
</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="brand-hostatom.mp4" type="video/mp4">
    Your browser does not support HTML video.
  </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>


วิดีโอโดย hostatom.

HTML Video Tags

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

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