อ็อบเจกต์ Video ใน HTML DOM แทนองค์ประกอบ <video> ใน HTML
การสร้างองค์ประกอบ <video>
var videoObject = document.createElement("VIDEO")
ที่นี่ "videoObject" สามารถมีคุณสมบัติต่อไปนี้:
| คุณสมบัติ (Property) | คำอธิบาย |
|---|---|
| audioTracks | คืนค่าอ็อบเจกต์ AudioTrackList ที่แทนเสียงแทร็กที่มีอยู่ |
| autoplay | ตั้งค่า/คืนค่า ว่าวิดีโอควรเริ่มเล่นทันทีที่พร้อม |
| buffered | คืนค่าอ็อบเจกต์ TimeRanges ที่แทนส่วนที่ถูกบัฟเฟอร์ของวิดีโอ |
| controller | คืนค่าอ็อบเจกต์ MediaController ที่แทนคอนโทรลเลอร์สื่อปัจจุบันของวิดีโอ |
| controls | ตั้งค่า/คืนค่า ว่าวิดีโอควรแสดงควบคุม (play/pause ฯลฯ) หรือไม่ |
| crossOrigin | ตั้งค่า/คืนค่า การตั้งค่า CORS ของวิดีโอ |
| currentSrc | คืนค่า URL ของวิดีโอปัจจุบัน |
| currentTime | ตั้งค่า/คืนค่า ตำแหน่งเล่นปัจจุบันในวิดีโอ (วินาที) |
| defaultMuted | ตั้งค่า/คืนค่า ว่าวิดีโอควรถูกมิวตโดยค่าเริ่มต้น |
| defaultPlaybackRate | ตั้งค่า/คืนค่า ความเร็วเล่นเริ่มต้นของวิดีโอ |
| duration | คืนค่าความยาวของวิดีโอ (วินาที) |
| ended | คืนค่า ว่าการเล่นวิดีโอสิ้นสุดแล้วหรือไม่ |
| error | คืนค่าอ็อบเจกต์ MediaError ที่แทนสถานะข้อผิดพลาดของวิดีโอ |
| height | ตั้งค่า/คืนค่า ค่าของแอตทริบิวต์ height ของวิดีโอ |
| loop | ตั้งค่า/คืนค่า ว่าวิดีโอควรเล่นซ้ำอัตโนมัติเมื่อจบหรือไม่ |
| mediaGroup | ตั้งค่า/คืนค่า ชื่อกลุ่มสื่อที่วิดีโอเป็นส่วนหนึ่ง |
| muted | ตั้งค่า/คืนค่า ว่าเสียงของวิดีโอควรปิดหรือไม่ |
| networkState | คืนค่าสถานะเครือข่ายปัจจุบันของวิดีโอ |
| paused | คืนค่า ว่าวิดีโอถูกหยุดชั่วคราวหรือไม่ |
| playbackRate | ตั้งค่า/คืนค่า ความเร็วการเล่นของวิดีโอ |
| played | คืนค่าอ็อบเจกต์ TimeRanges ที่แทนส่วนที่เล่นแล้วของวิดีโอ |
| poster | ตั้งค่า/คืนค่า ค่าของแอตทริบิวต์ poster ของวิดีโอ |
| preload | ตั้งค่า/คืนค่า ค่าของแอตทริบิวต์ preload ของวิดีโอ |
| readyState | คืนค่าสถานะพร้อมปัจจุบันของวิดีโอ |
| seekable | คืนค่าอ็อบเจกต์ TimeRanges ที่แทนส่วนที่เลื่อนได้ของวิดีโอ |
| seeking | คืนค่า ว่าผู้ใช้กำลังเลื่อนตำแหน่งในวิดีโออยู่หรือไม่ |
| src | ตั้งค่า/คืนค่า ค่าของแอตทริบิวต์ src ของวิดีโอ |
| startDate | คืนค่าอ็อบเจกต์ Date ที่แทนออฟเซ็ตเวลาปัจจุบัน |
| textTracks | คืนค่าอ็อบเจกต์ TextTrackList ที่แทนเท็กซ์แทร็กที่มีอยู่ |
| videoTracks | คืนค่าอ็อบเจกต์ VideoTrackList ที่แทนวิดีโอแทร็กที่มีอยู่ |
| volume | ตั้งค่า/คืนค่า ระดับเสียงของวิดีโอ |
| width | ตั้งค่า/คืนค่า ค่าของแอตทริบิวต์ width ของวิดีโอ |
ลองดูตัวอย่างของคุณสมบัติหนึ่งคือ HTML DOM Video networkState:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <title>HTML DOM Video networkState</title> <style> * { padding: 2px; margin:5px; } form { width:70%; margin: 0 auto; text-align: center; } input[type="button"] { border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>HTML-DOM-Video-networkState</legend> <video id="demo" width="320" controls><source src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br> <input type="button" onclick="setTrackDetails()" value="Set Source"> <input type="button" onclick="getTrackDetails()" value="Get Network State"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var demo = document.getElementById("demo"); var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4'; function getTrackDetails() { divDisplay.textContent = 'Network State: '+demo.networkState; } function setTrackDetails() { demo.src = srcOfMedia; demo.load(); } </script> </body> </html>
ผลลัพธ์
คลิกปุ่ม 'Get Network State' โดยไม่มีการกำหนดแหล่งที่มา:
คลิกปุ่ม 'Get Network State' โดยมีแหล่งที่มากำหนด แต่เบราว์เซอร์กำลังดาวน์โหลดข้อมูล:
นอกจากนี้ "videoObject" ยังมีเมธอดต่อไปนี้:
| เมธอด (Method) | คำอธิบาย |
|---|---|
| addTextTrack() | เพิ่มเท็กซ์แทร็กใหม่ให้กับวิดีโอ |
| canPlayType() | ตรวจสอบว่าเบราว์เซอร์เล่นประเภทวิดีโอที่ระบุได้หรือไม่ |
| load() | เรนเดอร์ใหม่องค์ประกอบวิดีโอ |
| play() | ใช้เริ่มการเล่นวิดีโอ |
| pause() | ใช้หยุดชั่วคราววิดีโอที่กำลังเล่น |
ลองดูตัวอย่างของ Video canPlayType():
ตัวอย่าง
<!DOCTYPE html> <html> <head> <title>HTML DOM Video canPlayType()</title> <style> * { padding: 2px; margin:5px; } form { width:70%; margin: 0 auto; text-align: center; } input[type="button"] { border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>HTML-DOM-Video-canPlayType( )</legend> <video id="demo" width="320" controls><source src="" type="video/mp4"></video><br> <input type="button" onclick="getTrackDetails()" value="Does Browser Supports video/mp4?"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var demo = document.getElementById("demo"); var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4'; function getTrackDetails() { var ans = demo.canPlayType('video/mp4'); if(ans !== ''){ divDisplay.textContent = 'Browser supports mp4'; demo.src = srcOfMedia; demo.load(); } else divDisplay.textContent = 'Browser does not supports mp4'; } </script> </body> </html>
ผลลัพธ์
ก่อนคลิกปุ่ม 'Does Browser Supports video/mp4?':
หลังคลิกปุ่ม 'Does Browser Supports video/mp4':
