Английская Википедия:HTML video

Материал из Онлайн справочника
Версия от 11:02, 18 марта 2024; EducationBot (обсуждение | вклад) (Новая страница: «{{Английская Википедия/Панель перехода}} {{Short description|HTML element}} {{Use dmy dates|date=December 2019}} <div class="noprint">{{HTML}}</div> The HTML5 specification introduced the video element for the purpose of playing videos,<ref name="spec">{{cite web| url= http://www.w3.org/TR/html5/video.html#video| title= The video element| work= HTML5: A vocabulary and associated APIs for HTML and XHTML| publisher= World...»)
(разн.) ← Предыдущая версия | Текущая версия (разн.) | Следующая версия → (разн.)
Перейти к навигацииПерейти к поиску

Шаблон:Short description Шаблон:Use dmy dates

Шаблон:HTML

The HTML5 specification introduced the video element for the purpose of playing videos,[1] partially replacing the object element. HTML5 video is intended by its creators to become the new standard way to show video on the web, instead of 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, HTML5 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.[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]

<video> element examples

The following HTML5 code fragment will embed a WebM video into a web page. 

<video src="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.

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 Шаблон:Mono 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] 

<video poster="poster.jpg" controls>
	<source src="av1.mp4" type='video/mp4; codecs="av01.0.00M.08, opus"'>
	<source src="avc.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
	<source src="vp9.webm" type='video/webm; codecs="vp9.0, opus"'>
	<source src="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>

Supported video and audio formats

Шаблон:See also The HTML5 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,[8] replacing the reference to concrete formats: Шаблон:Blockquote

with a placeholder:[9] Шаблон:Blockquote

The result was a polarisation of HTML5 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

Шаблон:See also Although Theora is not affected by known non-free patents, Apple[10] 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.[11][12] 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.[12]

Some web developers criticized the removal of the Ogg formats from the specification.[13] A follow-up discussion also occurred on the W3C questions and answers blog.[14]

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 HTML5 video tag.[15] Although it has been removed from Chromium, Шаблон:As of it has yet to be removed from Google Chrome ten years later.[16][17]

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

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

Google's purchase of On2

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.[20] 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.[21]

When Google announced in January 2011 that it would end native support of H.264 in Chrome,[22] criticism came from many quarters including Peter Bright of Ars Technica[23] and Microsoft web evangelist Tim Sneath, who compared Google's move to declaring Esperanto the official language of the United States.[24] However, Haavard Moen of Opera Software strongly criticized the Ars Technica article[25] and Google responded to the reaction by clarifying its intent to promote WebM in its products on the basis of openness.[15]

After the launch of WebM, Mozilla and Opera have called for the inclusion of VP8 in HTML.[26]

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.[27][28][29][30]

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.[31]

Non-free formats

Шаблон:See also H.264/MPEG-4 AVC is widely used, and has good speed, compression, hardware decoders, and video quality, but is patent-encumbered.[32] 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.[33] 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.[34]

Apple still only supports H.264, but Microsoft now supports VP9 and WebM, and has pledged support for AV1.

Cisco makes a licensed H.264 binary module available for free

Шаблон:Main 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.[35]

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.[36] The H.264 module will be available on "all popular or feasibly supportable platforms, which can be loaded into any application".[37]

Cisco is also planning to publish source code for those modules under BSD license, but without paying the royalties,[35] 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.[37][38]

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.[39][40][41] 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".[36] 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.[42]

Browser support

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.[43] 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 HTML5 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.[44]

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.[45]

Status of video format support in each web browser
Browser Operating System Theora (Ogg) H.264 (MP4) HEVC (MP4) VP8 (WebM) VP9 (WebM) AV1 (WebM)
Android browser Android Шаблон:Yes[46] Шаблон:Yes[46] Шаблон:Yes[46] Шаблон:Yes[46] Шаблон:Yes[46] Шаблон:Yes
Chromium Unix-like and Windows Шаблон:Yes[47] Шаблон:Depends[48][49] Шаблон:No[50] Шаблон:Yes[51] Шаблон:Yes[52] Шаблон:Yes
Google Chrome Unix-like, Android, macOS, and Windows Шаблон:Yes[53][54] Шаблон:Yes[54]Шаблон:Efn Шаблон:Partial[55][56] Шаблон:Yes[57][58] Шаблон:YesШаблон:Efn Шаблон:Yes[59]
Internet Explorer Windows Шаблон:Depends Шаблон:Yes[60] rowspan="3" Шаблон:No[61] Шаблон:Depends rowspan="3" Шаблон:No rowspan="3" Шаблон:No
Windows Phone rowspan="2" Шаблон:No Шаблон:Yes[62] rowspan="2" Шаблон:No
Windows RT Шаблон:Yes[62]
Microsoft Edge Unix-like, macOS and Windows

(Chromium)

Шаблон:Yes[63][64] Шаблон:Yes[63][65] Шаблон:No[61] Шаблон:Yes[63][66] Шаблон:Yes[63][66] Шаблон:Yes[63]
Windows 10 (Legacy EdgeHTML) Шаблон:Partial[67][68][69] Шаблон:Yes[70] rowspan=2 Шаблон:DependsШаблон:Efn Шаблон:Partial Шаблон:Partial Шаблон:Partial[71]
Windows 10 Mobile Шаблон:No Шаблон:Yes[72] Шаблон:Partial Шаблон:Partial Шаблон:No
Konqueror Unix-like and Windows colspan="6" Шаблон:DependsШаблон:Efn
Mozilla Firefox Windows 7+ rowspan="7" Шаблон:Yes[73] Шаблон:YesШаблон:Efn rowspan="7" Шаблон:No[61] rowspan="7" Шаблон:Yes[74] rowspan="7" Шаблон:Yes[75][76] rowspan="3" Шаблон:Yes
Windows Vista Шаблон:Yes[77]
Windows XP and N editions Шаблон:Yes[78]
Linux Шаблон:DependsШаблон:Efn
43.0 (via FFmpeg)[79] 		Шаблон:YesШаблон:Citation needed
Android Шаблон:Yes[80] Шаблон:PartialШаблон:Citation needed
macOS Шаблон:Yes[81] Шаблон:Yes[82]
Firefox OS Шаблон:Yes[83] rowspan="1" Шаблон:No
Opera Mobile Android, iOS, Symbian, and Windows Mobile Шаблон:Yes Шаблон:Yes rowspan="2" Шаблон:No[84] Шаблон:Yes Шаблон:Yes Шаблон:Yes[59]
Opera macOS, Windows, Linux Шаблон:Yes[85] Шаблон:Yes[86] Шаблон:Yes[87][88] Шаблон:Yes Шаблон:Yes[59]
Safari iOS Шаблон:No rowspan="2" Шаблон:Yes[89] rowspan="2" Шаблон:Yes[90] rowspan="2" Шаблон:Partial rowspan="2" Шаблон:Partial rowspan="2" Шаблон:No
macOS Шаблон:Depends
GNOME Web Linux and BSD colspan="6" Шаблон:DependsШаблон:Efn

Шаблон:Explanation of the tables2

Notes

Шаблон:Notelist

Transparent video

Transparent video, that is video with an alpha channel, has multiple design advantages:[91]

  • As it has no burnt-in background color / pattern / motif, you can change the background and/or neighboring objects in a web page any time later without the need to re-generate the video to fit into its surroundings properly, which was the far less flexible technique so far.
  • You can very flexibly combine transparent videos with other elements (text, graphics, other videos or dynamically rendered content such as SVG or canvas) to achieve very dynamic layering effects.
  • It opens a whole lot of possibilities also in terms of responsive web design.

Web browser support for videos with alpha channel

Earlier solutions

  • Before the HTML5 era the only way to play back transparent video was by the help of Adobe Flash Player[94] and using the transparent [95] flag in its embedding code.

Digital rights management (Encrypted Media Extensions)

Шаблон:Main HTML has support for digital rights management (DRM, restricting how content can be used) via the HTML5 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.[96] 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.[97]

In 2013 Netflix added support for HTML5 video using EME, beside their old delivery method using a Silverlight plugin (also with DRM).[98]

Usage

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 HTML5 video instead of Adobe Flash for user-agents identifying as iPad.[99] HTML5 video was not as widespread as Flash videos, though there were rollouts of experimental HTML5-based video players from DailyMotion (using Ogg Theora and Vorbis format),[100] YouTube (using the H.264 and WebM formats),[101] and Vimeo (using the H.264 format).[102]

Support for HTML5 video has been steadily increasing. In June 2013, Netflix added support for HTML5 video.[103] In January 2015, YouTube switched to using HTML5 video instead of Flash by default.[104] In December 2015, Facebook switched from Flash to HTML5 for all video content.[105]

As of 2016, Flash is still widely installed on desktops, while generally not being supported on mobile devices such as smartphones.[106] The Flash plugin is widely assumed, including by Adobe,[106][107] to be destined to be phased out,[108][109] which will leave HTML5 video as the only widely supported method to play video on the World Wide Web. Chrome,[110][111] Firefox,[112] Safari,[113] and Edge,[114] 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.[115] Adobe announced on 25 July 2017 that they would be permanently ending development of Flash in 2020.[116]

See also

References

Шаблон:Reflist

External links

Шаблон:W3C standards Шаблон:Web interfaces

Партнерские ресурсы
Криптовалюты
Магазины
Хостинг
Разное

  1. ↑ Шаблон:Cite web
  2. ↑ Шаблон:Cite web
  3. ↑ Шаблон:Cite mailing list
  4. ↑ Шаблон:Cite web
  5. ↑ Шаблон:Cite web
  6. ↑ Шаблон:Cite web
  7. ↑ Шаблон:Cite web
  8. ↑ Шаблон:Cite mailing list
  9. ↑ Шаблон:Cite web
  10. ↑ Шаблон:Cite web
  11. ↑ Шаблон:Cite mailing list
  12. ↑ 12,0 12,1 Шаблон:Cite mailing list
  13. ↑ Шаблон:Cite mailing list
  14. ↑ Шаблон:Cite web
  15. ↑ 15,0 15,1 Шаблон:Cite web
  16. ↑ Шаблон:Cite web
  17. ↑ Шаблон:Cite web
  18. ↑ 18,0 18,1 Шаблон:Cite web
  19. ↑ Шаблон:Cite web
  20. ↑ Шаблон:Cite web
  21. ↑ Шаблон:Cite web
  22. ↑ Шаблон:Cite web
  23. ↑ Шаблон:Cite web
  24. ↑ Шаблон:Cite web
  25. ↑ Шаблон:Cite web
  26. ↑ Шаблон:Cite web
  27. ↑ Шаблон:Cite web
  28. ↑ Шаблон:Cite web
  29. ↑ Шаблон:Cite web
  30. ↑ Шаблон:Cite web
  31. ↑ Ошибка цитирования Неверный тег <ref>; для сносок FFnightly не указан текст
  32. ↑ Шаблон:Cite web
  33. ↑ Шаблон:Citation
  34. ↑ Шаблон:Cite mailing list
  35. ↑ 35,0 35,1 Шаблон:Cite web
  36. ↑ 36,0 36,1 Шаблон:Cite web
  37. ↑ 37,0 37,1 Шаблон:Cite web
  38. ↑ Шаблон:Cite web
  39. ↑ Шаблон:Cite web
  40. ↑ Шаблон:Cite web
  41. ↑ Шаблон:Cite web
  42. ↑ Шаблон:Cite web
  43. ↑ Шаблон:Citation
  44. ↑ Шаблон:Citation
  45. ↑ Шаблон:Citation
  46. ↑ 46,0 46,1 46,2 46,3 46,4 Шаблон:Cite web
  47. ↑ Шаблон:Citation
  48. ↑ Шаблон:Citation
  49. ↑ Шаблон:Citation
  50. ↑ Шаблон:Citation
  51. ↑ Шаблон:Citation
  52. ↑ Шаблон:Cite web
  53. ↑ Шаблон:Citation
  54. ↑ 54,0 54,1 Шаблон:Cite web
  55. ↑ Шаблон:Cite web
  56. ↑ Шаблон:Cite web
  57. ↑ Шаблон:Cite web
  58. ↑ Шаблон:Citation
  59. ↑ 59,0 59,1 59,2 Шаблон:Cite web
  60. ↑ Шаблон:Citation
  61. ↑ 61,0 61,1 61,2 Шаблон:Cite web
  62. ↑ 62,0 62,1 Шаблон:Citation
  63. ↑ 63,0 63,1 63,2 63,3 63,4 Шаблон:Cite web
  64. ↑ Шаблон:Cite web
  65. ↑ Шаблон:Cite web
  66. ↑ 66,0 66,1 Шаблон:Cite web
  67. ↑ Шаблон:Cite web
  68. ↑ Ошибка цитирования Неверный тег <ref>; для сносок html5test-edge17 не указан текст
  69. ↑ Ошибка цитирования Неверный тег <ref>; для сносок edge_better_webm не указан текст
  70. ↑ Шаблон:Cite web
  71. ↑ Шаблон:Cite web
  72. ↑ Шаблон:Cite web
  73. ↑ Шаблон:Cite web
  74. ↑ Шаблон:Cite web
  75. ↑ Шаблон:Citation
  76. ↑ Шаблон:Cite web
  77. ↑ Шаблон:Citation
  78. ↑ Шаблон:Citation
  79. ↑ Шаблон:Citation
  80. ↑ Шаблон:Cite news
  81. ↑ Шаблон:Citation
  82. ↑ Ошибка цитирования Неверный тег <ref>; для сносок firefox_66_releasenotes не указан текст
  83. ↑ Шаблон:Cite web
  84. ↑ Шаблон:Cite web
  85. ↑ Шаблон:Citation
  86. ↑ Шаблон:Cite web
  87. ↑ Шаблон:Citation
  88. ↑ Шаблон:Citation
  89. ↑ Шаблон:Cite web
  90. ↑ Шаблон:Cite web
  91. ↑ Шаблон:Cite web
  92. ↑ Шаблон:Cite web
  93. ↑ Шаблон:Cite web
  94. ↑ Шаблон:Cite web
  95. ↑ Шаблон:Cite web
  96. ↑ Шаблон:Cite web
  97. ↑ Шаблон:Cite web
  98. ↑ Шаблон:Cite news
  99. ↑ Шаблон:Cite web
  100. ↑ Шаблон:Cite web
  101. ↑ Шаблон:Cite web
  102. ↑ Шаблон:Cite web
  103. ↑ Шаблон:Cite web
  104. ↑ Шаблон:Cite web
  105. ↑ Шаблон:Cite web
  106. ↑ 106,0 106,1 Шаблон:Cite web
  107. ↑ Шаблон:Cite web
  108. ↑ Шаблон:Cite news
  109. ↑ Шаблон:Cite magazine
  110. ↑ Шаблон:Cite web
  111. ↑ Шаблон:Cite web
  112. ↑ Шаблон:Cite web
  113. ↑ Шаблон:Cite web
  114. ↑ Шаблон:Cite web
  115. ↑ Шаблон:Cite web
  116. ↑ Шаблон:Cite web
Источник — http://wikihandbk.com/ruwiki/index.php?title=Английская_Википедия:HTML_video&oldid=15099529