video要素

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

HTML
各種項目
比較
  • マークアップ言語
  • HTML
  • XHTML

例

この例は、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>

ビデオコーデック
詳細は「en:Comparison_of_layout_engines_(HTML5_Media)」および「en:HTML5_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 N/A r18297以降[6] 手動インストール[注 1][8]。 非対応[9] r47759以降[10] r172738以降[11] 対応[5]
Google Chrome
Windows
124.0.6367.201/202[12] ウィキデータを編集 / 2024年5月9日
macOS
124.0.6367.201/202[12] ウィキデータを編集 / 2024年5月9日
Linux
124.0.6367.201/202[12] ウィキデータを編集 / 2024年5月9日
Android
124.0.6367.171[13] ウィキデータを編集 / 2024年5月10日
iOS
125.0.6422.33[14] ウィキデータを編集 / 2024年5月8日
 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
124.0.2478.80[25] ウィキデータを編集 / 2024年5月2日
macOS
124.0.2478.80[25] ウィキデータを編集 / 2024年5月2日
Linux
124.0.2478.80[25] ウィキデータを編集 / 2024年5月2日
Android
123.0.2420.74[26] ウィキデータを編集 / 2024年4月2日
iOS
123.0.2420.74[26] ウィキデータを編集 / 2024年4月2日
 Web Media Extensions が必要[27] 12.0以降[28] ハードウェアデコーダが必要 16.0以降（MSE経由のみ）[29] ハードウェアデコーダ有効化[30]
15.0以降（MSE経由のみ）[31]		 ?
Windows 10 Mobile 13.0以降[32] ?
Konqueror 23.08.3[33] ウィキデータを編集 - 2023年11月9日 [±] 4.4以降（OS レベルコーデックが必要）[注 4]
Mozilla Firefox Windows 7以降
通常版
125.0.3[35] ウィキデータを編集 / 2024年4月29日
ESR
115.10.0esr[36] ウィキデータを編集 / 2024年4月16日
 3.5以降[37] 21.0以降[注 5] 非対応[18] 4.0以降[40][41] 28.0以降[42][43] Nightly[44]
Windows Vista 22.0以降[45]
Windows XP 手動インストール[46][注 6]
Linux 26.0以降（GStreamer利用）[注 7]
Android 17.0以降[50]
OS X 34.0以降[51]
Firefox OS 1.1以降[52]
Opera
Android45.0.2246.125120 / 2018年2月12日 (2018-02-12)[53]
Android (classic)12.1.8 / 2014年11月6日 (2014-11-06)[54]
Symbian S6012.0.22 / 2012年6月24日 (2012-06-24)[55]
Windows Mobile10.0 / 2010年3月16日 (2010-03-16)[56]
 非対応 11.50以降 非対応[57] 15.0以降 16.0以降 57.0以降（Android）[5]
Windows
109.0.5097.80 / 2024年5月8日 (2024-05-08)[58][59][60]
Mac
109.0.5097.80 / 2024年5月8日 (2024-05-08)[61][59][60]
Android
82.2.4342.79505 / 2024年5月6日 (2024-05-06)[62]
iOS
4.6.5 / 2024年5月1日 (2024-05-01)[63]
Opera Mini - Android
81.0.2254.71844 / 2024年5月7日 (2024-05-07)[64]
Opera Crypto - Windows / Mac
108.0.5067.28 / 2024年3月14日 (2024-03-14)[65][66][67]
 10.50以降[68] 24.0以降[69] 10.60以降[70][71] 非対応 57.0以降[5]
Safari iOS 17.5 - 2024年5月13日 (2024-05-13)[72] [±] 非対応 3.1以降[73][74] 11.0以降[75] 非対応 非対応 ?
OS X 手動インストール 手動インストール[76] ?
Web Unix系 3.38.2 - 2020年11月25日 (2020-11-25)[77] [±] 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がサポートするすべてのフォーマットに対応[34]。DirectShow、QuickTime、GStreamer、xineを含むPhononバックエンドを利用可能。MPlayerおよびVLCをバックエンドとする利用は開発中。
  5. バージョン20でサポートされたが、既定で無効化されていた[38][39]。
  6. DivXのWeb Player version 2.xのみHTML5対応[47]。
  7. バージョン26以前は既定で無効化されていた[48]。また、システムのコーデックに依存する[49]。
  8. Webkit/GTK+GStreamerがサポートするすべてのフォーマットに対応[78][79]。

参照
  1. “Phonon documentation of backends”, Qt, Nokia, http://doc.qt.nokia.com/latest/phonon-overview.html#backends 2014年10月30日閲覧。
  2. “Phonon documentation of querying”, Qt, Nokia, http://doc.qt.nokia.com/latest/phonon-overview.html#querying-backends-for-support 2014年10月30日閲覧。
  3. Kyrnin, Jennifer, Understanding HTML5 Video Formats, About, http://webdesign.about.com/od/video/a/html5-video-formats.htm 2014年10月30日閲覧。
  4. “Supported media formats”. Google. 2018年10月1日閲覧。
  5. “AV1 Decoder”. Google. 2018年10月1日閲覧。
  6. Issue 4363: [HTML5-Video] Enable HTML5 video/audio elements, Google, https://code.google.com/p/chromium/issues/detail?id=4363 2014年10月30日閲覧。
  7. “Get Chromium on Ubuntu To Play MP4, H.264, MP3 & view PDF files natively”, OMG Ubuntu, (2010-11-21), http://www.omgubuntu.co.uk/2010/11/get-chromium-on-ubuntu-to-play-mp4-h-264-mp3-view-pdf-files-natively/ 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, http://codereview.chromium.org/2093007 2014年10月30日閲覧。
  11. http://src.chromium.org/viewvc/chrome?view=rev&revision=172738
  12. "Stable Channel Update for Desktop"; 閲覧日: 2024年5月10日; 作品または名前の言語: 英語; 出版日: 2024年5月9日.
  13. "Chrome for Android Update"; 閲覧日: 2024年5月11日; 作品または名前の言語: 英語; 出版日: 2024年5月10日.
  14. "Chrome Stable for iOS Update"; 閲覧日: 2024年5月8日; 作品または名前の言語: 英語; 出版日: 2024年5月8日.
  15. “Google Chrome support Theora and Vorbis”, Code, Google, (2010-05-20), https://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome 2014年10月30日閲覧。
  16. Google Chrome 3.0 will support <video> tag, FR: C net, http://www.cnetfrance.fr/news/google-chrome-3-39503164.htm
  17. Mike, Jazayeri (2011年1月11日). “Chromium Blog: HTML Video Code Support in Chrome”. The Chromium Blog. 2014年10月30日閲覧。
  18. “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, http://blog.chromium.org/2010/05/webm-and-vp8-land-in-chromium.html 2014年10月30日閲覧。
  20. Kersey, Jason (2010-06-03), “Dev Channel Update”, Chrome Releases, Google, http://googlechromereleases.blogspot.com/2010/06/dev-channel-update.html 2014年10月30日閲覧。
  21. Chrome Adds Support for the Next-Generation VP9 Video Codec and Mozilla's Opus Audio, http://news.softpedia.com/news/Chrome-Adds-Support-for-the-Next-Generation-VP9-Video-Codec-and-Mozilla-s-Opus-Audio-317728.shtml 2014年10月30日閲覧。
  22. Chrome Now Supports Google's Next-Gen VP9 Video Codec by Default, http://news.softpedia.com/news/Chrome-Now-Supports-Google-Next-Gen-VP9-Video-Codec-by-Default-361550.shtml 2014年10月30日閲覧。
  23. McCracken, Harry (2010-03-16), Microsoft Previews the Revamped Internet Explorer 9 Platform, Technologizer, http://technologizer.com/2010/03/16/ie9-platform-preview/ 2014年10月30日閲覧。
  24. HTML5 Video Support in IE9 Mobile, Microsoft, (2011-10-13), http://blogs.windows.com/windows_phone/b/wpdev/archive/2011/10/13/html5-video-support-in-ie9-mobile.aspx 2014年3月11日閲覧。
  25. "Release notes for Microsoft Edge Stable Channel"; 出版日: 2024年5月2日.
  26. "Release notes for Microsoft Edge Mobile Stable Channel".
  27. “Introducing the Web Media Extension Package with OGG Vorbis and Theora support for Microsoft Edge”. Microsoft Edge Team (2017年12月5日). 2018年10月1日閲覧。
  28. “HTML5test - How well does your browser support HTML5?”. HTML5test. 2018年10月1日閲覧。
  29. “HTML5test - How well does your browser support HTML5?”. HTML5test. 2018年10月1日閲覧。
  30. “The status of VP9 Video Playback in Microsoft Edge is Shipped”. Microsoft. 2018年10月1日閲覧。
  31. “WebM, VP9 and Opus Support in Microsoft Edge”. Microsoft Edge Team (2016年4月18日). 2018年10月1日閲覧。
  32. “HTML5test - How well does your browser support HTML5?”. HTML5test. 2018年10月1日閲覧。
  33. "Konqueror - KDE Applications".
  34. Vestbø, Tor Arne (2008-05-13), Top Secret, Hush Hush!, Nokia, http://labs.trolltech.com/blogs/2008/05/13/top-secret-hush-hush/ 2014年10月30日閲覧。
  35. "Firefox 125.0.3, See All New Features, Updates and Fixes"; 閲覧日: 2024年4月30日; 作品または名前の言語: 英語; 出版日: 2024年4月29日.
  36. "Firefox ESR 115.10.0, See All New Features, Updates and Fixes"; 閲覧日: 2024年4月16日; 作品または名前の言語: 英語; 出版日: 2024年4月16日.
  37. (release notes) Firefox 3.5, Mozilla, (2009-06-30), http://www.mozilla.com/en-US/firefox/3.5/releasenotes/ 2014年10月30日閲覧。
  38. Bug 799315 – Windows Media Foundation backend for media playback, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=799315 2014年10月30日閲覧。
  39. Bug 837859 – Enable WMF backend, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=837859 2014年10月30日閲覧。
  40. Bug 566243 – Merge mozilla-webmedia repository to mozilla-central, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=566243 2014年10月30日閲覧。
  41. Firefox Nightly Builds, Mozilla, http://nightly.mozilla.org/ 2014年10月30日閲覧。
  42. [Phoronix Mozilla Firefox Enables VP9 Video Codec By Default], Phoronix, http://www.phoronix.com/scan.php?page=news_item&px=MTUzODA 2014年10月30日閲覧。
  43. http://www.mozilla.org/en-US/firefox/28.0/releasenotes/
  44. “DASH playback of AV1 video in Firefox”. Mozilla Hacks. 2018年10月1日閲覧。
  45. Bug 825153 - Add support for Windows Vista WMF and prepend the system32 directory path to dll names, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=825153 2014年10月30日閲覧。
  46. http://blog.divx.com/2010/12/16/hey-microsoft-divx-already-supports-h-264-with-html5-in-firefox/
  47. https://forums.divx.com/divx/topics/html5_integration_broken
  48. Bug 886181 - Pref on gstreamer backend, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=886181 2014年10月30日閲覧。
  49. Bug 794282 - Enable GStreamer in official builds, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=794282 2014年10月30日閲覧。
  50. http://arstechnica.com/information-technology/2012/11/mozilla-ships-firefox-with-h-264-support-on-android/
  51. Bug 1070703 - Add mp4 support in 10.6 and 10.7 on Aurora, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=1070703 2014年10月30日閲覧。
  52. https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/H.264_support_in_Firefox
  53. “Opera ブラウザ - ニュースおよび検索” (2018年2月12日). 2018年2月16日閲覧。
  54. “Opera Mobile Classic” (2014年11月16日). 2015年1月20日閲覧。
  55. “Opera Mobile 12.0.2 for S60” (2012年6月24日). 2014年2月25日時点のオリジナルよりアーカイブ。2014年10月16日閲覧。
  56. “No mobile phone left behind: Opera Mini 5 and Opera Mobile 10 introduced in final, consumer-ready versions” (2010年3月16日). 2014年10月16日閲覧。
  57. “The Case for VP9”. StreamingMedia.com. 2018年10月1日閲覧。
  58. “Thanks for downloading Opera”. Opera Norway. 2024年5月13日閲覧。
  59. “Stable Archives - Opera Desktop”. Opera Norway (2024年5月8日). 2024年5月13日閲覧。
  60. “Index of /ftp/pub/opera/desktop/” (2024年5月8日). 2024年5月13日閲覧。
  61. “Thanks for downloading Opera”. Opera Norway. 2024年5月13日閲覧。
  62. “VPN を備えた Opera ブラウザ - Google Play のアプリ”. Google Play. 2024年5月13日閲覧。
  63. “「Opera ブラウザとプライベート VPN」をApp Storeで”. App Store. 2024年5月13日閲覧。
  64. “Opera Mini Web ブラウザ - Google Play のアプリ”. Google Play. 2024年5月13日閲覧。
  65. “Thanks for downloading Opera”. Opera Norway. 2024年3月21日閲覧。
  66. “Thanks for downloading Opera”. Opera Norway. 2024年3月21日閲覧。
  67. “Index of /ftp/pub/opera_crypto/” (2024年3月14日). 2024年3月21日閲覧。
  68. Jägenstedt, Philip (2009-12-31), “(re-)Introducing <video>” (official blog), Core developers (Opera), http://my.opera.com/core/blog/2009/12/31/re-introducing-video 2014年10月30日閲覧。
  69. http://blogs.opera.com/desktop/changelog-24/
  70. Lie, Håkon Wium (2010-05-19), Welcome, WebM <video>!, Opera, http://labs.opera.com/news/2010/05/19/ 2014年10月30日閲覧。
  71. Mills, Chris (2010-05-19), Opera supports the WebM video format, Opera, http://dev.opera.com/articles/view/opera-supports-webm-video/ 2014年10月30日閲覧。
  72. “Safari 17.5 Release Notes”. Apple. 2024年5月14日閲覧。
  73. “HTML5 video formats”, Web design, About, http://webdesign.about.com/od/video/a/html5-video-formats.htm.
  74. “Media formats supported by the HTML audio and video elements”, Developer, Mozilla, http://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements.
  75. “WWDC17 – HEVC with HLS – Apple just announced a feature that we support out of the box”. Bitmovin (2017年6月6日). 2018年10月1日閲覧。
  76. “WebM plugin available”, Code, Google, https://code.google.com/p/webm/downloads/detail?name=WebM%20Component%20Installer.pkg&can=2&q= 2014年10月30日閲覧。
  77. Catanzaro, Michael (25 November 2020). "GNOME 3.38.2 released!". gnome-announce-list (Mailing list) (英語). 2020年12月1日閲覧。
  78. Persch, Christian (April 1, 2008), “The Future of Epiphany” (announcement), epiphany mailing list-list, http://mail.gnome.org/archives/epiphany-list/2008-April/msg00000.html
  79. “Overview of available plug-ins”, GStreamer, http://gstreamer.freedesktop.org/documentation/plugins.html 2014年10月30日閲覧。

外部リンク
サーバサイド
プロトコル
APIs
トピックス
クライアントサイド
Browser APIs
Web API
W3C
クロノス
その他
  • Gears
  • Web SQL Database
  • WebUSB
トピックス
関連項目
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.