02 How to create a basic HTML5 webpage

The only tags required to make a HTML5 web page are listed below. All other HTML tags fit within this structure, normally within the body tag. The HTML5 <video> tag is also included in the body tag.

<!DOCTYPE html>
<html>
<head>
<title>My HTML5 Page</title>
</head>
<body>

<p>Webpage content such as text, images and video go here</p>

</body>
</html>

Create the video tag and link the video

Before adding an HTML5 encoded video into a webpage, videos will need to be HTML5 encoded and a link added to the video on the HTML5 webpage.

The following sections will provide instructions on:

creating an HTML5 encoded video
creating an entire HTML5 web page that includes a link to a video.

How to create HTML5 encoded video

Step 1

Choose a video to add to the page.
Rename the file to something simple (for this example the video will be referred to as html5videoex).
Convert this file into 2 different formats, so you will have two video files created from the original source file html5videoex:

html5videoex.mp4
html5videoex.webm

Creating a WebM Video

To convert video files to WebM format, try any of the software found here:
http://www.webmproject.org/tools/#non-commercial-webm-tools *

NOTE* The software in this site contains some tools which are web based and are therefore not tied to a single computer operating system.

After testing software, the results in this project show that Firefogg is a suitable tool.

http://firefogg.org

A video example of using Firefogg to convert files to the WebM format can be found here:
ttp://www.youtube.com/watch?v=UyhXlLIV1vY

Creating a MP4 video

The results from this project show that Handbrake* (or any other MP4 convertor including iTunes and QuickTime) is a useful tool for creating an MP4 video. Handbrake is available on Mac OSX and Windows and is free.

NOTE*: In some applications (ie Handbrake) there is an option to choose the format of the final file type. In this case MP4 should be selected and H.264 should be selected from the video codec section. These are the default options in Handbrake but may not be in other software.

http://handbrake.fr/

A video example of using Handbrake to convert video to the MP4 (H.264) format can be found here:
http://www.youtube.com/watch?v=IJqLwRoZy1A

Step 2

This step involves setting up a website folder where videos can be stored along with all other media and documents for the webpage.

Create a folder named ‘website’ to store the videos and any webpages etc.

Place the formatted videos html5videoex.mp4 and html5videoex.webm into the ‘website’ folder

Links to the completed video files and website folder can be found at the bottom of the page.

Step 3

This step involves creating a web page in your favourite development software or text editor.

Use the HTML mark-up below to make a valid HTML5 web page.

<!DOCTYPE html>
<html>
<head>

<title>My HTML5 Video Page</title>

</head>
<body>
</body>
</html>

Save the file as html5video.htm into the ‘website’ folder where you stored the correctly formatted video.

In the ‘website’ folder you should now have:

html5video.htm
html5videoex.webm
html5videoex.mp4

Step 4

This step involves adding the video to the webpage.

Open the html5video.htm file
Place the HTML mark-up* below, between the opening and closing body tags:

NOTE* Always put the MP4 video first. Some Apple devices at the time of writing only process the first source tag. If the MP4 is at the bottom of the list it may not play in iOS devices such as iPad.

<body>

<video width="640" height="360" controls="controls">

<source src="html5videoex.mp4" type="video/mp4" />
<source src="html5videoex.webm" type="video/webm" />
Your browser does not support video, please take this opportunity to download a new browser.
</video>

</body>

Save the changes made to the html5video.htm file and open it in a browser.*

NOTE* If your video looks distorted adjust the width and height attributes in the video tag to your video dimensions.

Video doesn’t work

If the video doesn’t work, check all of the following:

the file path to the video is incorrect (Check the file path and amend if needed)
review the HTML mark-up coding for inconsistencies
if you see the “your browser does not support video…” text you are using an older browser that needs to be upgraded (instructions on how to supply video to older browsers will be provided in following posts).

The video did work, so what is it doing?

Firstly the browser detects the <video> tag and then looks for the <source> tag. The <source> tag tells the browser where to find the video. If the browser does not know how to process the first video, in this case the MP4 video file, it will move on to the second <source> tag and use that.

Some older browsers may not understand the <video> tag at all so the movie won’t work despite there being several sources. In this case there is the option to fall back to flash.

Accessible HTML5 video for all
How to create a basic HTML5 webpage
Fall back to Flash
Current HTML5 subtitle support
Subtitle creation process
Link subtitles to video
Making subtitles work now
A Flash solution
Making it work now, on an Android device
Making it work now, on an Apple device
Thoughts on HTML5 video and subtitles - conclusion

Learning Development - Kangan Institute

Tuesday, 22 May 2012