ในยุคแรกๆ หากต้องการแทรกไฟล์วิดีโอลงในเว็บเพจ ต้องติดตั้งโปรแกรมเสริมหรือปลั๊กอินลงไปในบราวเซอร์ เช่น Real Player, Quicktime ต่อมาได้ปรับเปลี่ยนไปใช้ Flash, Quicktime หรือ Silverlight กันมากขึ้น
สำหรับการแทรกไฟล์วิดีโอลงใน HTML5 นั้นไม่จำเป็นต้องใช้โปรแกรมเสริมใดๆอีกต่อไปแล้ว เพราะใน HTML5 สามารถใช้แท็ก <video> ได้เลย ซึ่งรูปแบบไฟล์ที่สนับสนุนการใช้แท็กดังกล่าวมี 3 รูปแบบ คือ mp4, ogg และ WebM
การใช้แท็ก <video>
การเล่นไฟล์วิดีโอบนเว็บเพจ สามารถทำได้โดยใช้แท็ก <video> โดยระบุว่าไฟล์ถูกเก็บไว้ที่ไหน ซึ่งการใช้แท็ก <video> จะเริ่มต้นด้วยแท็ก <video> แล้วปิดด้วยแท็ก </video> แล้วใช้แอตตริบิวต์ที่ชื่อ src เพื่อเลือกว่าจะแสดงไฟล์วิดีโอใด และใช้แอตตริบิวต์ controls เพื่อกำหนดว่าจะให้แสดงแถบสำหรับควบคุมวิดีโอด้วยหรือไม่ ดังนี้
<video controls=”controls”>
<source src=”correct trumpet playing/trumpet_practice.mp4″ type=”video/mp4″ />
</video>
ตัวอย่างการแทรกไฟล์วิดีโอลงในเว็บเพจ
<!DOCTYPE html>
<html lang=”th”>
<head>
<title>วิดีโอใน HTML5</title>
<meta charset=”UTF-8″ />
</head>
<body>
<h3>ทดสอบวิดีโอบน HTML</h3>
<video controls=”controls”>
<source src=”correct trumpet playing/trumpet_practice.mp4″ type=”video/mp4″ />
</video>
</body>
</html>
ผลลัพธ์ที่ได้
Google chrome
Firefox
Microsoft Edge
