HTML5 - เสียงและวิดีโอ
คุณลักษณะ HTML5 รวมถึงการสนับสนุนเสียงและวิดีโอแบบเนทีฟโดยไม่ต้องใช้ Flash
แท็ก HTML5 <audio> และ <video> ทำให้การเพิ่มสื่อลงในเว็บไซต์เป็นเรื่องง่าย คุณต้องตั้งค่าsrc แอตทริบิวต์เพื่อระบุแหล่งที่มาของสื่อและรวมแอตทริบิวต์การควบคุมเพื่อให้ผู้ใช้สามารถเล่นและหยุดสื่อชั่วคราวได้
การฝังวิดีโอ
นี่คือรูปแบบที่ง่ายที่สุดในการฝังไฟล์วิดีโอในหน้าเว็บของคุณ -
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>ข้อกำหนดร่าง HTML5 ปัจจุบันไม่ได้ระบุว่าเบราว์เซอร์รูปแบบวิดีโอใดที่ควรรองรับในแท็กวิดีโอ แต่รูปแบบวิดีโอที่ใช้กันมากที่สุด ได้แก่ -
Ogg - ไฟล์ Ogg พร้อมตัวแปลงสัญญาณวิดีโอ Thedora และตัวแปลงสัญญาณเสียง Vorbis
mpeg4 - ไฟล์ MPEG4 พร้อมตัวแปลงสัญญาณวิดีโอ H.264 และตัวแปลงสัญญาณเสียง AAC
คุณสามารถใช้แท็ก <source> เพื่อระบุสื่อพร้อมกับประเภทสื่อและแอตทริบิวต์อื่น ๆ อีกมากมาย องค์ประกอบวิดีโอช่วยให้องค์ประกอบแหล่งที่มาหลายรายการและเบราว์เซอร์จะใช้รูปแบบแรกที่รู้จัก -
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ข้อกำหนดคุณสมบัติวิดีโอ
แท็กวิดีโอ HTML5 สามารถมีแอตทริบิวต์จำนวนมากเพื่อควบคุมรูปลักษณ์และฟังก์ชันต่างๆของการควบคุม -
| ซีเนียร์ | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | autoplay แอตทริบิวต์บูลีนนี้หากระบุไว้วิดีโอจะเริ่มเล่นโดยอัตโนมัติทันทีที่ทำได้โดยไม่ต้องหยุดเพื่อโหลดข้อมูลให้เสร็จสิ้น |
| 2 | autobuffer แอตทริบิวต์บูลีนนี้หากระบุไว้วิดีโอจะเริ่มบัฟเฟอร์โดยอัตโนมัติแม้ว่าจะไม่ได้ตั้งค่าให้เล่นโดยอัตโนมัติก็ตาม |
| 3 | controls หากมีแอตทริบิวต์นี้จะอนุญาตให้ผู้ใช้ควบคุมการเล่นวิดีโอรวมถึงระดับเสียงการค้นหาและหยุดเล่นชั่วคราว / เล่นต่อ |
| 4 | height แอตทริบิวต์นี้ระบุความสูงของพื้นที่แสดงผลของวิดีโอเป็นพิกเซล CSS |
| 5 | loop แอตทริบิวต์บูลีนนี้หากระบุไว้จะอนุญาตให้วิดีโอย้อนกลับไปที่จุดเริ่มต้นโดยอัตโนมัติหลังจากถึงจุดสิ้นสุด |
| 6 | preload แอตทริบิวต์นี้ระบุว่าวิดีโอจะโหลดเมื่อโหลดหน้าเว็บและพร้อมที่จะทำงาน ละเว้นหากมีการเล่นอัตโนมัติ |
| 7 | poster นี่คือ URL ของรูปภาพที่จะแสดงจนกว่าผู้ใช้จะเล่นหรือค้นหา |
| 8 | src URL ของวิดีโอที่จะฝัง นี่เป็นทางเลือก; คุณอาจใช้องค์ประกอบ <source> ภายในบล็อกวิดีโอแทนเพื่อระบุวิดีโอที่จะฝัง |
| 9 | width แอตทริบิวต์นี้ระบุความกว้างของพื้นที่แสดงผลของวิดีโอเป็นพิกเซล CSS |
การฝังเสียง
HTML5 รองรับแท็ก <audio> ซึ่งใช้เพื่อฝังเนื้อหาเสียงในเอกสาร HTML หรือ XHTML ดังต่อไปนี้
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>ข้อกำหนดร่าง HTML5 ปัจจุบันไม่ได้ระบุว่าเบราว์เซอร์รูปแบบเสียงใดที่ควรรองรับในแท็กเสียง แต่รูปแบบเสียงที่ใช้กันมากที่สุดคือogg, mp3 และ wav.
คุณสามารถใช้ <source & ggt; แท็กเพื่อระบุสื่อพร้อมกับประเภทสื่อและคุณลักษณะอื่น ๆ อีกมากมาย องค์ประกอบเสียงช่วยให้องค์ประกอบแหล่งที่มาหลายรายการและเบราว์เซอร์จะใช้รูปแบบแรกที่รู้จัก -
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ข้อกำหนดคุณสมบัติเสียง
แท็กเสียง HTML5 สามารถมีคุณลักษณะหลายอย่างเพื่อควบคุมรูปลักษณ์และฟังก์ชันต่างๆของการควบคุม -
| ซีเนียร์ | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | autoplay แอตทริบิวต์บูลีนนี้หากระบุไว้เสียงจะเริ่มเล่นโดยอัตโนมัติทันทีที่สามารถทำได้โดยไม่ต้องหยุดเพื่อโหลดข้อมูลให้เสร็จสิ้น |
| 2 | autobuffer แอตทริบิวต์บูลีนนี้หากระบุไว้เสียงจะเริ่มบัฟเฟอร์โดยอัตโนมัติแม้ว่าจะไม่ได้ตั้งค่าให้เล่นโดยอัตโนมัติก็ตาม |
| 3 | controls หากมีแอตทริบิวต์นี้จะอนุญาตให้ผู้ใช้ควบคุมการเล่นเสียงรวมถึงระดับเสียงการค้นหาและหยุดเล่นชั่วคราว / เล่นต่อ |
| 4 | loop แอตทริบิวต์บูลีนนี้หากระบุไว้จะอนุญาตให้เสียงย้อนกลับไปที่จุดเริ่มต้นโดยอัตโนมัติหลังจากถึงจุดสิ้นสุด |
| 5 | preload แอตทริบิวต์นี้ระบุว่าเสียงจะถูกโหลดเมื่อโหลดหน้าเว็บและพร้อมที่จะเรียกใช้ ละเว้นหากมีการเล่นอัตโนมัติ |
| 6 | src URL ของเสียงที่จะฝัง นี่เป็นทางเลือก; คุณอาจใช้องค์ประกอบ <source> ภายในบล็อกวิดีโอแทนเพื่อระบุวิดีโอที่จะฝัง |
การจัดการกิจกรรมสื่อ
แท็กเสียงและวิดีโอ HTML5 สามารถมีแอตทริบิวต์จำนวนมากเพื่อควบคุมฟังก์ชันต่างๆของการควบคุมโดยใช้ JavaScript -
| ส. | เหตุการณ์และคำอธิบาย |
|---|---|
| 1 | abort เหตุการณ์นี้ถูกสร้างขึ้นเมื่อการเล่นถูกยกเลิก |
| 2 | canplay เหตุการณ์นี้สร้างขึ้นเมื่อมีข้อมูลเพียงพอที่จะเล่นสื่อได้ |
| 3 | ended เหตุการณ์นี้สร้างขึ้นเมื่อการเล่นเสร็จสิ้น |
| 4 | error เหตุการณ์นี้ถูกสร้างขึ้นเมื่อเกิดข้อผิดพลาด |
| 5 | loadeddata เหตุการณ์นี้สร้างขึ้นเมื่อเฟรมแรกของสื่อโหลดเสร็จสิ้น |
| 6 | loadstart เหตุการณ์นี้สร้างขึ้นเมื่อการโหลดสื่อเริ่มต้นขึ้น |
| 7 | pause เหตุการณ์นี้สร้างขึ้นเมื่อหยุดเล่นชั่วคราว |
| 8 | play เหตุการณ์นี้สร้างขึ้นเมื่อการเล่นเริ่มต้นหรือเล่นต่อ |
| 9 | progress เหตุการณ์นี้ถูกสร้างขึ้นเป็นระยะเพื่อแจ้งความคืบหน้าของการดาวน์โหลดสื่อ |
| 10 | ratechange เหตุการณ์นี้สร้างขึ้นเมื่อความเร็วในการเล่นเปลี่ยนไป |
| 11 | seeked เหตุการณ์นี้ถูกสร้างขึ้นเมื่อการดำเนินการค้นหาเสร็จสิ้น |
| 12 | seeking เหตุการณ์นี้ถูกสร้างขึ้นเมื่อการดำเนินการค้นหาเริ่มต้นขึ้น |
| 13 | suspend เหตุการณ์นี้ถูกสร้างขึ้นเมื่อการโหลดสื่อถูกระงับ |
| 14 | volumechange เหตุการณ์นี้ถูกสร้างขึ้นเมื่อระดับเสียงเปลี่ยนไป |
| 15 | waiting เหตุการณ์นี้ถูกสร้างขึ้นเมื่อการดำเนินการที่ร้องขอ (เช่นการเล่น) ล่าช้าเนื่องจากการดำเนินการอื่นเสร็จสิ้น (เช่นการค้นหา) |
ต่อไปนี้เป็นตัวอย่างที่อนุญาตให้เล่นวิดีโอที่กำหนด -
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function PlayVideo() {
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<body>
<form>
<video width = "300" height = "200" src = "/html5/foo.mp4">
Your browser does not support the video element.
</video>
<br />
<input type = "button" onclick = "PlayVideo();" value = "Play"/>
</form>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
การกำหนดค่าเซิร์ฟเวอร์สำหรับประเภทสื่อ
โดยค่าเริ่มต้นเซิร์ฟเวอร์ส่วนใหญ่จะไม่ให้บริการสื่อ Ogg หรือ mp4 ด้วยประเภท MIME ที่ถูกต้องดังนั้นคุณอาจต้องเพิ่มการกำหนดค่าที่เหมาะสมสำหรับสิ่งนี้
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4