video要素

出典: フリー百科事典『ウィキペディア（Wikipedia）』
ナビゲーションに移動 検索に移動
HTML
HTML.svg

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>

ビデオコーデック[編集]

詳細は「en:Comparison_of_layout_engines_(HTML5_Media)」および「en:HTML5_video」を参照

HTMLのvideo要素でサポートするビデオコーデックについて、主要ブラウザの開発元の間で意見が分かれている。マイクロソフトやアップルは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, macOS, Linux
88.0.4324.104[12] ウィキデータを編集 / 2021年1月19日（8日前） （2021-01-19）
Android
88.0.4324.93[13] ウィキデータを編集 / 2021年1月19日（8日前） （2021-01-19）
iOS
87.0.4280.77[14] ウィキデータを編集 / 2020年11月23日（2か月前） （2020-11-23）


 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, macOS
88.0.705.50[25] ウィキデータを編集 / 2021年1月21日（6日前） （2021-01-21）
iOS
44.11.15[26] ウィキデータを編集 / 2020年1月18日（12か月前） （2020-01-18）
Android
45.01.4.4900[27] ウィキデータを編集 / 2020年2月25日（11か月前） （2020-02-25）
Xbox One
40.15063.0[28] ウィキデータを編集 / 2017年3月29日（3年前） （2017-03-29）
 Web Media Extensions が必要[29] 12.0以降[30] ハードウェアデコーダが必要 16.0以降（MSE（英語版）経由のみ）[31] ハードウェアデコーダ有効化[32]
15.0以降（MSE経由のみ）[33] 		?
Windows 10 Mobile 13.0以降[34] ?
Konqueror 19.04.3 - 2019年7月11日（18か月前） （2019-07-11）[35] [±] 4.4以降（OS レベルコーデックが必要）[注 4]
Mozilla Firefox Windows 7以降
通常版 85.0 / 2021年1月26日（38時間前） （2021-01-26）[37]
ESR 78.7.0 / 2021年1月26日（38時間前） （2021-01-26）[38]
 3.5以降[39] 21.0以降[注 5] 非対応[18] 4.0以降[42][43] 28.0以降[44][45] Nightly[46]
Windows Vista 22.0以降[47]
Windows XP 手動インストール[48][注 6]
Linux 26.0以降（GStreamer利用）[注 7]
Android 17.0以降[52]
OS X 34.0以降[53]
Firefox OS 1.1以降[54]
Opera
Android 45.0.2246.125120 / 2018年2月12日（2年前） （2018-02-12）[55]
Android (classic) 12.1.8 / 2014年11月6日（6年前） （2014-11-06）[56]
Symbian S60 12.0.22 / 2012年6月24日（8年前） （2012-06-24）[57]
Windows Mobile 10.0 / 2010年3月16日（10年前） （2010-03-16）[58]
 非対応 11.50以降 非対応[59] 15.0以降 16.0以降 57.0以降（Android）[5]
Desktop Stable 73.0.3856.344 / 2021年1月14日（13日前） （2021-01-14）[60]
Opera for Android 61 / 2020年12月7日（51日前） （2020-12-07）[61][62]
Opera Mini 50 / 2020年5月20日（8か月前） （2020-05-20）[63][64]
Opera Touch for Android 2.8.4 / 2020年12月15日（43日前） （2020-12-15）[65]
Opera Touch for iOS 2.5.3 / 2020年12月16日（42日前） （2020-12-16）[66]
 10.50以降[67] 24.0以降[68] 10.60以降[69][70] 非対応 57.0以降[5]
Safari iOS 14.0.2 - 2020年12月14日（44日前） （2020-12-14）[71] [±] 非対応 3.1以降[72][73] 11.0以降[74] 非対応 非対応 ?
OS X 手動インストール 手動インストール[75] ?
Web Unix系 3.38.2 - 2020年11月25日（2か月前） （2020-11-25）[76] [±] 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がサポートするすべてのフォーマットに対応[36]。DirectShow、QuickTime、GStreamer、xineを含むPhononバックエンドを利用可能。MPlayerおよびVLCをバックエンドとする利用は開発中。
  5. ^ バージョン20でサポートされたが、既定で無効化されていた[40][41]
  6. ^ DivXのWeb Player version 2.xのみHTML5対応[49]
  7. ^ バージョン26以前は既定で無効化されていた[50] また、システムのコーデックに依存する[51]
  8. ^ Webkit/GTK+GStreamerがサポートするすべてのフォーマットに対応[77][78]

参照[編集]

  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. ^ a b c 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. ^ a b c d e “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. ^ https://chromereleases.googleblog.com/2021/01/stable-channel-update-for-desktop_19.html; 閲覧日: 2021年1月21日; 出版日: 2021年1月19日.
  13. ^ https://chromereleases.googleblog.com/; 閲覧日: 2021年1月19日.
  14. ^ https://chromereleases.googleblog.com/2020/11/chrome-for-ios-update_23.html; 閲覧日: 2020年11月23日; 出版日: 2020年11月23日.
  15. ^ “Google Chrome support Theora and Vorbis”, Code, Google, (2010-05-20), https://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome 2014年10月30日閲覧。 
  16. ^ a b 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. ^ a b c “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. ^ a b 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"; 閲覧日: 2021年1月23日; 出版日: 2021年1月22日.
  26. ^ "Microsoft Edge - App Store"; 閲覧日: 2020年1月18日.
  27. ^ "Microsoft Edge – Applications sur Google Play"; 閲覧日: 2020年3月9日.
  28. ^ "what is the latest version of Microsoft Edge"; 閲覧日: 2020年4月18日; 出版日: 2019年11月5日.
  29. ^ “Introducing the Web Media Extension Package with OGG Vorbis and Theora support for Microsoft Edge”. Microsoft Edge Team (2017年12月5日). 2018年10月1日閲覧。
  30. ^ “HTML5test - How well does your browser support HTML5?”. HTML5test. 2018年10月1日閲覧。
  31. ^ “HTML5test - How well does your browser support HTML5?”. HTML5test. 2018年10月1日閲覧。
  32. ^ “The status of VP9 Video Playback in Microsoft Edge is Shipped”. Microsoft. 2018年10月1日閲覧。
  33. ^ “WebM, VP9 and Opus Support in Microsoft Edge”. Microsoft Edge Team (2016年4月18日). 2018年10月1日閲覧。
  34. ^ “HTML5test - How well does your browser support HTML5?”. HTML5test. 2018年10月1日閲覧。
  35. ^ kde.org (2019年7月11日). “KDE Ships KDE Applications 19.04.3” (英語). kde.org. 2019年7月11日閲覧。
  36. ^ 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日閲覧。 
  37. ^ “Firefox 85.0, See All New Features, Updates and Fixes”. Mozilla Corporation (2021年1月26日). 2021年1月27日閲覧。
  38. ^ “Firefox ESR 78.7.0, See All New Features, Updates and Fixes”. Mozilla Corporation (2021年1月26日). 2021年1月27日閲覧。
  39. ^ (release notes) Firefox 3.5, Mozilla, (2009-06-30), http://www.mozilla.com/en-US/firefox/3.5/releasenotes/ 2014年10月30日閲覧。 
  40. ^ Bug 799315 – Windows Media Foundation backend for media playback, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=799315 2014年10月30日閲覧。 
  41. ^ Bug 837859 – Enable WMF backend, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=837859 2014年10月30日閲覧。 
  42. ^ Bug 566243 – Merge mozilla-webmedia repository to mozilla-central, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=566243 2014年10月30日閲覧。 
  43. ^ Firefox Nightly Builds, Mozilla, http://nightly.mozilla.org/ 2014年10月30日閲覧。 
  44. ^ [Phoronix Mozilla Firefox Enables VP9 Video Codec By Default], Phoronix, http://www.phoronix.com/scan.php?page=news_item&px=MTUzODA 2014年10月30日閲覧。 
  45. ^ http://www.mozilla.org/en-US/firefox/28.0/releasenotes/
  46. ^ “DASH playback of AV1 video in Firefox”. Mozilla Hacks. 2018年10月1日閲覧。
  47. ^ 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日閲覧。 
  48. ^ http://blog.divx.com/2010/12/16/hey-microsoft-divx-already-supports-h-264-with-html5-in-firefox/
  49. ^ https://forums.divx.com/divx/topics/html5_integration_broken
  50. ^ Bug 886181 - Pref on gstreamer backend, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=886181 2014年10月30日閲覧。 
  51. ^ Bug 794282 - Enable GStreamer in official builds, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=794282 2014年10月30日閲覧。 
  52. ^ http://arstechnica.com/information-technology/2012/11/mozilla-ships-firefox-with-h-264-support-on-android/
  53. ^ 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日閲覧。 
  54. ^ https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/H.264_support_in_Firefox
  55. ^ “Opera ブラウザ - ニュースおよび検索” (2018年2月12日). 2018年2月16日閲覧。
  56. ^ “Opera Mobile Classic” (2014年11月16日). 2015年1月20日閲覧。
  57. ^ “Opera Mobile 12.0.2 for S60” (2012年6月24日). 2014年2月25日時点のオリジナルよりアーカイブ。2014年10月16日閲覧。
  58. ^ “No mobile phone left behind: Opera Mini 5 and Opera Mobile 10 introduced in final, consumer-ready versions” (2010年3月16日). 2014年10月16日閲覧。
  59. ^ “The Case for VP9”. StreamingMedia.com. 2018年10月1日閲覧。
  60. ^ “Opera 73.0.3856.344 Stable update” (2021年1月14日). 2021年1月15日閲覧。
  61. ^ “Enjoy an integrated media experience in Opera for Android 61” (2020年12月7日). 2021年1月2日閲覧。
  62. ^ “無料 VPN を備えた Opera ブラウザ - Google Play のアプリ”. Google Play. 2021年1月2日閲覧。
  63. ^ “Opera Mini 50 gets fully revamped; mobile browsing never looked so good!” (2020年5月20日). 2021年1月2日閲覧。
  64. ^ “Opera Mini Web ブラウザ - Google Play のアプリ”. Google Play. 2021年1月2日閲覧。
  65. ^ “Opera Touch ウェブブラウザ - Google Play のアプリ”. Google Play. 2021年1月2日閲覧。
  66. ^ “「Opera Touch ウェブブラウザ」をApp Storeで”. App Store. 2021年1月2日閲覧。
  67. ^ 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日閲覧。 
  68. ^ http://blogs.opera.com/desktop/changelog-24/
  69. ^ Lie, Håkon Wium (2010-05-19), Welcome, WebM <video>!, Opera, http://labs.opera.com/news/2010/05/19/ 2014年10月30日閲覧。 
  70. ^ 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日閲覧。 
  71. ^ “Safari 14.0.2 のセキュリティコンテンツについて”. アップル. 2020年12月27日閲覧。
  72. ^ “HTML5 video formats”, Web design, About, http://webdesign.about.com/od/video/a/html5-video-formats.htm .
  73. ^ “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 .
  74. ^ “WWDC17 – HEVC with HLS – Apple just announced a feature that we support out of the box”. Bitmovin (2017年6月6日). 2018年10月1日閲覧。
  75. ^ “WebM plugin available”, Code, Google, https://code.google.com/p/webm/downloads/detail?name=WebM%20Component%20Installer.pkg&can=2&q= 2014年10月30日閲覧。 
  76. ^ Catanzaro, Michael (2020年11月25日). “GNOME 3.38.2 released!” (英語). gnome-announce-list mailing list.. https://mail.gnome.org/archives/gnome-announce-list/2020-November/msg00002.html 2020年12月1日閲覧。 
  77. ^ 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 
  78. ^ “Overview of available plug-ins”, GStreamer, http://gstreamer.freedesktop.org/documentation/plugins.html 2014年10月30日閲覧。 

外部リンク[編集]

Webインタフェース
サーバサイド（英語版）
プロトコル
APIs
トピックス
クライアントサイド
Web API（英語版）
W3C
クロノス
その他
Browser APIs
トピックス
関連項目
「https://ja.wikipedia.org/w/index.php?title=Video要素&oldid=79395012」から取得