Inserting video into a page has been made easier in HTML5 through the introduction of the video element. This enables video to be displayed without the need for third party plugins, such as Flash. However, things are not completely simple as browsers differ slightly as to which file formats they support. Also, fallback support needs to be provided for older browsers that do not recognise HTML5.
Video file formats compatible with HTML5 browsers:
Video files can be converted to other file types by using online converters or downloading an application such as Miro
Fallback methods
Fallback support is provided through the use of a Flash player. There are two approaches to this. One approach is to use the Flash plugin installed in the browser and provide a Flash compatible video file such as .flv or .swf. Another approach is to link to a Flash player such as Flow Player or JW Player which can then display the .mp4. This latter method does not require installing a plugin or providing the video in another file format (this is the method used further down the page).
HTML5 uses the <video> tag. This contains <source> tags which contain links to the video files. The video tag can contain a number of attributes. This particular example looks like this: <video width="640" height="360" controls poster="video/espresso.jpg">.
The width and height indicate the space allocation for the video on the page. The width scales the movie proportionally. Using width and height values different to the aspect ratio of the video will not distort it.
The controls attribute displays video playback controls.
The poster attribute displays an image prior to the video being played. If no image is provided then the first frame of the video is displayed.
The full code in this example:
<video width="640" height="360" controls poster="video/espresso.jpg">
<source src="video/espresso.mp4" type="video/mp4">
<source src="video/espresso.webm" type="video/webm">
<source src="video/espresso.ogv" type="video/ogg">
Your Browser does not support the video display
</video>
A browser will display the first compatible file in the list. The type attribute is file information for the browser. The text before the </video> tag will be displayed in non-HTML5 compliant browsers. In this case an option could be to provide download links to the files (see below).
More video attributes:
An attribute of preload can be used so the video downloads with the web page rather than on play. To play the video automatically use autoplay and loop to replay the video:
<video width="640" height="360" controls preload autoplay loop poster="video/espresso.jpg">.
Making the video responsive
The CSS for this is: video { width: 100%; height:auto; }.
The following are single video files inserted into the page. View in different browsers to check compatibility. These are displayed without a poster image.
Download video: MP4 format | WebM format | Ogg format
This version uses HTML5 video and a Flash player fallback option, which can display the .mp4 video file if the browser does not recognise HTML5. The fallback uses object and param elements contained within the video element. This calls in a Flash interface from flowpayer.org. The code for this fairly complex and was created with the help of the Video for Everybody Generator.
There is also an additional option to download the video if no video was displaying, for instance on older mobile operating systems.
Note: The URLs for the video file and poster image in the fallback code need to be absolute. The poster image in this instance is inserted with an img tag.
Showing how the Flash player appears without HTML5 video. The Flash player is not responsive.