Đối tượng video DOM HTML trong HTML đại diện cho phần tử
Tạo phần tử
var videoObject = document.createElement(“VIDEO”)
Đây, “videoObject” có thể có các thuộc tính sau -
| Thuộc tính | Mô tả |
|---|---|
| audioTracks | Trả lời một đối tượng AudioTrackList đại diện cho các audiotrack có sẵn |
| tự động phát | Itsets / trả về liệu video có nên bắt đầu phát ngay khi vừa mới phát hay không |
| được lưu vào bộ đệm | Trả lời một đối tượng TimeRanges đại diện cho các phần được lưu trong bộ đệm của avideo |
| bộ điều khiển | Trả về đối tượng MediaController đại diện cho bộ điều khiển trung bình hiện tại của video |
| điều khiển | Itsets / trả về liệu video có hiển thị các điều khiển hay không (phát / tạm dừng, v.v.) |
| crossOrigin | Itsets / trả về cài đặt CORS của video |
| currentSrc | Trả lại URL của video hiện tại |
| currentTime | Itsets / trả về vị trí phát lại hiện tại trong video (tính bằng giây) |
| defaultMuted | Itsets / trả về việc có nên tắt tiếng video theo mặc định hay không |
| defaultPlaybackRate | Itsets / trả về tốc độ phát lại mặc định của video |
| thời lượng | Trả về thời lượng của video (tính bằng giây) |
| đã kết thúc | Quay lại xem quá trình phát lại video đã kết thúc chưa |
| lỗi | Trả lời một đối tượng MediaError đại diện cho trạng thái lỗi của video |
| chiều cao | Itsets / trả về giá trị của thuộc tính height của video |
| vòng lặp | Itsets / trả về việc video có nên bắt đầu phát lại hay không mỗi khi kết thúc |
| mediaGroup | Itsets / trả về tên của nhóm phương tiện mà (các) video là một phần |
| bị tắt tiếng | Itsets / trả về việc có nên tắt âm thanh của video hay không |
| networkState | Trả về trạng thái mạng hiện tại của video |
| bị tạm dừng | Trả lời xem video có bị tạm dừng hay không |
| phát lại | Itsets / trả về tốc độ phát lại video |
| đã chơi | Quay lại đối tượng TimeRanges đại diện cho các phần đã phát của video |
| người đăng | Itsets / trả về giá trị của thuộc tính áp phích của video |
| tải trước | Itsets / trả về giá trị của thuộc tính tải trước của video |
| readyState | Quay lại trạng thái sẵn sàng hiện tại của video |
| có thể tìm kiếm | Trả lời một đối tượng TimeRanges đại diện cho các phần có thể tìm kiếm của avideo |
| đang tìm kiếm | Trả lời xem người dùng hiện đang tìm kiếm trong video hay không |
| src | Itsets / trả về giá trị của thuộc tính src của video |
| startDate | Trả lời đối tượng Ngày biểu thị khoảng thời gian hiện tại |
| textTracks | Trả lời một đối tượng TextTrackList đại diện cho các texttracks có sẵn |
| videoTracks | Quay lại đối tượng VideoTrackList đại diện cho các videotrack có sẵn |
| khối lượng | Itsets / trả về âm lượng của video |
| width | Itsets / trả về giá trị của thuộc tính width của video |
Hãy để chúng tôi xem ví dụ về một trong các thuộc tính, tức là HTML DOM Video networkState tài sản -
Ví dụ
<!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> Đầu ra
Nhấp vào ‘Nhận trạng thái mạng’ nút không có nguồn được xác định &inus;
Nhấp vào ‘Nhận trạng thái mạng’ với nguồn được xác định nhưng trình duyệt tải xuống dữ liệu -
Ngoài ra, “videoObject” có thể có các phương pháp sau -
| Phương pháp | Mô tả |
|---|---|
| addTextTrack () | Thêm đoạn văn bản mới vào video |
| canPlayType () | Kiểm tra xem trình duyệt có thể phát loại video được chỉ định hay không |
| load () | Nó hiển thị phần tử video |
| play () | Tôi đã sử dụng để bắt đầu phát lại video |
| pause () | Tôi đã từng tạm dừng một video đang phát |
Hãy để chúng tôi xem một ví dụ về Video canPlayType () tài sản -
Ví dụ
<!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> Đầu ra
Trước khi nhấp vào ‘Trình duyệt có hỗ trợ video / mp4?’ nút -
Sau khi nhấp vào ‘Trình duyệt có hỗ trợ video / mp4’ nút -
