ออบเจ็กต์วิดีโอ HTML DOM ใน HTML แสดงถึงองค์ประกอบ
การสร้าง องค์ประกอบ
var videoObject = document.createElement(“VIDEO”)
ที่นี่ “videoObject” สามารถมีคุณสมบัติดังต่อไปนี้ −
| คุณสมบัติ | คำอธิบาย |
|---|---|
| audioTracks | ส่งคืนออบเจ็กต์ AudioTrackList ที่แสดงไฟล์เสียงที่มีอยู่ |
| เล่นอัตโนมัติ | Itsets/returns ว่าวิดีโอควรเริ่มเล่นทันทีที่พร้อมหรือไม่ |
| บัฟเฟอร์ | คืนค่าออบเจ็กต์ TimeRange ที่แสดงส่วนที่บัฟเฟอร์ของวิดีโอ |
| คอนโทรลเลอร์ | ส่งคืนวัตถุ MediaController ที่แสดงตัวควบคุมสื่อปัจจุบันของวิดีโอ |
| ตัวควบคุม | Itsets/returns ว่าวิดีโอควรมีการควบคุมหรือไม่ (เล่น / หยุดชั่วคราว ฯลฯ ) |
| crossOrigin | Itsets/returns การตั้งค่า CORS ของวิดีโอ |
| currentSrc | ส่งคืน URL ของวิดีโอปัจจุบัน |
| currentTime | Itsets/returns ตำแหน่งการเล่นปัจจุบันในวิดีโอ (เป็นวินาที) |
| defaultMuted | Itsets/returns ว่าควรปิดเสียงวิดีโอโดยค่าเริ่มต้นหรือไม่ |
| defaultPlaybackRate | Itsets/returns ว่าความเร็วในการเล่นเริ่มต้นของวิดีโอ |
| duration | ส่งคืนความยาวของวิดีโอ (เป็นวินาที) |
| สิ้นสุดแล้ว | ส่งคืนว่าการเล่นวิดีโอสิ้นสุดลงหรือไม่ |
| ข้อผิดพลาด | ส่งคืนวัตถุ MediaError ที่แสดงสถานะข้อผิดพลาดของวิดีโอ |
| ความสูง | Itsets/returns ค่าของแอตทริบิวต์ความสูงของวิดีโอ |
| ลูป | Itsets/returns ว่าวิดีโอควรเริ่มเล่นซ้ำอีกครั้งหรือไม่ ทุกครั้งที่เล่นจบ |
| mediaGroup | Itsets/returns ชื่อของกลุ่มสื่อที่วิดีโอเป็นส่วนหนึ่งของ |
| ปิดเสียง | Itsets/returns ว่าควรปิดเสียงวิดีโอหรือไม่ |
| networkState | คืนค่าสถานะเครือข่ายปัจจุบันของวิดีโอ |
| หยุดชั่วคราว | แสดงผลว่าวิดีโอถูกหยุดชั่วคราวหรือไม่ |
| playbackRate | Itsets/returns ความเร็วในการเล่นวิดีโอ |
| เล่นแล้ว | คืนค่าออบเจ็กต์ TimeRange ที่แสดงส่วนที่เล่นของวิดีโอ |
| โปสเตอร์ | Itsets/returns ค่าของแอตทริบิวต์โปสเตอร์ของวิดีโอ |
| โหลดล่วงหน้า | Itsets/returns ค่าของแอตทริบิวต์พรีโหลดของวิดีโอ |
| readyState | คืนค่าสถานะพร้อมปัจจุบันของวิดีโอ |
| ค้นหาได้ | คืนค่าออบเจ็กต์ TimeRange ที่แสดงส่วนที่ค้นหาได้ของวิดีโอ |
| กำลังค้นหา | ส่งคืนว่าผู้ใช้กำลังมองหาในวิดีโอหรือไม่ |
| src | Itsets/returns ค่าของแอตทริบิวต์ src ของวิดีโอ |
| startDate | คืนค่าออบเจ็กต์ Date ที่แสดงออฟเซ็ตเวลาปัจจุบัน |
| textTracks | คืนค่าออบเจ็กต์ TextTrackList ที่แสดงข้อความแทร็กที่มีอยู่ |
| videoTracks | ส่งคืนออบเจ็กต์ VideoTrackList ที่แสดงถึง videotracks ที่มีอยู่ |
| ระดับเสียง | Itsets/returns ระดับเสียงของวิดีโอ |
| ความกว้าง | Itsets/returns ค่าของแอตทริบิวต์ 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="http://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 = 'http://www.tutorialspoint.com/html5/foo.mp4';
function getTrackDetails() {
divDisplay.textContent = 'Network State: '+demo.networkState;
}
function setTrackDetails() {
demo.src = srcOfMedia;
demo.load();
}
</script>
</body>
</html> ผลลัพธ์
คลิก 'รับสถานะเครือข่าย' ปุ่มที่ไม่มีการกำหนดแหล่งที่มา &inus;
คลิก 'รับสถานะเครือข่าย' ปุ่มที่กำหนดแหล่งที่มาแต่เบราว์เซอร์กำลังดาวน์โหลดข้อมูล -
นอกจากนี้ “videoObject” สามารถมีวิธีการดังต่อไปนี้ −
| วิธีการ | คำอธิบาย |
|---|---|
| addTextTrack() | มันเพิ่มแทร็กข้อความใหม่ให้กับวิดีโอ |
| canPlayType() | ตรวจสอบว่าเบราว์เซอร์สามารถเล่นประเภทวิดีโอที่ระบุได้หรือไม่ |
| โหลด () | มันแสดงผลองค์ประกอบวิดีโอ |
| 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 = 'http://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> ผลลัพธ์
ก่อนคลิก 'เบราว์เซอร์รองรับวิดีโอ/mp4 หรือไม่' ปุ่ม −
หลังจากคลิก ‘เบราว์เซอร์รองรับวิดีโอ/mp4 หรือไม่’ ปุ่ม −
