HTML DOM Video Object

HTMLWeb DevelopmentFront 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>

Output

Before clicking ‘Does Browser Supports video/mp4?’ button −

After clicking ‘Does Browser Supports video/mp4’ button −

raja
Published on 30-Oct-2019 14:42:57
Advertisements