Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Video Object
The HTML DOM Video Object in HTML represents the <video> element.
Creating a <video> element
var videoObject = document.createElement(“VIDEO”)
Here, “videoObject” can have the following properties −
| Property |
Description |
|---|---|
| audioTracks |
Itreturns an AudioTrackList object representing available audiotracks |
| autoplay |
Itsets/returns whether a video should start playing as soon as it isready |
| buffered |
Itreturns a TimeRanges object representing the buffered parts of avideo |
| controller |
Itreturns the MediaController object representing the current mediacontroller of a video |
| controls |
Itsets/returns whether a video should have controls displayed(play/pause etc) |
| crossOrigin |
Itsets/returns the CORS settings of a video |
| currentSrc |
Itreturns the URL of the current video |
| currentTime |
Itsets/returns the current playback position in a video (in seconds) |
| defaultMuted |
Itsets/returns whether the video should be muted by default |
| defaultPlaybackRate |
Itsets/returns whether the default playback speed of the video |
| duration |
Itreturns the length of a video (in seconds) |
| ended |
Itreturns whether the playback of the video has ended |
| error |
Itreturns a MediaError object representing the error state of thevideo |
| height |
Itsets/returns the value of the height attribute of a video |
| loop |
Itsets/returns whether the video should start playing over again,every time it is finished |
| mediaGroup |
Itsets/returns the name of the media group the video(s) is a part of |
| muted |
Itsets/returns whether the sound of a video should be turned off |
| networkState |
Itreturns the current network state of a video |
| paused |
Itreturns whether a video is paused or not |
| playbackRate |
Itsets/returns the speed of the video playback |
| played |
Itreturns a TimeRanges object representing the played parts of thevideo |
| poster |
Itsets/returns the value of the poster attribute of a video |
| preload |
Itsets/returns the value of the preload attribute of a video |
| readyState |
Itreturns the current ready state of a video |
| seekable |
Itreturns a TimeRanges object representing the seekable parts of avideo |
| seeking |
Itreturns whether the user is currently seeking in the video |
| src |
Itsets/returns the value of the src attribute of a video |
| startDate |
Itreturns a Date object representing the current time offset |
| textTracks |
Itreturns a TextTrackList object representing the available texttracks |
| videoTracks |
Itreturns a VideoTrackList object representing the available videotracks |
| volume |
Itsets/returns the audio volume of a video |
| width |
Itsets/returns the value of the width attribute of a video |
Let us see an example of one of the properties i.e. HTML DOM Video networkState property −
Example
<!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>
Output
Clicking ‘Get Network State’ button with no source defined &inus;
Clicking ‘Get Network State’ button with source defined but browser downloading data −
Also, “videoObject” can have the following methods −
| Method |
Description |
|---|---|
| addTextTrack() |
Itadds a new text track to the video |
| canPlayType() |
Itchecks whether the browser can play the specified video type ornot |
| load() |
Itre-renders the video element |
| play() |
Itis used to start playback of the video |
| pause() |
Itis used to pause a playing video |
Let us see an example of Video canPlayType() property −
Example
<!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>
Output
Before clicking ‘Does Browser Supports video/mp4?’ button −
After clicking ‘Does Browser Supports video/mp4’ button −
Updated on: 2021-12-21T09:02:57+05:30
289 Views
Advertisements