Play a Video Clip on a Web Page Using HTML

This tutorial provides an example of HTML code to play a video on a web page. This article covers the conversion of video formats for use in web pages and the use of 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. The latest version was often termed version 5, hence HTML5. Work on updates to HTML is ongoing with a HTML Living Standard at WHATWG. The World Wide Web Consortium or W3C was the previous maintainer of the HTML standards, but they have now retired their HTML specifications in favour of the HTML Living Standard.

Play Video in HTML5 on a Web Page

The major browsers and operating systems have long supported the HTML video tag. Many video recording devices support MPEG4 video as a file format, though other formats exist. Different browsers and operating systems use to have their preferred file format for playing video, however, MPEG4 support has become widespread.

There are workarounds for the use of the HTML video tag in very old browsers, such as Internet Explorer 8 and earlier, if it is still needed. However, old web browser support should no longer be required. Playing video in older browsers used to be done with Flash or by embedding YouTube or a similar video site's code. The basic file formats for HTML video are:

List of Basic 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	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 old browser or OS supporting the old Adobe Flash Player

Video File Formats for Web Pages and Video Posting

Whatever file format is 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 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 an MPEG4 and WebM video as a minimum to support all the commonly used browsers: Chrome, Safari (including iOS), Firefox, Edge and Opera, and even the final versions of Internet Explorer. To see the market share of web browsers look at Statcounter's Browser Market Share.

Converting Video For Use on a Web Page

The device used to record video usually comes with support software, which 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.

Convert Video using Miro Video Converter

If a video needs to be trimmed or an edit made commercial software usually has the best features, ranging from 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).

Xmedia Recode Video Converter

If you do not need to convert video file formats that often then an online conversion service such as www.online-convert.com can be used. Note, for Internet users that have slow upload speeds and large video files it may take some time to convert. There is also help on converting video at Wikimedia Commons.

online-convert.com

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 video 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 the 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. For a video that resizes to the screen width for small displays use the following in the web page's CSS style sheet:

video {
  max-width: 100%;
  height: auto;
}

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 website 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: https://archive.org/details/PeacedelichiroyukiNakanoWaterfallJapanIZU

Tek Eye