ArticleslgStudy

science

HTML video

HTML video is a science topic covered in the lgStudy science library. This page brings together a partial reference excerpt, illustrations, worked examples, real-world applications and a short study plan, so you can understand HTML video rather than just read about it. In short: HTML video is a subject of the HTML specification as the standard way of playing video via the web. Introduced in HTML5, it is designed to partially replace the object element and the previous de facto standard of using the proprietary Adobe Flash plugin, though early adoption was hampered by lack of agreement as to which video coding formats and audio coding formats should be supported in web browsers.

Key takeaways

  • HTML video belongs to science; place it in that map before memorising details.
  • Learn the definition first, then one example that makes the definition concrete.
  • Connect HTML video to a quantity you can measure, compute or draw — that is where exam questions come from.
  • Reproduce the core statement of HTML video from memory before moving on to harder problems.

Reference excerpt

HTML video is a subject of the HTML specification as the standard way of playing video via the web. Introduced in HTML5, it is designed to partially replace the object element and the previous de facto standard of using the proprietary Adobe Flash plugin, though early adoption was hampered by lack of agreement as to which video coding formats and audio coding formats should be supported in web browsers. As of 2020, HTML video is the only widely supported video playback technology in modern browsers, with the Flash plugin being phased out.

History of <video> element The <video> element started being discussed by the WHATWG in October 2006. The <video> element was proposed by Opera Software in February 2007. Opera also released a preview build that was showcased the same day, and a manifesto that called for video to become a first-class citizen of the web.

<video> element examples The following HTML code fragment will embed a WebM video into a web page.

The "controls" attribute enables the browser's own user interface for controlling playback. Alternatively, playback can be controlled with JavaScript, which the web designer can use to create a custom user interface. The optional "poster" attribute specifies an image to show in the video's place before playback is started. Its purpose is to be representative of the video.

Multiple sources Video format support varies among browsers (see below), so a web page can provide video in multiple formats. For other features, browser sniffing is used sometimes, which may be error-prone: any web developer's knowledge of browsers will inevitably be incomplete or not up-to-date. The browser in question "knows best" what formats it can use. The "video" element supports fallback through specification of multiple sources. Using any number of <source> elements, as shown below, the browser will choose automatically which file to download. Alternatively, the JavaScript canPlayType() function can be used to achieve the same. The "type" attribute specifies the MIME type and possibly a list of codecs, which helps the browser to determine whether it can decode the file without beginning to download it. The MIME type denotes the container format of the file, and the container format defines the interpretation of the codec string.

Supported video and audio formats

The HTML specification does not specify which video and audio formats browsers should support. User agents are free to support any video formats they feel are appropriate, but content authors cannot assume that any video will be accessible by all complying user agents, since user agents have no minimal set of video and audio formats to support. The HTML5 Working Group considered it desirable to specify at least one video format which all user agents (browsers) should support. The ideal format in this regard would:

Have good compression, good image quality, and low decode processor use. Be royalty-free. In addition to software decoders, a hardware video decoder should exist for the format, as many embedded processors do not have the performance to decode video. Initially, Ogg Theora was the recommended standard video format in HTML5, because it was not affected by any known patents. But on 10 December 2007, the HTML5 specification was updated, replacing the reference to concrete formats:

User agents should support Theora video and Vorbis audio, as well as the Ogg container format. with a placeholder:

It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecs that satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available. The result was a polarisation of HTML video between industry-standard, ISO-defined but patent-encumbered formats, and open formats. The new AV1 format by Alliance for Open Media aims to be both industry standard, royalty-free, and open, and has wide industry support.

Free formats

Mozilla and Opera initially supported only the open formats of Theora and WebM. Although Theora is not affected by known non-free patents, Apple expressed concern about unknown patents that might affect it, whose owners might be waiting for a corporation with extensive financial resources to use the format before suing. Formats like H.264 might also be subject to unknown patents in principle, but they have been deployed much more widely and so it is presumed that any patent-holders would have already made themselves known. Apple also opposed requiring Ogg format support in the HTML standard (even as a "should" requirement) on the grounds that some devices might support other formats much more easily, and that HTML has historically not required particular formats for anything. Some web developers criticized the removal of the Ogg formats from the specification. A follow-up discussion also occurred on the W3C questions and answers blog.

MPEG-DASH Support via the Media Source Extensions (MSE)

The adaptive bitrate streaming standard MPEG-DASH can be used in Web browsers via the Media Source Extensions (MSE) and JavaScript-based DASH players. Such players are, e.g., the open-source project dash.js of the DASH Industry Forum, but there are also products such as the HTML5 Video Player of Bitmovin (using HTML with JavaScript, but also a Flash-based DASH players for legacy Web browsers not supporting the MSE).

… excerpt ends here. Continue reading the full article.

Worked examples

Example 1 — a first encounter with HTML video

Start with the simplest possible case. Write down what HTML video claims or describes in one sentence, then invent the smallest concrete situation in which that sentence is true. In science, the smallest case is usually a single object, a single equation or a single measurement. Check that every symbol or term in your sentence has a meaning in that case.

Example 2 — changing one variable

Take the situation from Example 1 and change exactly one quantity: double it, halve it, or set it to zero. Predict what should happen to HTML video before you calculate. Comparing your prediction with the result is the fastest way to find out whether you understand the idea or only the words.

Example 3 — an exam-style question

Typical questions about HTML video ask you to (a) state it precisely, (b) apply it to given data, and (c) explain a limitation. Practise writing all three answers in under five minutes; the third part is what separates a full-mark answer from an average one.

Applications of HTML video

In research
HTML video appears in science research whenever the underlying quantities have to be modelled precisely. Papers usually cite it as a starting assumption and then explore where it breaks down.
In technology and industry
Engineering practice reuses HTML video in design rules, simulations and safety margins. Knowing the idea lets you read a specification sheet and understand why the numbers look the way they do.
In the classroom
HTML video is common in secondary-school and first-year university syllabi. It links to neighbouring topics HTML5, Multimedia, New media, so understanding it makes those chapters shorter.
In everyday life
Look for HTML video outside the textbook — in sport, cooking, traffic, electronics or the sky above you. An example you found yourself is remembered far longer than one you were given.
Ask Teacher Smith questions about this articleOpens your AI tutor with a question about “HTML video” →

Affiliate

Preply — study more efficiently by working with a personal tutor. 50% off.

How to study HTML video in 20 minutes

  1. Read the reference excerpt below once, without taking notes.
  2. Close the page and write down what HTML video means in your own words.
  3. Compare your version with the excerpt and mark what you missed.
  4. Work through the three examples above with pen and paper.
  5. Explain HTML video out loud to somebody else — or to Teacher Smith in the lgStudy chat.

Frequently asked questions

What is HTML video in simple terms?

HTML video is a subject of the HTML specification as the standard way of playing video via the web. Introduced in HTML5, it is designed to partially replace the object element and the previous de facto standard of using the proprietary Adobe Flash plugin, though early adoption was hampered by lack…

Why does HTML video matter?

Because it connects several science ideas at once: it gives you a definition you can apply, a quantity you can calculate, and a way to check whether a result is plausible.

How should I study HTML video?

Read the excerpt, restate it from memory, then work through the examples and applications listed on this page. The five-step study plan above takes about twenty minutes.

What does this page cover?

It gives you a compact reference excerpt plus original lgStudy explanations, examples, applications and study material on HTML video.

Tags

  • HTML5
  • Multimedia
  • New media

Keep exploring