Play a Video Clip on a Web Page Using HTML
This tutorial provides example HTML code to play a video in a web page. The article covers converting video formats and the HTML video tag. Tips for supporting older browsers are included. All new web pages should be written to support the latest version of HTML, version 5, hence the term HTML5. Work on updates to HTML is on going with a HTML Living Standard at WHATWG and drafts of HTML 5.1 at the W3C. The latest version of HTML, HTML5, provides the most functionality and helps with future web site maintenance.
Play Video in HTML5 on a Web Page
The latest releases of the major browsers and operating systems support the HTML video tag. HTML using the video tag can be written to support older browsers (such as Internet Explorer 8 and early). Many video recording devices support MPEG4 video as a file format, though other formats exist. Different browsers and operating systems used to have their preferred file format for playing video, however, MPEG4 support has become widespread. Playing video in older browsers can be done with Flash or embedding of YouTube or a similar video site's code. The file formats for HTML video are:
List of Common HTML Video Formats
| Type | Description | File | Mime | Use |
|---|---|---|---|---|
| MPEG-4 | H.264 (a.k.a MPEG-4 Part 10 or MPEG-4 AVC) + either AAC (MPEG-4 Part 3) or MP3 in a MPEG-4 Part 14 container | .mp4 | video/mp4 | IE, Chrome, Edge, Safari, Firefox, iOS, Android |
| WebM | VP8/VP9 Video + Vorbis Audio in WebM container | .webm | video/webm | Chrome, Firefox, Opera, Android |
| Ogg | Theora+Vorbis Audio in a Ogg container | .ogv or .ogg | video/ogg | Chrome, Firefox, Opera |
| Flash | Flash Video | .flv | video/x-flv | Any browser or OS supporting Flash Player |
Video File Formats for Web Pages and Video Posting
Whatever file format saved by your video recording device you will need to support two, three or four formats for your HTML web page. Have the video in .mp4 and .webm for the latest versions of HTML5 browsers, add .ogv (or .ogg) for older HTML5 browsers, and finally .flv for non-HTML5 browsers. Once you have the video files in the various formats upload them to the web server ready for your web page or post. Ideally a web page will provide a MPEG4 and WebM video as a minimum to support all the commonly used browsers: Internet Explorer, Chrome, Safari (including iOS), Firefox, Edge and Opera. To see the browser market share by version look at the Desktop Browser Version Market Share or Mobile/Tablet Browser Market Share pages at www.netmarketshare.com.
Converting Video For Use on a Web Page
The device used to record video usually comes with support software, it may allow conversion of the recorded video to different formats. Alternatively commercial and free software is available to convert video files between file formats. The free Miro Video Converter is a simple to use video file converter for PC or Mac as well as providing Linux source code.
If video needs to be trimmed or an edit made commercial software usually has the best features, ranging from the expensive professional software (Adobe Premiere) to good quality home software (Sony Movie Studio). An alternative to Miro (for conversion) is XMedia Recode for Windows by Sebastian Dörfler. It is another free video converter that has more control over conversion and allows for some trimming. There is also the free command line utility FFmpeg for converting and manipulating video and audio files (which Miro and XMedia use).
If you do not need to convert video file formats that often then an online conversion service such as www.online-convert.com or Firefogg for Firefox should be sufficient, however, home internet users normally have slow upload speeds so large video files may take sometime to convert. There is also help on converting video at Wikimedia Commons.
How to Create a HTML5 Web Page for Video
A web page is made up of the content being displayed and the tags that tell the browser how to display that content. To display a video file the HTML tag is used. Inside the video tag there is a source tag for each of the file formats that are provided. Here we start with a basic HTML page and add a video (here an example URL is shown):
<!DOCTYPE html>
<html>
<head>
<title>HTML Video Demo - Waterfall</title>
</head>
<body>
<video controls preload="metadata">
<source src="http://www.example.com/waterfall-video.mp4" type="video/mp4">
<source src="http://www.example.com/waterfall-video.webm" type="video/webm">
<source src="http://www.example.com/waterfall-video.ogv" type="video/ogg">
Your Browser cannot play the waterfall video.
</video>
</body>
</html>The video tag has the controls attribute to tell browser to show buttons to control the video (usually a play/pause button, forward or reverse slider and volume control). Without controls the web page must have its own buttons to control the video via script. The preload attribute tells the browser how to access the video before it is played. It can be none - where the browser will not fetch the video until the user presses play, metadata - where the browser will fetch information about the video but not the entire content, or finally auto – where the browser will load as much of the video as possible ready for play. The metadata setting is the most useful as it will not use the most bandwidth but will provide the browser with some information on the video file ready for the user to play it.
If you need to change the size of the video use width and height attributes on the video tag to set the width and height in pixels. The poster attribute allows an image to represent the video to be shown before the video is played, especially useful if the preload attribute is set to none. Use the loop attribute to play the video continuously. The autoplay attribute starts the video automatically (some find this annoying), and the muted attribute turns off the sound to start with. See our HTML5 Video Test Page for some examples of these attributes in use.
Pre-HTML5 Browsers
For older browsers the most common solution to support video is to use the Adobe Flash Player. See the Video for Everybody article for HTML code. There are some Javascript solutions such as open source projects MediaElement.js or Video.js which support flash video. Alternatively upload the video to a video sharing web site such as YouTube or Vimeo.
Summary
To play video on a web page it is recommended that at least MPEG (.mp4) and WebM are supported (.webm), plus Ogg (.ogv or .ogg) if possible. Convert a video to these formats using commercial or open source tools. Upload the videos to a web server then add the video tag to the web page, this contains one source tag for each video format. Use the width, height, preload, poster, loop, autoplay and muted attributes as required.
Acknowledgements
The waterfall video was from the Internet Archive: http://archive.org/details/PeacedelichiroyukiNakanoWaterfallJapanIZU
Author:Daniel S. Fowler Published: Updated:
