video要素(ビデオようそ、英: video element)とは、HTML5以降のHTMLの一部で、動画のためのHTML要素。

例

この例は、HTML で書かれたウェブページの中に WebM 動画を埋め込む例。

<video src="movie.webm" poster="movie.jpg" controls>
	ここは video 要素をサポートしないウェブブラウザのためのフォールバックコンテンツ
</video>

複数ソース

<video poster="movie.jpg" controls>
	<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"' />
	<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
	<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
	<p>ここはフォールバックコンテンツ</p>
</video>

ビデオコーデック

HTMLのvideo要素でサポートするビデオコーデックについて、主要ブラウザの開発元の間で意見が分かれている。マイクロソフトやAppleはH.264を支持し、TheoraやWebMをサポートしていない。Google・Mozilla Foundation・Opera SoftwareはTheoraやWebMを支持していたが、のちにH.264もサポートするようになった。

この表は、それぞれのウェブブラウザにおいてサポートされているビデオフォーマットを示している。多くのブラウザではソフトウェアコンポーネントを内蔵するのではなくマルチメディアフレームワークを採用しており、ビデオのデコード、表示にはこれを用いている。この場合、どのフォーマットに対応しているかは、ブラウザではなくOSおよびサードパーティのコーデックに依存する[1]。

ビデオフォーマットはMIME typeによって判別可能である。MIME typeは使用するマルチメディアフレームワークの決定にも用いられる[2]。

これらのブラウザのうち、Mozilla FirefoxおよびOperaはOSから独立しており、デコードのためのライブラリを内蔵している。Internet ExplorerおよびSafariは、それぞれのOSが提供するフレームワークを利用する。Konquerorは、Windows上ではInternet Explorerと、OS X上ではSafariと同じフォーマットに対応する。一般的に、ウェブブラウザがサポートするフォーマットはベンダーが提供するライブラリ(Media Foundation、QuickTime、GStreamer、Phononなど)にも左右される。

ウェブブラウザ オペレーティングシステム 最新安定版 サポートするフォーマット
Theora H.264 (MP4) HEVC (MP4) VP8 (WebM) VP9 (WebM) AV1 (WebM)
Android ブラウザ Android 4.4.4 2.3以降[3] 3.0以降[3] 5.0以降[4] 2.3以降[3] 4.4以降[5] ?
Chromium Unix系、Windows — r18297以降[6] 手動インストール[注 1][8]。 非対応[9] r47759以降[10] r172738以降[11] 対応[5]
Google Chrome
Windows
131.0.6778.204/205[12] ウィキデータを編集 / 2024年12月18日 (18日前)
macOS
131.0.6778.204/205[12] ウィキデータを編集 / 2024年12月18日 (18日前)
Linux
131.0.6778.204/205[12] ウィキデータを編集 / 2024年12月18日 (18日前)
Android
131.0.6778.200[13] ウィキデータを編集 / 2024年12月18日 (18日前)
iOS
131.0.6778.154[14] ウィキデータを編集 / 2024年12月17日 (19日前)
3.0以降[15][16] 3.0以降[16][注 2] 非対応[18] 6.0以降[19][20] 29.0以降[注 3] 70.0以降[5]
Internet Explorer Windows 11.0 手動インストール 9.0以降[23] 非対応[18] 手動インストール 非対応 非対応
Windows Phone 11.0 非対応 9.0以降[24] 非対応
Windows RT 10.0 10.0[24]
Microsoft Edge Windows 10
Windows
130.0.2849.68[25] ウィキデータを編集 / 2024年10月31日 (2か月前)
macOS
130.0.2849.68[25] ウィキデータを編集 / 2024年10月31日 (2か月前)
Linux
130.0.2849.68[25] ウィキデータを編集 / 2024年10月31日 (2か月前)
Android
126.0.2592.117[26] ウィキデータを編集 / 2024年7月23日 (5か月前)
iOS
126.0.2592.120[27] ウィキデータを編集 / 2024年7月24日 (5か月前)
Web Media Extensions が必要[28] 12.0以降[29] ハードウェアデコーダが必要 16.0以降(MSE(英語版)経由のみ)[30] ハードウェアデコーダ有効化[31]
15.0以降(MSE経由のみ)[32]
?
Windows 10 Mobile 13.0以降[33] ?
Konqueror 24.11.90[34] ウィキデータを編集 - 2024年11月28日 (38日前) [±] 4.4以降(OS レベルコーデックが必要)[注 4]
Mozilla Firefox Windows 7以降
通常版
133.0.3[36] ウィキデータを編集 / 2024年12月10日 (26日前)
ESR
128.5.2esr[37] ウィキデータを編集 / 2024年12月12日 (24日前)
3.5以降[38] 21.0以降[注 5] 非対応[18] 4.0以降[41][42] 28.0以降[43][44] Nightly[45]
Windows Vista 22.0以降[46]
Windows XP 手動インストール[47][注 6]
Linux 26.0以降(GStreamer利用)[注 7]
Android 17.0以降[51]
OS X 34.0以降[52]
Firefox OS 1.1以降[53]
Opera
Android45.0.2246.125120 / 2018年2月12日 (6年前) (2018-02-12)[54]
Android (classic)12.1.8 / 2014年11月6日 (10年前) (2014-11-06)[55]
Symbian S6012.0.22 / 2012年6月24日 (12年前) (2012-06-24)[56]
Windows Mobile10.0 / 2010年3月16日 (14年前) (2010-03-16)[57]
非対応 11.50以降 非対応[58] 15.0以降 16.0以降 57.0以降(Android)[5]
Windows
115.0.5322.77 / 2024年12月5日 (31日前) (2024-12-05)[59][60][61]
Mac
115.0.5322.77 / 2024年12月5日 (31日前) (2024-12-05)[62][60][61]
Android
86.1.4550.82442 / 2024年12月2日 (34日前) (2024-12-02)[63]
iOS
5.2.0 / 2024年12月3日 (33日前) (2024-12-03)[64]
Opera Mini - Android
86.0.2254.74831 / 2024年11月12日 (54日前) (2024-11-12)[65]
Opera Crypto - Windows / Mac
108.0.5067.28 / 2024年3月14日 (9か月前) (2024-03-14)[66][67][68]
10.50以降[69] 24.0以降[70] 10.60以降[71][72] 非対応 57.0以降[5]
Safari iOS 18.2 - 2024年12月11日 (25日前) (2024-12-11)[73] [±] 非対応 3.1以降[74][75] 11.0以降[76] 非対応 非対応 ?
OS X 手動インストール 手動インストール[77] ?
Web Unix系 3.38.2 - 2020年11月25日 (4年前) (2020-11-25)[78] [±] 2.28以降(OS レベルコーデックが必要)[注 8]

注

[脚注の使い方]
  1. ↑ サードパーティーのコーデックパッケージを利用可能[7]。
  2. ↑ 2011年1月11日に、H.264のサポート終了が告知されたが[17]、2014年10月現在サポートは終了されていない。
  3. ↑ バージョン25.0でサポートされたが、既定では無効化されていた[21][22]。
  4. ↑ Qt 4.5上のPhononがサポートするすべてのフォーマットに対応[35]。DirectShow、QuickTime、GStreamer、xineを含むPhononバックエンドを利用可能。MPlayerおよびVLCをバックエンドとする利用は開発中。
  5. ↑ バージョン20でサポートされたが、既定で無効化されていた[39][40]。
  6. ↑ DivXのWeb Player version 2.xのみHTML5対応[48]。
  7. ↑ バージョン26以前は既定で無効化されていた[49]。また、システムのコーデックに依存する[50]。
  8. ↑ Webkit/GTK+GStreamerがサポートするすべてのフォーマットに対応[79][80]。

参照

  1. ↑ “Phonon documentation of backends”, Qt, Nokia 2014年10月30日閲覧。
  2. ↑ “Phonon documentation of querying”, Qt, Nokia 2014年10月30日閲覧。
  3. 1 2 3 Kyrnin, Jennifer, Understanding HTML5 Video Formats, About 2014年10月30日閲覧。
  4. ↑ “Supported media formats”. Google. 2018年10月1日閲覧。
  5. 1 2 3 4 5 “AV1 Decoder”. Google. 2018年10月1日閲覧。
  6. ↑ Issue 4363: [HTML5-Video] Enable HTML5 video/audio elements, Google 2014年10月30日閲覧。
  7. ↑ “Get Chromium on Ubuntu To Play MP4, H.264, MP3 & view PDF files natively”, OMG Ubuntu, (2010-11-21) 2014年10月30日閲覧。
  8. ↑ http://earthwithsun.com/questions/655605/how-do-i-add-mp3-mp4-and-h-264-support-to-chromium-on-windows
  9. ↑ “Audio/Video”. Google. 2018年10月1日閲覧。
  10. ↑ “Issue 2093007: Chromium side changes for enabling VP8 and WebM support”, Code review, Google 2014年10月30日閲覧。
  11. ↑ http://src.chromium.org/viewvc/chrome?view=rev&revision=172738
  12. 1 2 3 "Stable Channel Update for Desktop"; 閲覧日: 2024年12月19日; 作品または名前の言語: 英語; 出版日: 2024年12月18日.
  13. ↑ "Chrome for Android Update"; 閲覧日: 2024年12月19日; 作品または名前の言語: 英語; 出版日: 2024年12月18日.
  14. ↑ "Chrome Stable for iOS Update"; 閲覧日: 2024年12月17日; 作品または名前の言語: 英語; 出版日: 2024年12月17日.
  15. ↑ “Google Chrome support Theora and Vorbis”, Code, Google, (2010-05-20) 2014年10月30日閲覧。
  16. 1 2 Google Chrome 3.0 will support <video> tag, FR: C net
  17. ↑ Mike, Jazayeri (11 January 2011). “Chromium Blog: HTML Video Code Support in Chrome”. The Chromium Blog. 2014年10月30日閲覧。
  18. 1 2 3 “Apple Supports H.265, But So Far Only in FaceTime on an iPhone 6”. StreamingMedia.com (2014年11月5日). 2018年10月1日閲覧。
  19. ↑ Bankoski, Jim (2010-05-19), “WebM and VP8 land in Chromium” (World Wide Web log), Chromium, Google 2014年10月30日閲覧。
  20. ↑ Kersey, Jason (2010-06-03), “Dev Channel Update”, Chrome Releases, Google 2014年10月30日閲覧。
  21. ↑ Chrome Adds Support for the Next-Generation VP9 Video Codec and Mozilla's Opus Audio 2014年10月30日閲覧。
  22. ↑ Chrome Now Supports Google's Next-Gen VP9 Video Codec by Default 2014年10月30日閲覧。
  23. ↑ McCracken, Harry (2010-03-16), Microsoft Previews the Revamped Internet Explorer 9 Platform, Technologizer 2014年10月30日閲覧。
  24. 1 2 HTML5 Video Support in IE9 Mobile, Microsoft, (2011-10-13) 2014年3月11日閲覧。
  25. 1 2 3 "Release notes for Microsoft Edge Stable Channel"; 閲覧日: 2024年10月31日; 出版日: 2024年10月31日.
  26. ↑ "Release notes for Microsoft Edge Mobile Stable Channel"; 閲覧日: 2024年7月26日; 出版日: 2024年7月23日.
  27. ↑ "Release notes for Microsoft Edge Mobile Stable Channel"; 閲覧日: 2024年7月26日; 出版日: 2024年7月24日.
  28. ↑ “Introducing the Web Media Extension Package with OGG Vorbis and Theora support for Microsoft Edge”. Microsoft Edge Team (2017年12月5日). 2018年10月1日閲覧。
  29. ↑ “HTML5test - How well does your browser support HTML5?”. HTML5test. 2018年10月1日閲覧。
  30. ↑ “HTML5test - How well does your browser support HTML5?”. HTML5test. 2018年10月1日閲覧。
  31. ↑ “The status of VP9 Video Playback in Microsoft Edge is Shipped”. Microsoft. 2018年10月1日閲覧。
  32. ↑ “WebM, VP9 and Opus Support in Microsoft Edge”. Microsoft Edge Team (2016年4月18日). 2018年10月1日閲覧。
  33. ↑ “HTML5test - How well does your browser support HTML5?”. HTML5test. 2018年10月1日閲覧。
  34. ↑ "v24.11.90"; 閲覧日: 2024年12月11日.
  35. ↑ Vestbø, Tor Arne (2008-05-13), Top Secret, Hush Hush!, Nokia 2014年10月30日閲覧。
  36. ↑ "Firefox 133.0.3, See All New Features, Updates and Fixes"; 閲覧日: 2024年12月30日; 作品または名前の言語: 英語; 出版日: 2024年12月10日.
  37. ↑ "Firefox ESR 128.5.2, See All New Features, Updates and Fixes"; 閲覧日: 2024年12月23日; 作品または名前の言語: 英語; 出版日: 2024年12月12日.
  38. ↑ (release notes) Firefox 3.5, Mozilla, (2009-06-30) 2014年10月30日閲覧。
  39. ↑ Bug 799315 – Windows Media Foundation backend for media playback, Mozilla 2014年10月30日閲覧。
  40. ↑ Bug 837859 – Enable WMF backend, Mozilla 2014年10月30日閲覧。
  41. ↑ Bug 566243 – Merge mozilla-webmedia repository to mozilla-central, Mozilla 2014年10月30日閲覧。
  42. ↑ Firefox Nightly Builds, Mozilla 2014年10月30日閲覧。
  43. ↑ [Phoronix Mozilla Firefox Enables VP9 Video Codec By Default], Phoronix 2014年10月30日閲覧。
  44. ↑ http://www.mozilla.org/en-US/firefox/28.0/releasenotes/
  45. ↑ “DASH playback of AV1 video in Firefox”. Mozilla Hacks. 2018年10月1日閲覧。
  46. ↑ Bug 825153 - Add support for Windows Vista WMF and prepend the system32 directory path to dll names, Mozilla 2014年10月30日閲覧。
  47. ↑ http://blog.divx.com/2010/12/16/hey-microsoft-divx-already-supports-h-264-with-html5-in-firefox/
  48. ↑ https://forums.divx.com/divx/topics/html5_integration_broken
  49. ↑ Bug 886181 - Pref on gstreamer backend, Mozilla 2014年10月30日閲覧。
  50. ↑ Bug 794282 - Enable GStreamer in official builds, Mozilla 2014年10月30日閲覧。
  51. ↑ http://arstechnica.com/information-technology/2012/11/mozilla-ships-firefox-with-h-264-support-on-android/
  52. ↑ Bug 1070703 - Add mp4 support in 10.6 and 10.7 on Aurora, Mozilla 2014年10月30日閲覧。
  53. ↑ https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/H.264_support_in_Firefox
  54. ↑ “Opera ブラウザ - ニュースおよび検索” (2018年2月12日). 2018年2月16日閲覧。
  55. ↑ “Opera Mobile Classic” (2014年11月16日). 2015年1月20日閲覧。
  56. ↑ “Opera Mobile 12.0.2 for S60” (2012年6月24日). 2014年2月25日時点のオリジナルよりアーカイブ。2014年10月16日閲覧。
  57. ↑ “No mobile phone left behind: Opera Mini 5 and Opera Mobile 10 introduced in final, consumer-ready versions” (2010年3月16日). 2014年10月16日閲覧。
  58. ↑ “The Case for VP9”. StreamingMedia.com. 2018年10月1日閲覧。
  59. ↑ “Thanks for downloading Opera”. Opera Norway. 2024年12月6日閲覧。
  60. 1 2 “Stable Archives - Opera Desktop”. Opera Norway (2024年12月5日). 2024年12月6日閲覧。
  61. 1 2 “Index of /ftp/pub/opera/desktop/” (2024年12月5日). 2024年12月6日閲覧。
  62. ↑ “Thanks for downloading Opera”. Opera Norway. 2024年12月6日閲覧。
  63. ↑ “VPN を備えた Opera ブラウザ - Google Play のアプリ”. Google Play. 2024年12月6日閲覧。
  64. ↑ “「Opera ブラウザとプライベート VPN」をApp Storeで”. App Store. 2024年12月6日閲覧。
  65. ↑ “Opera Mini Web ブラウザ - Google Play のアプリ”. Google Play. 2024年12月6日閲覧。
  66. ↑ “Thanks for downloading Opera”. Opera Norway. 2024年3月21日閲覧。
  67. ↑ “Thanks for downloading Opera”. Opera Norway. 2024年3月21日閲覧。
  68. ↑ “Index of /ftp/pub/opera_crypto/” (2024年3月14日). 2024年3月21日閲覧。
  69. ↑ Jägenstedt, Philip (2009-12-31), “(re-)Introducing <video>” (official blog), Core developers (Opera) 2014年10月30日閲覧。
  70. ↑ http://blogs.opera.com/desktop/changelog-24/
  71. ↑ Lie, Håkon Wium (2010-05-19), Welcome, WebM <video>!, Opera 2014年10月30日閲覧。
  72. ↑ Mills, Chris (2010-05-19), Opera supports the WebM video format, Opera 2014年10月30日閲覧。
  73. ↑ “Safari 18.2 Release Notes”. Apple. 2024年12月14日閲覧。
  74. ↑ “HTML5 video formats”, Web design, About.
  75. ↑ “Media formats supported by the HTML audio and video elements”, Developer, Mozilla.
  76. ↑ “WWDC17 – HEVC with HLS – Apple just announced a feature that we support out of the box”. Bitmovin (2017年6月6日). 2018年10月1日閲覧。
  77. ↑ “WebM plugin available”, Code, Google 2014年10月30日閲覧。
  78. ↑ Catanzaro, Michael (25 November 2020). "GNOME 3.38.2 released!". gnome-announce-list (Mailing list) (英語). 2020年12月1日閲覧。
  79. ↑ Persch, Christian (April 1, 2008), “The Future of Epiphany” (announcement), epiphany mailing list-list
  80. ↑ “Overview of available plug-ins”, GStreamer 2014年10月30日閲覧。

外部リンク

⌬ Phoenix Mesh CID: 未登録 IPFS未登録 📡 0ピア N=1 CRITICAL PQS A86