☰

After going through the previous chapter now you may have familiarity with HTML5 Geolocation. Now in this chapter we will learn about the HTML5 Video Dom.

HTML5 Video Dom

Video Dom is such an enhanced feature, which make video playing more reliable and user friendly. With the help of Video Dom now you can customize the Video playing, as we can add additional buttons to play, stop, resize and many more.

Supported Browser
html5 tutorial html5 tutorial html5 tutorial html5 tutorial html5 tutorial

Below is complete syntax along with example


<!DOCTYPE html>

<html>
	
    <head>
    	 <title>Title name will go here</title>
    </head>
    
    <body>
		
		<video width="500" height="375" id="video1">
			
			<source src="media/sample_video.mp4" type="video/mp4" />
			<source src="your ogg media file name" type="video/ogg" />
			Your browser does not support the video tag.
		
		</video>				
		
		<button onclick="playPause()">Play/Pause</button>
		<button onclick="makeBig()">Big</button>
		<button onclick="makeSmall()">Small</button>
		<button onclick="makeNormal()">Normal</button>

		<script type="text/javascript">
				
			var myVideo=document.getElementById("video1");
			function playPause()
			{
				if (myVideo.paused)
				myVideo.play();
				else
				myVideo.pause();
			}

			function makeBig()
			{
				myVideo.width=530;
			}

			function makeSmall()
			{
				myVideo.width=320;
			}
			
			function makeNormal()
			{
				myVideo.width=420;
			}
			
		</script>
		        
    </body>
    
</html>

Download


HTML5 Elements — Quick References