[1] HTML の video 要素は、 動画を表します。

TODO: 最新の HTML 5 仕様に追随する

[20]

状態
WHATWG WD
名前空間URI
http://www.w3.org/1999/xhtml
局所名
video (video (映像) より)
分類
内容モデル
半透明 (>>21)
文脈
開始タグ
必須
終了タグ
必須
DOM界面
HTMLVideoElement (HTMLMediaElement, HTMLElement, Element, Node)

属性

[85]

  • controlslist
  • mediagroup
  • x-webkit-airplay
  • x-webkit-wirelessvideoplaybackdisabled
  • webkit-playsinline

内容

[21]src があれば透明、 なければ1つ以上の source の後透明。

処理

[90] プラットフォームによっては、 動画の再生状態によって画面の省電力モード等を切り替えるように実装していたり、 実装するべきだったりするかもしれません。

歴史

Vosaic

[3] mosaic の変種の1つ、 Vosaic は、 video と audio を実装していました。

[5] Vosaic の video は強制空要素でした。

[2] Vosaic http://www.ohotuku26.or.jp/organization/abc/def/Advanced/vosaic.html

日本語での解説頁です。

[4] >>2 より使用例:

<video src="address:port/filepath option=cylic|control">

src 属性内に間隔の後選択肢が含められていますが、 書き間違いではなく、実際に Vosaic がこのように実装していました。

[23] この video 要素の提案は、 主要な Webブラウザに実装されることもなく、 やがて忘れ去られました。

HTML5

[22] 、 Opera は内部版で video 要素を実装し、 WHATWG に対して HTML 5 に含めるように提案しました。

  • [95] [whatwg] <video> element proposal (Anne van Kesteren著, ) https://lists.w3.org/Archives/Public/public-whatwg-archive/2007Feb/0487.html
    • [96] [whatwg] <video> element proposal ( 版) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2007-February/009702.html
この提案は Vosaic の実装とは無関係で、 互換性もありません。

[24] これを受けて Ian Hickson は Web Applications 1.0 WD に video 要素を追加しました。 この時点では、スクリプトによる基本的な制御のためのわずかな API だけを含む簡単な仕様で、それ以上は実装状況を勘案しつつ 第2版以降で拡張していくとされていました。

[whatwg] Video proposals ( 版) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2007-March/010160.html

[102] [] (0) new <video> element section. This is SO far from complete it's…, Hixie, , https://github.com/whatwg/html/commit/845c40c8035ddccb20301433b2f1225a1203e4de#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d

[25] 当時やはり Webブラウザでの動画や音声の直接実装に興味を持っていた Apple は、 HTML 5 案を更に拡張する形で、 video と audio の2つの要素、それに CSS の拡張を含む仕様案を提案しました。

  • [104] [whatwg] Apple Proposal for Timed Media Elements, , https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-March/052659.html
    • [12] Apple Proposal for Timed Media Elements (Maciej Stachowiak 著, 2007-03-22 00:08:26 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/9709 (名無しさん 2007-03-25 07:01:44 +00:00)
      • [105] 消滅確認
  • [11] Proposed HTML Timed Media Elements (2007-03-22 19:14:49 +09:00 版) http://webkit.org/specs/HTML_Timed_Media_Elements.html (名無しさん 2007-03-22 10:17:41 +00:00)
  • [13] HTML Timed Media Elements and CSS Open Issues (2007-03-25 15:58:36 +09:00 版) http://webkit.org/specs/Timed_Media_Elements-Open_Issues.html (名無しさん 2007-03-25 07:02:17 +00:00)

[26] 結局 Ian Hickson は早く十分な機能を持った仕様案をまとめるべきとの意見に押されて、 より詳細な制御のための API、様々な事象、 属性による宣言的な制御、 利用者エージェントの native な制御用利用者界面などの第2版の機能の規定を4月までに Web Applications 1.0 に含めました。

[10] <video> element feedback (Ian Hickson 著, 2007-03-20 09:25:25 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/9604 (名無しさん 2007-03-21 04:11:31 +00:00)
  • [107] [co] (2) codec negotiation for <video> elements: <source> elements; .…, Hixie, , https://github.com/whatwg/html/commit/61af426a3ae6d68ffa00505b6883cbf870481b52
  • [108] [] (0) add <audio>, Hixie, , https://github.com/whatwg/html/commit/37bbc4fa05ac4f5a9401e8f2bc7b7e4b7a2fd08c#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d
[101] HTML要素概説
要素名
video
日付
説明
、 Opera は社内の実験実装に基づき video 仕様案を WHATWG に提案した。
出典
  • VideoProposal: <video> element proposal, , , , https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-February/009702.html
[109] HTML要素概説
要素名
video
日付
説明
、 HTML5 は video を追加した。 現行仕様である。
出典
  • HTML5 r674, , , https://github.com/whatwg/html/commit/845c40c8035ddccb20301433b2f1225a1203e4de
[106] HTML要素概説
要素名
video
要素名
audio
日付
説明
、 Apple は video, audio の仕様案を WHATWG に提案した。
出典
  • AppleTimed: Apple Proposal for Timed Media Elements, , , , https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-March/052659.html
[103] HTML要素概説
要素名
audio
要素名
source
日付
説明
、 HTML5 は audio, source を追加した。 >>110 現行仕様である。
出典
  • HTML5 r687, , , https://github.com/whatwg/html/commit/61af426a3ae6d68ffa00505b6883cbf870481b52
  • HTML5 r689, , , https://github.com/whatwg/html/commit/37bbc4fa05ac4f5a9401e8f2bc7b7e4b7a2fd08c
注釈
  • [110] HTML5 はこれ以前から Audio インターフェイスを規定しており、 Opera が実装していた。 追加された audio と統合された。

[27] 現時点で HTML 5 WD は Ogg Theora に対応するべき (SHOULD) と述べています。

動画や音声のコーデックの規定に関しては多くの議論がありました。 howcome は、相互運用性のために baseline format を定めることが重要であり、無償で自由に利用でき、 処理も重くない (性能が低い機器でも実装可能な) Ogg Theora を採用するべきだと強く主張しました。 一方で、 Apple など、 MPEG4 形式を推す主張もありました。 Dirac などその他のコーデックを推す意見や、 特定のコーデックを推奨するべきではないとする意見もありました。

議論は WHATWG のみならず、できたばかりの W3C HTML WG などにも飛び火しましたが、 結局意見は収束することなく (飽きて) 議論だけ終わり現在に至っています。

参考文献

[6] A blog? with Σαιτω - Opera - OLPC (2007-03-06 07:08:02 +09:00 版) http://d.hatena.ne.jp/saiton/20070302/1172830726 (名無しさん 2007-03-06 00:04:23 +00:00)

[7] A blog? with Σαιτω - 将来の Opera は Ogg Theora をネイティブ・サポート (2007-03-06 07:08:02 +09:00 版) http://d.hatena.ne.jp/saiton/20070305/1173097992 (名無しさん 2007-03-06 00:04:54 +00:00)

[8] Why video? - Anne’s Weblog (2007-03-17 21:02:21 +09:00 版) http://annevankesteren.nl/2007/03/video (名無しさん 2007-03-17 12:22:17 +00:00)

[9] A blog? with Σαιτω - <video> を主張する訳 (2007-03-18 11:49:06 +09:00 版) http://d.hatena.ne.jp/saiton/20070318/1174180040 (名無しさん 2007-03-18 02:50:58 +00:00)

[14] [whatwg] on codecs in a 'video' tag. (2007-04-01 11:26:51 +09:00 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-March/010652.html

[15] Web Developer Chat: H&#229;kon Wium Lie on the <video> tag - Web Applications Blog - by Web Applications (2007-04-24 07:07:00 +09:00 版) http://my.opera.com/WebApplications/blog/2007/04/23/web-developer-chat-hakon-wium-lie-on-the-video-tag (名無しさん 2007-04-23 22:08:19 +00:00)

[16] The <video> Element - Google Video (2007-05-12 19:39:03 +09:00 版) http://video.google.com/videoplay?docid=5545573096553082541

Google における howcome の講演。 video 入門。まあまあ面白い。

[17] Building a Video Element into Newer Versions of HTML - SEO by the SEA (2007-05-12 20:13:53 +09:00 版) http://www.seobythesea.com/?p=563

[18] video codecs in HTML 5 (Lockergnome.com 著, 2007-05-12 20:13:54 +09:00 版) http://help.lockergnome.com/linux/video-codecs-HTMLftopic-419645-days0-orderasc-20.html

[34] The Video Element (2007-06-09 00:43:34 +09:00 版) http://lachy.id.au/dev/presentation/webjam3/ (名無しさん 2007-06-08 15:45:41 +00:00)

[35] Opera Watch - Opera CTO talks about the OLPC computer (2007-06-09 22:08:06 +09:00 版) http://operawatch.com/news/2007/06/opera-cto-talks-about-the-olpc-computer.html (名無しさん 2007-06-09 13:10:58 +00:00)

[36] Firefox 3 to feature native audio video support : Mozilla Links (2007-06-09 22:08:16 +09:00 版) http://mozillalinks.org/wp/2007/06/firefox-3-to-feature-native-audio-video-support/ (名無しさん 2007-06-09 13:23:20 +00:00)

[37] Firefox 3 to feature native audio video support : Mozilla Links (2007-06-09 22:08:16 +09:00 版) http://mozillalinks.org/wp/2007/06/firefox-3-to-feature-native-audio-video-support/ (名無しさん 2007-06-09 13:23:40 +00:00)

[38] Taken SPC : Mozilla でも video 要素実装が進行中 (2007-06-09 22:08:38 +09:00 版) http://taken.s101.xrea.com/blog/article.php?id=755 (名無しさん 2007-06-09 13:24:12 +00:00)

[39] Bug 382267 &#8211; Implement WHATWG Video spec (2007-06-09 22:09:10 +09:00 版) https://bugzilla.mozilla.org/show_bug.cgi?id=382267 (名無しさん 2007-06-09 13:25:42 +00:00)

[40] HTML5 Media Elements - MozillaWiki (2007-05-29 08:51:00 +09:00 版) http://wiki.mozilla.org/HTML5_Media_Elements (名無しさん 2007-06-09 13:27:04 +00:00)

[41] H&#229;kon Wium Lie on the future of the web - CSS3 . Info (2007-06-09 22:10:03 +09:00 版) http://www.css3.info/hakon-wium-lie-on-the-future-of-the-web/ (名無しさん 2007-06-09 13:27:29 +00:00)

[42] Bluish Coder: Support for HTML Video element in Firefox (2007-06-03 04:00:47 +09:00 版) http://www.bluishcoder.co.nz/2007/05/support-for-html-video-element-in.html (名無しさん 2007-06-09 13:28:22 +00:00)

[43] Web Jam 3 - Lachy’s Log (2007-06-10 01:31:46 +09:00 版) http://lachy.id.au/log/2007/06/webjam3 (名無しさん 2007-06-09 16:33:34 +00:00)

[44] Firefox3 いろいろ - えむもじら (2007-06-10 01:38:55 +09:00 版) http://level.s69.xrea.com/mozilla/index.cgi?id=20070608_Firefox3 (名無しさん 2007-06-09 16:40:48 +00:00)

[45] Metavid &#187; Blog Archive &#187; HTML5 Video: The Future is Now! (2007-06-11 00:10:28 +09:00 版) http://metavid.ucsc.edu/blog/2007/06/07/html5-video-the-future-is-now/ (名無しさん 2007-06-10 15:11:57 +00:00)

[46] A blog? with Σαιτω - video 要素 - 講演 (2007-06-12 21:06:42 +09:00 版) http://d.hatena.ne.jp/saiton/20070612/1181613127 (名無しさん 2007-06-12 12:22:04 +00:00)

[47] A blog? with Σαιτω - video 要素 - 講演 (2007-06-12 21:06:42 +09:00 版) http://d.hatena.ne.jp/saiton/20070612/1181613127 (名無しさん 2007-06-12 12:22:57 +00:00)

[48] Charbax Blog &#187; H&#229;kon Wium Lie’s keynote at Reboot (2007-06-24 11:26:57 +09:00 版) http://charbax.com/2007/06/19/hakonwiumlie-keynote-at-reboot/ (名無しさん 2007-06-24 02:42:41 +00:00)

[49] Bluish Coder: Patch for Video element support in Firefox (2007-07-07 06:42:10 +09:00 版) http://www.bluishcoder.co.nz/2007/07/patch-for-video-element-support-in.html (名無しさん 2007-07-07 03:02:11 +00:00)

[50] Re: <video> element feedback (Ian Hickson <ian@...> 著, 2007-10-09 04:04:23 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/11953 (名無しさん)

[51] Re: <video> element feedback (Ian Hickson <ian@...> 著, 2007-10-08 22:58:31 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/11952 (名無しさん)

[52] Re: Cue points in media elements (Ian Hickson <ian@...> 著, 2007-10-19 00:41:23 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/12101 (名無しさん)

[54] Re: several messages regarding Ogg in HTML5 (Ian Hickson <ian@...> 著, 2007-12-11 21:40:53 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/12516 (名無しさん)

[55] Re: several messages regarding Ogg in HTML5 (Ian Hickson <ian@...> 著, 2007-12-12 02:19:30 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/12565 (名無しさん)

[56] Bluish Coder: Video Element and Ogg Theora (2007-12-16 18:34:41 +09:00 版) http://www.bluishcoder.co.nz/2007/12/video-element-and-ogg-theora.html (名無しさん)

[57] W3C Video on the Web Workshop - Agenda (2007-12-15 03:11:25 +09:00 版) http://www.w3.org/2007/08/video/agenda.html#s2 (名無しさん)

[58] December 12, 2007: Xiph.Org Statement Regarding the HTML5 Draft and the Ogg Codec Set (2007-12-24 13:35:40 +09:00 版) http://www.xiph.org/press/2007/w3c/ (名無しさん)

[59] Kestrel - video - A blog? with Σαιτω (2008-02-09 23:15:11 +09:00 版) http://d.hatena.ne.jp/saiton/20071108/1194522691 (名無しさん)

[60] W3C Video on the Web Workshop - Report (2008-02-20 00:06:26 +09:00 版) http://www.w3.org/2007/08/video/report (名無しさん)

[61] Taken SPC : Firefox 3 は video 要素をサポートするのか? (2008-05-11 14:25:31 +09:00 版) http://taken.s101.xrea.com/blog/article.php?id=823 (名無しさん)

[62] HTMLのVideo要素 - Torisugari の日記 (2008-03-16 01:40:58 +09:00 版) http://slashdot.jp/~Torisugari/journal/424334 (名無しさん)

[63] Re: Full screen for the <video> element (Ian Hickson <ian@...> 著, 2007-10-27 00:45:25 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/12218 (名無しさん)

[64] Re: Some <video> questions (Ian Hickson <ian@...> 著, 2008-05-15 07:43:54 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/14132 (名無しさん)

メモ

メモ

実装

[28] 2007年3月?4月?に video を試験的に実装した Opera が公開されました。

関連

[31] HTML 4 では動画は object が扱うことになっていました。しかし、 動画に限らずどんな物体でも扱える汎用の object 要素は実装が困難で相互運用性が低いのが現状です。 Web応用が動画を操作する API を標準化することも不可能と考えられました。 このような状況を打開するため、 object とは別の video が追加されました。

[32] 動画を扱う Web 関連仕様として既に SVG や SMIL に video やアニメーションの機能がありました。 しかし、これらは Web では実際にはほとんど使われていません。 これらの仕様は曖昧だったり複雑だったりして、 再利用する価値はないとみなされ、 互換性のない HTML video が新たに仕様化されました。

[33] HTML 5 の仕様の作成にあたっては、 Flash などの動画系の API を参考にしたようです。

ここでいう参考というのはどのような機能を持たせるべきかで、 互換性があるわけではありません。 あえて互換性を持たせる価値はないと判断されました。

メモ

[53] Video codec requirements changed (Ian Hickson <ian@...> 著, 2007-12-11 02:39:38 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/12435 (名無しさん)

[65] Mv Embed - Metavid ( 版) http://metavid.org/wiki/Mv_Embed

[66] Opera The Fastest Browser on Earth: HTML 5 video タグを試す ( 版) http://opera8.seesaa.net/article/110372161.html

[67] Re: (X)HTML + SMIL? (Benjamin Hawkes-Lewis <bhawkeslewis@...> 著, 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/17313

なんで SMIL 使わないの? というのに対する、とってもわかりやすい HTML5 video 要素の経緯のまとめ。

[68] YouTube HTML5 Demo ( 版) http://www.youtube.com/html5

video 要素

[29] SMIL/HTML+TIME

video 要素

[30] SVG

video: URI scheme

[19] Real-time extensions for HTML on interactive digital television (1996-09-17 21:05:30 +09:00 版) http://www.w3.org/AudioVideo/9610_Workshop/paper22/paper22.html

メモ

[69] IRC logs: freenode / #whatwg / 20090528 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090528#l-757

[70] IRC logs: freenode / #whatwg / 20090610 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090610#l-315

[71] IRC logs: freenode / #whatwg / 20090703 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090703#l-303

[72] Video on the Web — Anne’s Weblog ( 版) http://annevankesteren.nl/2009/05/web-video

[73] ネット参入に“料金所”は要らない、Mozilla - @IT ( 版) http://www.atmarkit.co.jp/news/201001/25/video.html

[74] Issue 16735 - chromium - HTML 5 Video Full screen - Feature Enhancement Request - Project Hosting on Google Code ( 版) http://code.google.com/p/chromium/issues/detail?id=16735#c30

[75] Cristian Adam's: IE <video> tag - Take Two ( 版) http://cristianadam.blogspot.com/2010/02/ie-tag-take-two.html

[76] ニコニコ動画をHTML5で見るbookmarklet - saiten@blog - 何故かまだ学生な人のblog ( 版) http://d.hatena.ne.jp/saiten/20100225/1267110155

[77] html5media - Project Hosting on Google Code ( 版) http://code.google.com/p/html5media/

[78] Re: video/@src vs application/octet-stream (Maciej Stachowiak 著, 版) http://lists.w3.org/Archives/Public/public-html/2010Jul/0120.html

[79] [whatwg] More YouTube response ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-August/028039.html

[80] [whatwg] Fullscreen feedback ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-August/028030.html

[81] WebM-Enabled Browser Usage Share Exceeds H.264-Enabled Browser Usage Share on Desktop (in StatCounter Numbers) ( (Henri Sivonen 著, 版)) http://hsivonen.iki.fi/webm-share/

[82] IRC logs: freenode / #whatwg / 20120601 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120601#l-285

[83] [whatwg] Exposing framerate / statistics of <video> playback and related feedback ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-November/038187.html

[84] IRC logs: freenode / #whatwg / 20121220 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20121220#l-80

[86] Bug 23505 – <video>: a mechanism by which pages can indicate if their audio should play in the background ( ( 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=23505

[87] Bug 23507 – <video>: Forced subtitles ( ( 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=23507

[88] [embedded] As discussed during the Paris F2F, rewrite the use of HTML5 · w3c/svgwg@bda84ee ( 版) https://github.com/w3c/svgwg/commit/bda84ee3ce02bdf810a7feeecd9f31f5634e39b9

[89] 26952 – video: Contradiction between Shadow DOM spec and HTML 5 spec ( 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=26952

[91] What's New in Shadow DOM v1 (by examples) — hayato.io ( ()) http://hayato.io/2016/shadowdomv1/

A <video> element is using a closed-mode shadow root in its implementation in Blink.

[92] Add a playsinline attribute to <video> ( (domenic著, )) https://github.com/whatwg/html/commit/6e17d01489060988451fc6607089ef4e2d00bbfa

[93] KinKi Kids オフィシャルサイト / Johnny's Entertainment () http://je-kinkikids.com/

<video autoplay loop muted preload="metadata" poster="http://je-kinkikids.com/wp-content/themes/theme/assets/images/movie/placeholder/top_bara_to_taiyo.jpg" class="cover-video"> <source src="http://je-kinkikids.stream2.johnnys-net.jp/je-kinkikids/bara_to_taiyo/top_background_bara_to_taiyo.mp4" type="video/mp4"><p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p></video>

[94] New <video> Policies for iOS | WebKit () https://webkit.org/blog/6784/new-video-policies-for-ios/

[97] [whatwg] <video> element feedback (Ian Hickson著, ) https://lists.w3.org/Archives/Public/public-whatwg-archive/2007Mar/0587.html

[98] [whatwg] <video> element feedback (Ian Hickson著, ) https://lists.w3.org/Archives/Public/public-whatwg-archive/2007Mar/0558.html

[99] [whatwg] Video proposals (Ian Hickson著, ) https://lists.w3.org/Archives/Public/public-whatwg-archive/2007Mar/0437.html

[100] Split up media into video, audio and track (yoavweiss著, ) https://github.com/whatwg/fetch/commit/ba175cf1100045da83ed0d7768629653aa979c20