Adding videos to HTML pages

Add an h2 saying Video to media.html.  Download this video and save it in the same folder as your Web pages

Put this code under the Video heading in media.html:

<video width="640" height="360" controls>
    <source src="meaningless.mp4" type="video/mp4">
    Your browser seems to be struggling - maybe get a newer one (they are free).
</video>

The video tags make up the video element.  The opening tag has an attribute for the width of the video and one for height.  The attribute controls tells it to display the play controls.  This attribute does not need a value (the attribute on it's own is the equivalent of controls="yes").

Inside the video element is a source tag which has no matching closing tag.  The source element contains a src attribute pointing to the video file just like an image does.  The line of text underneath will appear only if the browser does not understand the video element.  Browsers are happy to ignore things they do not recognise and just show what they do.  If the browser does recognise the video element it will also know not to display the text.

Compatibility

There is no absolutely safe format of video file which will work in every browser.  The one above is the most widely supported (mp4 files encoded with the h264 codec are the closest to a standard for Web video but there are some licensing issues).  So, if your browser did not show the video you are about to learn how to fix that.

You can use the video element with more than one source to provide more than one video format in the hope that the browser recognises at least one of them.  Some browsers may not understand mp4 files so you can provide .ogg files or .webm files as well.  The attraction of the other two formats is that they are open source so use at least one of them as a first option when you can like this:

<video width="640" height="360" controls>
    <source src="meaningless.ogv" type="video/ogg">
    <source src="meaningless.mp4" type="video/mp4">
    <source src="meaningless.webm" type="video/webm">

    Your browser seems to be struggling - maybe get a newer one (they are free).
</video>

You would need to convert or download video into ogg and webm formats and put those files into the folder with your pages for them to work.

Video element in a Web page