HTML5 Video Exercise

Write HTML code to embed the following video in your web document.

Suppose the video source is -

http://www.etutorialspoint.com/images/animation.webm

Solution

HTML5 provides video element to embed video in web page. Prior to HTML5, we are using third party plug-ins, like - Flash, Microsoft Silverlight, etc to play video on the browser. HTML5 provides a standard way to include video with several attributes which improve its default behavior.

This is the following HTML5 code to embed the given video -

<video width="400" height="350" poster="video/rabbit.jpg" controls>
	<source src="video/animation.mp4" type="video/mp4" />
	<source src="video/animation.webm" type="video/webm" />
	<source src="video/animation.ogg" type="video/ogg" />	
	Your browser does not support the embedded HTML5 video element.
</video>

Output of the above code

In the above code, width and height attributes specify the width and height of the video element, the poster frame is shown on a video frame until the user clicks the play button and the source attribute contains different types of video formats to support in different browsers and devices.

Next Exercise >>