HTML5 lets you play the video directly without using any plugin like flash. Most of the modern browsers can only play and support the .ogg, .ogv and .mp4 video format. You can easily convert any other media extension like .avi, .mpeg, .mov to those types. Please go to http://www.mirovideoconverter.com/ to check this free video tool conversion.

Below is the example on how to add MIME type in IIS7/IIS7.5 under each website MIME Type section

So, how to use this video control in HTML5? Well it is relatively easy, you can just use the following syntax tag <video></video>. This tag is supported the following browsers: Chrome, Opera, Firefox, Internet Explorer 9 or above and Safari.

The following attributes are available in the video control properties.

• autoplay
• controls
• height
• loop
• poster
• preload
• source
• width
• onerror

autoplay

This attribute is used to determine whether the video will be auto play or not. The value for this attribute is true or false. Return to Video Attributes Index List.

controls

This attribute is used to determine whether you want to display the controls bar or not. The control bar in this case is the play/pause buttons that are located under the video. The value for this attribute is true or false. Return to Video Attributes Index List.

height

This attribute is used to determine the height of the video. The value for this attribute is numbers ex: 500. Return to Video Attributes Index List.

loop

This attribute is used to determine whether you want to keep the video over and over (looping). The value for this attribute is true or false. Return to Video Attributes Index List.

poster

This attribute is used to determine whether you show an image if a video you specify is not exists. The value for this attribute is the url path of the image. Return to Video Attributes Index List.

preload

This attribute is used to determine whether automatically load the video or not. The value for this attribute is auto, metadata, or none. Return to Video Attributes Index List.

source

This attribute is used to determine the source or path of the video. The value for this attribute is the location of the video path. Return to Video Attributes Index List.

width

This attribute is used to determine the width of the video. The value for this attribute is numbers ex: 500. Return to Video Attributes Index List.

onerror

This attribute is used to catch an error if there is an issue loading the video. Return to Video Attributes Index List.

Demo of Playing Video in HTML5

For below example, we compress the file as small as possible just for a demo purposes.

<video width="80%" height="450" onerror="checkStartup(event)" controls="true">
	<source src="/assets/content/files/html5/samplevideo.mp4" type="video/mp4">
	<source src="/assets/content/files/html5/samplevideo.ogv" type="video/ogg">
	HTML5 video is not supported by your browser.
</video>

/* we include a javascript that will check if there is an error or not */
<script type="text/javascript">
function checkStartup(e){
	switch (e.target.error.code) {
		case 
			e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
			alert("The video file is not supported.");
			break;
		case e.target.error.MEDIA_ERR_DECODE:
			alert("There is a decoding problem issue.");
			break;
		case e.target.error.MEDIA_ERR_NETWORK:
			alert("There is a network issue");
			break;
	}
}
</script>

Alternatively, you can create your own control by playing around with their properties. See below example that we use custom play and pause button. Remember you have to include an ID so we can use javascript to get the video object control.

See below source code on how to create your own control play button.

<video id="videodemo" width="80%" height="450" onerror="checkStartup(event)" controls="false">
	<source src="/assets/content/files/html5/new-zealand1.mp4" type="video/mp4">
	<source src="/assets/content/files/html5/new-zealand1.ogv" type="video/ogg">
	HTML5 video is not supported by your browser.
</video>
<div class="videocustomcontrols"><input id="btnplay" type="button" value="Play" class="buttoncontrol" /></div>

<script type="text/javascript">
	//function to check to play or pause the video
	function playMe(button) {
		//get the video object
		var objVideo = document.getElementById("videodemo");
		if (objVideo.paused) {
			objVideo.play();
			button.value = "Pause";
		} else {
			objVideo.pause();
			button.value = "Play";
		}
	}
</script>