

Formats like MP3, MP4 and WebM are called container formats. Contents of a media fileįirst, let's go through the terminology quickly.

Fortunately, there are things you can do to help prevent this from being a problem. The video won't play, because different browsers support different video (and audio) formats. There's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like Internet Explorer or even an older version of Safari. You can try the example live here (see also the source code.) Using multiple source formats to improve compatibility

The embedded video will look something like this: This can be anything you like in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using. This is called fallback content - this will be displayed if the browser accessing the page doesn't support the element, allowing us to provide a fallback for older browsers. At a minimum, the interface must include a way to start and stop the media, and to adjust the volume. Users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) You must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate JavaScript API. In the same way as for the element, the src (source) attribute contains a path to the video you want to embed. Your browser doesn't support HTML5 video. We have provided you with sample audio and video files and example code for your own experimentation, in case you are unable to get hold of your own.

We won't be teaching you how to produce audio and video files - that requires a completely different skillset. We'll not be looking at JavaScript here - just the basic foundations that can be achieved with HTML. Fortunately, a few years later the HTML5 specification had such features added, with the and elements, and some shiny new JavaScript APIs for controlling them. This kind of technology worked OK, but it had a number of problems, including not working well with HTML/CSS features, security issues, and accessibility issues.Ī native solution would solve much of this if implemented correctly. Web developers have wanted to use video and audio on the Web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) In the early days, native web technologies such as HTML didn't have the ability to embed video and audio on the Web, so proprietary (or plugin-based) technologies like Flash - and later, Silverlight (both of which are now obsolete) - became popular for handling such content.
