Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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: 21-Dec-2021
183 Views
Advertisements