Video要素
HTML |
---|
各種項目
|
比較
|
|
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 | N/A | r18297以降[6] | 手動インストール[注 1][8]。 | 非対応[9] | r47759以降[10] | r172738以降[11] | 対応[5] | ||||||||||||||||||||||
Google Chrome |
| 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 |
| Web Media Extensions が必要[28] | 12.0以降[29] | ハードウェアデコーダが必要 | 16.0以降(MSE(英語版)経由のみ)[30] | ハードウェアデコーダ有効化[31] 15.0以降(MSE経由のみ)[32] | ? | ||||||||||||||||||||||
Windows 10 Mobile | 13.0以降[33] | ? | ||||||||||||||||||||||||||||
Konqueror | R14.1.2[34] - 2024年4月19日 (4か月前) [±] | 4.4以降(OS レベルコーデックが必要)[注 4] | ||||||||||||||||||||||||||||
Mozilla Firefox | Windows 7以降 |
| 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 |
| 非対応 | 11.50以降 | 非対応[58] | 15.0以降 | 16.0以降 | 57.0以降(Android)[5] | |||||||||||||||||||||||
| 10.50以降[69] | 24.0以降[70] | 10.60以降[71][72] | 非対応 | 57.0以降[5] | |||||||||||||||||||||||||
Safari | iOS | 17.6 - 2024年7月29日 (39日前) (2024-07-29)[73] [±] | 非対応 | 3.1以降[74][75] | 11.0以降[76] | 非対応 | 非対応 | ? | ||||||||||||||||||||||
OS X | 手動インストール | 手動インストール[77] | ? | |||||||||||||||||||||||||||
Web | Unix系 | 3.38.2 - 2020年11月25日 (3年前) (2020-11-25)[78] [±] | 2.28以降(OS レベルコーデックが必要)[注 8] |
注
- ^ サードパーティーのコーデックパッケージを利用可能[7]。
- ^ 2011年1月11日に、H.264のサポート終了が告知されたが[17]、2014年10月現在サポートは終了されていない。
- ^ バージョン25.0でサポートされたが、既定では無効化されていた[21][22]。
- ^ Qt 4.5上のPhononがサポートするすべてのフォーマットに対応[35]。DirectShow、QuickTime、GStreamer、xineを含むPhononバックエンドを利用可能。MPlayerおよびVLCをバックエンドとする利用は開発中。
- ^ バージョン20でサポートされたが、既定で無効化されていた[39][40]。
- ^ DivXのWeb Player version 2.xのみHTML5対応[48]。
- ^ バージョン26以前は既定で無効化されていた[49]。また、システムのコーデックに依存する[50]。
- ^ Webkit/GTK+GStreamerがサポートするすべてのフォーマットに対応[79][80]。
参照
- ^ “Phonon documentation of backends”, Qt, Nokia, http://doc.qt.nokia.com/latest/phonon-overview.html#backends 2014年10月30日閲覧。
- ^ “Phonon documentation of querying”, Qt, Nokia, http://doc.qt.nokia.com/latest/phonon-overview.html#querying-backends-for-support 2014年10月30日閲覧。
- ^ a b c Kyrnin, Jennifer, Understanding HTML5 Video Formats, About, http://webdesign.about.com/od/video/a/html5-video-formats.htm 2014年10月30日閲覧。
- ^ “Supported media formats”. Google. 2018年10月1日閲覧。
- ^ a b c d e “AV1 Decoder”. Google. 2018年10月1日閲覧。
- ^ Issue 4363: [HTML5-Video] Enable HTML5 video/audio elements, Google, https://code.google.com/p/chromium/issues/detail?id=4363 2014年10月30日閲覧。
- ^ “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日閲覧。
- ^ http://earthwithsun.com/questions/655605/how-do-i-add-mp3-mp4-and-h-264-support-to-chromium-on-windows
- ^ “Audio/Video”. Google. 2018年10月1日閲覧。
- ^ “Issue 2093007: Chromium side changes for enabling VP8 and WebM support”, Code review, Google, http://codereview.chromium.org/2093007 2014年10月30日閲覧。
- ^ http://src.chromium.org/viewvc/chrome?view=rev&revision=172738
- ^ a b c "Stable Channel Update for Desktop"; 閲覧日: 2024年9月2日; 作品または名前の言語: 英語; 出版日: 2024年9月2日.
- ^ "Chrome for Android Update"; 閲覧日: 2024年9月5日; 作品または名前の言語: 英語; 出版日: 2024年9月4日.
- ^ "Chrome Stable for iOS Update"; 閲覧日: 2024年8月27日; 作品または名前の言語: 英語; 出版日: 2024年8月27日.
- ^ “Google Chrome support Theora and Vorbis”, Code, Google, (2010-05-20), https://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome 2014年10月30日閲覧。
- ^ a b Google Chrome 3.0 will support <video> tag, FR: C net, http://www.cnetfrance.fr/news/google-chrome-3-39503164.htm
- ^ Mike, Jazayeri (11 January 2011). “Chromium Blog: HTML Video Code Support in Chrome”. The Chromium Blog. 2014年10月30日閲覧。
- ^ 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日閲覧。
- ^ 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日閲覧。
- ^ Kersey, Jason (2010-06-03), “Dev Channel Update”, Chrome Releases, Google, http://googlechromereleases.blogspot.com/2010/06/dev-channel-update.html 2014年10月30日閲覧。
- ^ 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日閲覧。
- ^ 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日閲覧。
- ^ 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日閲覧。
- ^ 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日閲覧。
- ^ a b c "Release notes for Microsoft Edge Stable Channel"; 閲覧日: 2024年7月26日; 出版日: 2024年7月25日.
- ^ "Release notes for Microsoft Edge Mobile Stable Channel"; 閲覧日: 2024年7月26日; 出版日: 2024年7月23日.
- ^ "Release notes for Microsoft Edge Mobile Stable Channel"; 閲覧日: 2024年7月26日; 出版日: 2024年7月24日.
- ^ “Introducing the Web Media Extension Package with OGG Vorbis and Theora support for Microsoft Edge”. Microsoft Edge Team (2017年12月5日). 2018年10月1日閲覧。
- ^ “HTML5test - How well does your browser support HTML5?”. HTML5test. 2018年10月1日閲覧。
- ^ “HTML5test - How well does your browser support HTML5?”. HTML5test. 2018年10月1日閲覧。
- ^ “The status of VP9 Video Playback in Microsoft Edge is Shipped”. Microsoft. 2018年10月1日閲覧。
- ^ “WebM, VP9 and Opus Support in Microsoft Edge”. Microsoft Edge Team (2016年4月18日). 2018年10月1日閲覧。
- ^ “HTML5test - How well does your browser support HTML5?”. HTML5test. 2018年10月1日閲覧。
- ^ "Official Trinity Desktop Environment R14.1.2 release"; 閲覧日: 2024年6月27日.
- ^ 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日閲覧。
- ^ "Firefox 130.0, See All New Features, Updates and Fixes"; 閲覧日: 2024年9月3日; 作品または名前の言語: 英語; 出版日: 2024年9月3日.
- ^ "Firefox ESR 128.2.0, See All New Features, Updates and Fixes"; 閲覧日: 2024年9月3日; 作品または名前の言語: 英語; 出版日: 2024年9月3日.
- ^ (release notes) Firefox 3.5, Mozilla, (2009-06-30), http://www.mozilla.com/en-US/firefox/3.5/releasenotes/ 2014年10月30日閲覧。
- ^ Bug 799315 – Windows Media Foundation backend for media playback, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=799315 2014年10月30日閲覧。
- ^ Bug 837859 – Enable WMF backend, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=837859 2014年10月30日閲覧。
- ^ Bug 566243 – Merge mozilla-webmedia repository to mozilla-central, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=566243 2014年10月30日閲覧。
- ^ Firefox Nightly Builds, Mozilla, http://nightly.mozilla.org/ 2014年10月30日閲覧。
- ^ [Phoronix Mozilla Firefox Enables VP9 Video Codec By Default], Phoronix, http://www.phoronix.com/scan.php?page=news_item&px=MTUzODA 2014年10月30日閲覧。
- ^ http://www.mozilla.org/en-US/firefox/28.0/releasenotes/
- ^ “DASH playback of AV1 video in Firefox”. Mozilla Hacks. 2018年10月1日閲覧。
- ^ 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日閲覧。
- ^ http://blog.divx.com/2010/12/16/hey-microsoft-divx-already-supports-h-264-with-html5-in-firefox/
- ^ https://forums.divx.com/divx/topics/html5_integration_broken
- ^ Bug 886181 - Pref on gstreamer backend, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=886181 2014年10月30日閲覧。
- ^ Bug 794282 - Enable GStreamer in official builds, Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=794282 2014年10月30日閲覧。
- ^ http://arstechnica.com/information-technology/2012/11/mozilla-ships-firefox-with-h-264-support-on-android/
- ^ 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日閲覧。
- ^ https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/H.264_support_in_Firefox
- ^ “Opera ブラウザ - ニュースおよび検索” (2018年2月12日). 2018年2月16日閲覧。
- ^ “Opera Mobile Classic” (2014年11月16日). 2015年1月20日閲覧。
- ^ “Opera Mobile 12.0.2 for S60” (2012年6月24日). 2014年2月25日時点のオリジナルよりアーカイブ。2014年10月16日閲覧。
- ^ “No mobile phone left behind: Opera Mini 5 and Opera Mobile 10 introduced in final, consumer-ready versions” (2010年3月16日). 2014年10月16日閲覧。
- ^ “The Case for VP9”. StreamingMedia.com. 2018年10月1日閲覧。
- ^ “Thanks for downloading Opera”. Opera Norway. 2024年7月29日閲覧。
- ^ a b “Stable Archives - Opera Desktop”. Opera Norway (2024年7月25日). 2024年7月29日閲覧。
- ^ a b “Index of /ftp/pub/opera/desktop/” (2024年7月25日). 2024年7月29日閲覧。
- ^ “Thanks for downloading Opera”. Opera Norway. 2024年7月29日閲覧。
- ^ “VPN を備えた Opera ブラウザ - Google Play のアプリ”. Google Play. 2024年7月29日閲覧。
- ^ “「Opera ブラウザとプライベート VPN」をApp Storeで”. App Store. 2024年6月17日閲覧。
- ^ “Opera Mini Web ブラウザ - Google Play のアプリ”. Google Play. 2024年6月17日閲覧。
- ^ “Thanks for downloading Opera”. Opera Norway. 2024年3月21日閲覧。
- ^ “Thanks for downloading Opera”. Opera Norway. 2024年3月21日閲覧。
- ^ “Index of /ftp/pub/opera_crypto/” (2024年3月14日). 2024年3月21日閲覧。
- ^ 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日閲覧。
- ^ http://blogs.opera.com/desktop/changelog-24/
- ^ Lie, Håkon Wium (2010-05-19), Welcome, WebM <video>!, Opera, http://labs.opera.com/news/2010/05/19/ 2014年10月30日閲覧。
- ^ 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日閲覧。
- ^ “Safari 17.6 Release Notes”. Apple. 2024年7月30日閲覧。
- ^ “HTML5 video formats”, Web design, About, http://webdesign.about.com/od/video/a/html5-video-formats.htm .
- ^ “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 .
- ^ “WWDC17 – HEVC with HLS – Apple just announced a feature that we support out of the box”. Bitmovin (2017年6月6日). 2018年10月1日閲覧。
- ^ “WebM plugin available”, Code, Google, https://code.google.com/p/webm/downloads/detail?name=WebM%20Component%20Installer.pkg&can=2&q= 2014年10月30日閲覧。
- ^ Catanzaro, Michael (25 November 2020). "GNOME 3.38.2 released!". gnome-announce-list (Mailing list) (英語). 2020年12月1日閲覧。
- ^ 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
- ^ “Overview of available plug-ins”, GStreamer, http://gstreamer.freedesktop.org/documentation/plugins.html 2014年10月30日閲覧。
外部リンク
- 4.7.6 The video element - HTML5 - W3C
| |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
サーバサイド |
| ||||||||||||
クライアントサイド |
| ||||||||||||
関連項目 | |||||||||||||