How to Add Video to a Web Page

By David Karlins and Doug Sahlin from Building Websites All-in-One For Dummies, 3rd Edition

Adding video to a web page used to be hard. You’d have to deal with a specific video player, such as RealMedia Player, Windows Media Player, or QuickTime Player. The HTML5 format has a video tag, which enables you to add an .mp4 and a .webm video and controls to a web page.

The user’s browser determines which video plays when the HTML file is loaded. If you include both formats, you cover all the bases for HTML5 browsers.

To add video to an HTML5 document, follow the bouncing ball:

Encode a video in the .mp4 and .webm format.

The .webm format is brand-spanking new to HTML5.
Create an HTML5 document.

Of course, you may have other goodies in the page. Add them before adding the video to the page.
Switch to your HTML editor’s Code view.
Position your cursor where you want the video to appear and add the following code:
```
<video width=”320” height=”240” controls=”controls”>
<source src=”movie.mp4” type=”video/mp4” />
<source src=”movie.webm” type=”video/webm” />
Your browser does not support the video tag.
</video>
```
The first line of code specifies the dimensions of the video, and the fact that controls will be available for the video. The controls vary depending on the video format. The second and third lines of code specify the location of each video file, and the type.

The browser determines which video is played when the HTML document is loaded from the website. The final line of code is displayed if the visitor is using a browser that does not support HTML5 video.
Test the file in all browsers used by the site’s target audience.