ในตัวของ HTML5 นั้น ได้มีแท็กสำหรับเล่นไฟล์เสียงหรือ Audio และวิดีโอนอกจากนี้ยังสามารถให้เราควบคุมการเล่นมัลติมีเดีย ไม่ว่าจะเป็นการเล่น หยุด กรอไปข้างหน้า ย้อนกลับ และอื่น ๆ แต่ข้อสังเกตในการใช้แท็กนี้เราต้องดูเบราเซอร์ว่ามันรับรองหรือไม ในการใส่แท็กเสียงและวิดีโอ การเลือกฟอร์แมตของไฟล์ที่สนับสนุน รวมไปการใช้ javascript เพื่อไปในการควบคุมไฟล์เล่นวิดีโอหรือไฟล์เสียงนั้นเอง
วิดีโอของ HTML5
โดยยุกแรก ๆ นั้หากเราต้องการที่จะแทรกตัวของวิดีโอลงในเว็บเพจ เราจะต้องมาติดตั้งปลั๊กอินหรือตัวเสริมลงเบราว์เซอร์ แต่ช่วงในหลายปีต่อมาก็มีปรับมาใช้พวก Flash, Quicktime และอื่น ๆ มากขึ้น
ในการเล่นวิดีโอโดยใช้แค่ HTML5 ก็มีการเริ่มใช้ในปี 2007 ในเว็บบราว์เซอร์อย่าง Opera ได้มีการเสนอใช้แท็ก <video> ที่ช่วยในการเล่นของตัววิดีโอบนเว็บเพจได้โดยไม่ต้องมาติดตั้งปลั๊กอิน หรือตัวเสริมต่าง ๆ บนเบราว์เซอร์เลย จากนั้มามีเบราว์เซอร์อื่น ๆ ต่างมาหันสนับสนุนใช้แท็ก <video> ได้
การใช้แท็ก <video>
การเล่นวิดีโอบนเว็บเพจ สามารถกำหนดแท็ก <video> โดยระบุไฟล์ที่ถูกเก็บเอาไว้ที่ใดที่หนึ่ง ซึ่งในการแท็กนี้จะต้องมีตัวกับตัวปิด ก็คือ <video>...</video> โดยเราใช้ src เพื่อเลือกตัววิดีโอที่จะนำมาแสดง และใช้ controls เพื่อกำหนดว่าจะให้แสดงการควบคุมหรือไม่
รูปแบบการใช้แท็ก <video>
<video src="/" controls="controls"></video>ตัวอย่างการใช้แท็ก <video>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="/video.mp4" controls="controls" style="width: 650px; "></video>
</body>
</html>ผลลัพธ์ที่ได้
การใช้งาน preload
preload เป็นการสั่งให้โหลดวิดีโอไปพร้อมกัน ๆ กับโหลดเว็บเพจ ทำให้ผู้ใช้งานสามารถเปิดวิดีโอได้รวดเร็วยิ่งขึ้น
รูปแบบ
<video src="#" preload="..."></video>เราสามารถกำหนดค่าได้ 3 แบบ จะมีดังนี้
| กำหนดค่าใน preload | คำอธิบาย |
| none | ไม่ต้องอัปโหลดวิดีโออัตโนมัติเวลาที่โหลดเว็บเพจ |
| auto | ให้ตรวจสอบความเร็วอุปกรณ์และความเร็วของการเชื่อมผ่านทางอินเทอร์เน็ต |
| metadata | โหลดเฉพาะคุณสมบัติบางอย่างของวิดีโอ เช่น โหลดเฟรมแรก ความยาวของตัววิดีโอ และอื่น ๆ เพื่อบอกให้เราควรเตรียมพื้นที่เท่าไรสำหรับการเล่นวิดีโอนั้น ๆ |
ข้อแนะนำ ถ้าในเว็บเพจจะเล่นวิดีโอเป็นหลัก ๆ ของ Youtube ควรกำหนดค่าเป็น auto แต่เว็บเพจทั่วไปนั้น ที่ไม่ได้เน้นเรื่องของวิดีโอให้ค่า none เพื่อลดภาวะของเซิร์ฟเวอร์ได้
เล่นอัตโนมัติ autoplay
autoplay เป็นการสั่งเล่นวิดีโออัตโนมัติ
รูปแบบ
<video src="#" controls="controls" autoplay></video>
เล่นวงซ้ำ loop
loop เป็นการสั่งให้วิดีโอวงซ้ำหลังจากเล่นวิดีโอจบแล้ว
รูปแบบ
<video src="#" controls="controls" loop></video>แสดงภาพตัวอย่าง poster
ในตัว HTML5 นั้นเราสามารถใช้ poster เพื่อให้แสดงภาพตัวอย่างของวิดีโอนั้นได้ แต่ภาพที่เอามาใส่นี้ ภาพจะต้องมีขนาดกว้างและยาวเท่าตัววิดีโอนั้น ๆ
<video src="#" controls="controls" poster="/ใส่ลิงก์รูปภาพ"></video>
เสียงใน HTML5
เสียงใน HTML5 นั้นก็จะมีการใช้งานคล้ายกับวิดีโอ แต่ต่างที่เสียงจะไม่มีคุณสมบัติในการควบคุมภาพ เช่น การใส่ภาพตัวอย่าง กว้างกีบยาวของภาพ เป็นต้น
การใช้แท็ก <audio>
การแทรกเสียงไฟล์เสียง เราสามารถทำได้ง่าย ๆ ด้วยการกำหนดแท็ก <audio> โดยเราจะใช้ src ในการอ้างอิงตำแหน่งไฟล์เสียงนั้น ๆ และใช้ controls เพื่อกำหนดว่าจะให้แสดงการควบคุมหรือไม่
รูปแบบ
<audio src="/" controls="controls"></audio>ตัวอย่างการใช้แท็ก <audio>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="/โลกที่ไม่มีเธอ เปียโน.mp3" controls="controls"></audio>
</body>
</html>ผลลัพธ์ที่ได้
สรุปคือ ในตัว HTML5 นั้นได้เพิ่มแท็กที่เอาไว้ใส่ไฟล์เสียงกับไฟล์วิดีโอ โดยเราไม่นั่งติดตั้งโปรแกรมเสริมหรือโหลดปลั๊กอินให้ไฟล์วิดีโอและเสียงทำงานได้ ซึ่งเป็นข้อดีของ HTML5 ในการตกแต่งเว็บเพจของเราได้ และยังให้เว็บไซต์ของเราดูมีความน่าสนใจมากยิ่งขึ้น
หากสนใจหรืออยากศึกษาของ HTML5 สามารถศึกษาได้ที่ ลิงก์ นี้เลย
อ้างอิง :
วิธีแทรกไฟล์เสียงลงในเว็บเพจ ,[ออนไลน์], เข้าถึงได้จาก https://km.cc.swu.ac.th/archives/3184
เสียง HTML5 HTML ,[ออนไลน์], เข้าถึงได้จาก https://hmong.in.th/wiki/HTML5_Audio
วิธีใช้ HTML5 Video ,[ออนไลน์], เข้าถึงได้จาก https://sites.google.com/site/bfeolyl150613/withi-chi-html5-video
