HTML DOM Video Object

HTML Web Development Front End Technology

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>