In order to create HTML5 video page, we need to create video file itself. There are many different video file formats and HTML5 can work pretty much with all of them. However, there are video file types that work more effective with HTML5 video tag.
Our recommendation is to use one of the following types: H.264: .mp4 or .mov. MPEG-4 is quite popular these days and if you can create video file in .mp4 format that would be sufficient for our task. There are other HTML5 codec formats supported by various browsers.
Let’s begin coding by setting up our HTML5 boilerplate file and adding the HTML5 video tag with its src and preload attributes set to specific values.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>My video File Sample Code</title>
</head>
<body>
<video src="myVideoFile.mp4"
preload="auto"></video>
</body>
</html>
Next step in our process is to save this file to your local drive and test it on one of the browser’s supporting the HTML5 video tag.
Viewing MyVideoFile.mp4 on Safari browser
Download HTML5 Video Tag sample code: 