HTML video is a subject of the HTML specification as the standard way of playing video via the web. Introduced in HTML5, [1] 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.
The <video>
element started being discussed by the WHATWG in October 2006. [2] The <video>
element was proposed by Opera Software in February 2007. [3] Opera also released a preview build that was showcased the same day, [4] [5] and a manifesto that called for video to become a first-class citizen of the web. [6]
The following HTML code fragment will embed a WebM video into a web page.
<videosrc="movie.webm"poster="movie.jpg"controls> This is fallback content to display for user agents that do not support the video tag. </video>
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.
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. [7]
<videoposter="poster.jpg"controls><sourcesrc="av1.mp4"type='video/mp4; codecs="av01.0.00M.08, opus"'><sourcesrc="avc.mp4"type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'><sourcesrc="vp9.webm"type='video/webm; codecs="vp9.0, opus"'><sourcesrc="theora.ogv"type='video/ogg; codecs="theora, vorbis"'><p>This is fallback content to display for user agents that do not support the video tag.</p></video>
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:
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, [8] 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: [9]
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. [10]
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.
Although Theora is not affected by known non-free patents, Apple [11] has 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. [12] [13] 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 has 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. [13]
Some web developers criticized the removal of the Ogg formats from the specification. [14] A follow-up discussion also occurred on the W3C questions and answers blog. [15]
Mozilla and Opera support only the open formats of Theora and WebM. Google stated its intention to remove support for H.264 in 2011, specifically for the HTML video tag. [16] Although it has been removed from Chromium, as of January 2021 [update] it has yet to be removed from Google Chrome ten years later. [17] [18]
The adaptive bitrate streaming standard MPEG-DASH can be used in Web browsers via the Media Source Extensions (MSE) [19] and JavaScript-based DASH players. Such players are, e.g., the open-source project dash.js [19] of the DASH Industry Forum, but there are also products such as the HTML5 Video Player of Bitmovin [20] (using HTML with JavaScript, but also a Flash-based DASH players for legacy Web browsers not supporting the MSE).
Google's acquisition of On2 in 2010 resulted in its acquisition of the VP8 video format. Google has provided a royalty-free license to use VP8. [21] Google also started WebM, which combines the standardized open source VP8 video codec with Vorbis audio in a Matroska based container. The opening of VP8 was welcomed by the Free Software Foundation. [22]
When Google announced in January 2011 that it would end native support of H.264 in Chrome, [23] criticism came from many quarters including Peter Bright of Ars Technica [24] and Microsoft web evangelist Tim Sneath, who compared Google's move to declaring Esperanto the official language of the United States. [25] However, Haavard Moen of Opera Software strongly criticized the Ars Technica article [26] and Google responded to the reaction by clarifying its intent to promote WebM in its products on the basis of openness. [16]
After the launch of WebM, Mozilla and Opera have called for the inclusion of VP8 in HTML. [27]
On 7 March 2013, Google Inc. and MPEG LA, LLC announced agreements covering techniques that "may be essential" to VP8, with Google receiving a license from MPEG LA and 11 patent holders, and MPEG LA ending its efforts to form a VP8 patent pool. [28] [29] [30] [31]
In 2012, VP9 was released by Google as a successor to VP8, also open and royalty free.
At the end of 2017 the new AV1 format developed by the Alliance for Open Media (AOMedia) as the evolution of VP9 has reached the feature freeze, and the bitstream freeze is expected for January 2018. Firefox nightly builds already include support for AV1. [32]
H.264/MPEG-4 AVC is widely used, and has good speed, compression, hardware decoders, and video quality, but is patent-encumbered. [33] Users of H.264 need licenses either from the individual patent holders, or from the MPEG LA, a group of patent holders including Microsoft and Apple, except for some Internet broadcast video uses. [34] H.264 is usually used in the MP4 container format, together with Advanced Audio Coding (AAC) audio. AAC is also covered by patents in itself, so users of MP4 will have to license both H.264 and AAC.
In June 2009, the WHATWG concluded that no existing format was suitable as a specified requirement. [35]
Apple still only supports H.264, but Microsoft now supports VP9 and WebM, and has pledged support for AV1.
On 30 October 2013, Cisco announced that it was making a binary H.264 module available for download. Cisco will pay the costs of patent licensing for those binary modules when downloaded by the using software while it is being installed, making H.264 free to use in that specific case. [36]
In the announcement, Cisco cited its desire of furthering the use of the WebRTC project as the reason, since WebRTC's video chat feature will benefit from having a video format supported in all browsers. [37] The H.264 module will be available on "all popular or feasibly supportable platforms, which can be loaded into any application". [38]
Cisco is also planning to publish source code for those modules under BSD license, but without paying the royalties, [36] so the code will practically be free software only in countries without H.264 software patents, which has already been true about other existing implementations.
Also on 30 October 2013, Mozilla's Brendan Eich announced that Firefox would automatically download Cisco's H.264 module when needed by default. He also noted that the binary module is not a perfect solution, since users do not have full free software rights to "modify, recompile, and redistribute without license agreements or fees". Thus Xiph and Mozilla continue the development of Daala. [38] [39]
OpenH264 only supports the baseline profile of H.264, and does not by itself address the need for an AAC decoder. Therefore, it is not considered sufficient for typical MP4 web video, which is typically in the high profile with AAC audio. [40] [41] [42] However, for use in WebRTC, the omission of AAC was justified in the release announcement: "the standards bodies have aligned on Opus and G.711 as the common audio codecs for WebRTC". [37] There is doubt as to whether a capped global licensing of AAC, like Cisco's for H.264, is feasible after AAC's licensing bureau removed the price cap shortly after the release of OpenH264. [43]
This table shows which video formats are likely to be supported by a given user agent. Most of the browsers listed here use a multimedia framework for decoding and display of video, instead of incorporating such software components. It is not generally possible to tell the set of formats supported by a multimedia framework without querying it, because that depends on the operating system and third party codecs. [44] In these cases, video format support is an attribute of the framework, not the browser (or its layout engine), assuming the browser properly queries its multimedia framework before rejecting unknown video formats. In some cases, the support listed here is not a function of either codecs available within the operating system's underlying media framework, or of codec capabilities built into the browser, but rather could be by a browser add-on that might, for example, bypass the browser's normal HTML parsing of the <video> tag to embed a plug-in based video player.
Note that a video file normally contains both video and audio content, each encoded in its own format. The browser has to support both the video and audio formats. See HTML audio for a table of which audio formats are supported by each browser.
The video format can be specified by MIME type in HTML (see example). MIME types are used for querying multimedia frameworks for supported formats. [45]
Of these browsers, only Firefox and Opera employ libraries for built-in decoding. In practice, Internet Explorer and Safari can also guarantee certain format support, because their manufacturers also make their multimedia frameworks. At the other end of the scale, Konqueror has identical format support to Internet Explorer when run on Windows, and Safari when run on Mac, but the selected support here for Konqueror is the typical for Linux, where Konqueror has most of its users. In general, the format support of browsers is much dictated by conflicting interests of vendors, specifically that Media Foundation and QuickTime support commercial standards, whereas GStreamer and Phonon cannot legally support other than free formats by default on the free operating systems that they are intended for. [46]
Browser | Operating System | Theora (Ogg) | H.264 (MP4) | HEVC (MP4) | VP8 (WebM) | VP9 (WebM) | AV1 (WebM) |
---|---|---|---|---|---|---|---|
Android browser | Android | Since 2.3 [47] | Since 3.0 [47] | Since 5.0 [47] | Since 2.3 [47] | Since 4.4 [47] | Since 10 |
Chromium | Unix-like and Windows | Since r18297 [48] | Via FFmpeg [49] [50] | No [51] | Since r47759 [52] | Since r172738 [53] | Yes |
Google Chrome | Unix-like, Android, macOS, and Windows | Since 3.0 [54] [55] | Since 3.0 [55] [lower-alpha 1] | Since 105 (software decoding; needs OS-level codecs) Since 107 (hardware decoding; needs hardware decoder) [57] [58] | Since 6.0 [59] [60] | Since 29.0 [lower-alpha 2] | Since 70 [63] |
Internet Explorer | Windows | Via OpenCodecs | Since 9.0 [64] | No [65] | Via OpenCodecs | No | No |
Windows Phone | No | Since 9.0 [66] | No | ||||
Windows RT | Since 10.0 [66] | ||||||
Microsoft Edge | Unix-like, macOS and Windows (Chromium) | Since v79 [67] [68] | Since v79 (only browser to support DRM PlayReady) [67] [69] | No [65] | Since v79 [67] [70] | Since v79 [67] [70] | Since v79 [67] |
Windows 10 (Legacy EdgeHTML) | Since 17.0 (with Web Media Extensions) [71] [72] [73] | Since 12.0 [74] | Needs hardware decoder [lower-alpha 3] | Since 17.0 (supports <video> tag with Web Media Extensions and VP9 Video Extensions) [72] | Only enabled by default if hardware decoder present [77] Since 17.0 (supports <video> tag with Web Media Extensions and VP9 Video Extensions) [71] [72] [73] | Since 18.0 (with AV1 Video Extension) [78] | |
Windows 10 Mobile | No | Since 13.0 [79] | Since 15.0 (only via MSE) [80] | Since 14.0 (only via MSE) [81] | No | ||
Konqueror | Unix-like and Windows | Needs OS-level codecs [lower-alpha 4] | |||||
Mozilla Firefox | Windows 7+ | Since 3.5 [82] | Since 21.0 [lower-alpha 5] | No [65] | Since 4.0 [85] | Since 28.0 [86] [87] | Since 65.0 (64-bit) [88] Since 66.0 (32-bit) [89] |
Windows Vista | Since 22.0 [90] | ||||||
Windows XP and N editions | Since 46.0 [91] | ||||||
Linux | 26.0 (via GStreamer) [lower-alpha 6] 43.0 (via FFmpeg) [94] | Since 67.0[ citation needed ] | |||||
Android | Since 17.0 [95] | in Nightly[ citation needed ] | |||||
macOS | Since 34.0 [96] | Since 66.0 [89] | |||||
Firefox OS | Since 1.1 [97] | No | |||||
Opera Mobile | Android, iOS, Symbian, and Windows Mobile | Since 13.0 | Since 11.50 | No [98] | Since 15.0 | Since 16.0 | since 57.0 [63] |
Opera | macOS, Windows | Since 10.50 [99] | Since 24.0 [100] | Since 10.60 [101] [102] | Yes | since 57.0 [63] | |
Linux | Needs codec library [lower-alpha 7] | ||||||
Safari | iOS | No | Since 3.1 [104] | Since 11 [105] | Since 17.4 (fully supported) [106] Since 12.1 (only via WebRTC) [107] | Since 17.4 (fully supported) [106] Since 14 (only via WebRTC) [108] | Since 17.0 (needs hardware decoder; needs MP4 container[ citation needed ]) [109] [lower-alpha 8] |
macOS | Via Xiph QuickTime Components (macOS 10.11 and earlier) | Since 14.1 [110] | Since 14.1 [110] | ||||
GNOME Web | Linux and BSD | Needs OS-level codecs [lower-alpha 9] |
These indicate the level of support for the given item in each engine. By default, the most recent version of the engine is implied. However, a specific version number can be listed; when this indicates full support, it's the initial version of the engine fully supporting the item.
Value | Meaning |
---|---|
Yes | Fully supported |
No | Has never been supported |
Partial | Only some values are supported |
Incorrect | Not implemented correctly in all cases |
Experimental | May be incomplete or buggy |
Nightly build | Currently in development; full support is expected |
Depends | Only supported for the specified conditions |
Dropped | No longer supported |
Transparent video, that is video with an alpha channel, has multiple design advantages: [113]
transparent
[117] flag in its embedding code.HTML has support for digital rights management (DRM, restricting how content can be used) via the Encrypted Media Extensions (EME). The addition of DRM is controversial because it allows restricting users' freedom to use media restricted by DRM, even where fair use gives users the legal right to do so. [118] A main argument in W3C's approval of EME was that the video content would otherwise be delivered in plugins and apps, and not in the web browser. [119]
In 2013 Netflix added support for HTML video using EME, beside their old delivery method using a Silverlight plugin (also with DRM). [120]
In 2010, in the wake of Apple iPad launch and after Steve Jobs announced that Apple mobile devices would not support Flash, a number of high-profile sites began to serve H.264 HTML video instead of Adobe Flash for user-agents identifying as iPad. [121] HTML video was not as widespread as Flash videos, though there were rollouts of experimental HTML-based video players from DailyMotion (using Ogg Theora and Vorbis format), [122] YouTube (using the H.264 and WebM formats), [123] and Vimeo (using the H.264 format). [124]
Support for HTML video has been steadily increasing. In June 2013, Netflix added support for HTML video. [125] In January 2015, YouTube switched to using HTML video instead of Flash by default. [126] In December 2015, Facebook switched from Flash to HTML video for all video content. [127]
As of 2016, Flash is still widely installed on desktops, while generally not being supported on mobile devices such as smartphones. [128] The Flash plugin is widely assumed, including by Adobe, [128] [129] to be destined to be phased out, [130] [131] which will leave HTML video as the only widely supported method to play video on the World Wide Web. Chrome, [132] [133] Firefox, [134] Safari, [135] and Edge, [136] have plans to make almost all flash content click to play in 2017. The only major browser which does not have announced plans to deprecate Flash is Internet Explorer. [137] Adobe announced on 25 July 2017 that they would be permanently ending development of Flash in 2020. [138]
Vorbis is a free and open-source software project headed by the Xiph.Org Foundation. The project produces an audio coding format and software reference encoder/decoder (codec) for lossy audio compression, libvorbis. Vorbis is most commonly used in conjunction with the Ogg container format and it is therefore often referred to as Ogg Vorbis.
Theora is a free lossy video compression format. It was developed by the Xiph.Org Foundation and distributed without licensing fees alongside their other free and open media projects, including the Vorbis audio format and the Ogg container.
A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.
A browser war is a competition for dominance in the usage share of web browsers. The "first browser war" (1995–2001) consisted of Internet Explorer and Netscape Navigator, and the "second browser war" (2004-2017) between Internet Explorer, Firefox, and Google Chrome.
These tables compare features of multimedia container formats, most often used for storing or streaming digital video or digital audio content. To see which multimedia players support which container format, look at comparison of media players.
libavcodec is a free and open-source library of codecs for encoding and decoding video and audio data.
HTML5 is a markup language used for structuring and presenting hypertext documents on the World Wide Web. It was the fifth and final major HTML version that is now a retired World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard. It is maintained by the Web Hypertext Application Technology Working Group (WHATWG), a consortium of the major browser vendors.
Microsoft Silverlight is a discontinued application framework designed for writing and running rich internet applications, similar to Adobe's runtime, Adobe Flash. While early versions of Silverlight focused on streaming media, later versions supported multimedia, graphics, and animation, and gave support to developers for CLI languages and development tools. Silverlight was one of the two application development platforms for Windows Phone, but web pages using Silverlight did not run on the Windows Phone or Windows Mobile versions of Internet Explorer, as there was no Silverlight plugin for Internet Explorer on those platforms.
VP8 is an open and royalty-free video compression format released by On2 Technologies in 2008.
The HTML5 draft specification adds video
and audio
elements for embedding video and audio in HTML documents. The specification had formerly recommended support for playback of Theora video and Vorbis audio encapsulated in Ogg containers to provide for easier distribution of audio and video over the internet by using open standards, but the recommendation was soon after dropped.
WebM is an audiovisual media file format. It is primarily intended to offer a royalty-free alternative to use in the HTML video and the HTML audio elements. It has a sister project, WebP, for images. The development of the format is sponsored by Google, and the corresponding software is distributed under a BSD license.
WebP is a raster graphics file format developed by Google intended as a replacement for JPEG, PNG, and GIF file formats. It supports both lossy and lossless compression, as well as animation and alpha transparency.
Modern HTML5 has feature-parity with the now-obsolete Adobe Flash. Both include features for playing audio and video within web pages. Flash was specifically built to integrate vector graphics and light games in a web page, features that HTML5 also supports.
A video coding format is a content representation format of digital video content, such as in a data file or bitstream. It typically uses a standardized video compression algorithm, most commonly based on discrete cosine transform (DCT) coding and motion compensation. A specific software, firmware, or hardware implementation capable of compression or decompression in a specific video coding format is called a video codec.
HTML audio is a subject of the HTML specification, incorporating audio input, playback, and synthesis, as well as speech to text, all in the browser.
VP9 is an open and royalty-free video coding format developed by Google.
Encrypted Media Extensions (EME) is a W3C specification for providing a communication channel between web browsers and the Content Decryption Module (CDM) software which implements digital rights management (DRM). This allows the use of HTML video to play back DRM-wrapped content such as streaming video services without the use of heavy third-party media plugins like Adobe Flash or Microsoft Silverlight. The use of a third-party key management system may be required, depending on whether the publisher chooses to scramble the keys.
Web Call Server is unified intermedia server software developed by Flashphoner. It is a server-side platform, implemented in Java, dedicated for streaming video over wide range of communication protocols, including:
AOMedia Video 1 (AV1) is an open, royalty-free video coding format initially designed for video transmissions over the Internet. It was developed as a successor to VP9 by the Alliance for Open Media (AOMedia), a consortium founded in 2015 that includes semiconductor firms, video on demand providers, video content producers, software development companies and web browser vendors. The AV1 bitstream specification includes a reference video codec. In 2018, Facebook conducted testing that approximated real-world conditions, and the AV1 reference encoder achieved 34%, 46.2%, and 50.3% higher data compression than libvpx-vp9, x264 High profile, and x264 Main profile respectively.
A video element is used for playing videos or movies.
{{cite web}}
: CS1 maint: archived copy as title (link)This blog showcases various use cases of transparent videos in web design, besides advertising their own software product, Rotato.
Chrome 31 now supports video alpha transparency in WebM. In other words, Chrome takes the alpha channel into account when playing green screen videos encoded to WebM (VP8 and VP9) with an alpha channel. This means you can play videos with transparent backgrounds: over web pages, images or even other videos.
The background color (Stage color) of a SWF file can be set to transparent. The background color or image of the HTML page that contains the SWF file shows through. This technique allows layering of SWF content with DHTML (Dynamic HTML) content. Not every web browser handles transparency in the same way. Be sure to test your SWF file in all browsers that you want to enable your audience to use. Most Linux browsers do not support Animate transparency.
transparent — The SWF content is layered together with other HTML elements on the page. The SWF file background color (Stage color) is transparent. HTML elements beneath the SWF file are visible through any transparent areas of the SWF, with alpha blending. This option reduces playback performance compared to wmode=window or wmode=direct.