Loading article…
HTMLビデオは、ウェブ経由でビデオを再生する標準的な方法として、HTML仕様の対象となっています。HTML5で導入された[ 1 ] HTMLビデオは、object要素と、以前の事実上の標準であったAdobe Flashプラグインの使用を部分的に置き換えるように設計されていますが、ウェブブラウザでどのビデオコーディング形式とオーディオコーディング形式をサポートすべきかについて合意が得られなかったため、初期の採用は妨げられました。2020年現在、HTMLビデオは、Flashプラグインが段階的に廃止されつつある現代のブラウザで広くサポートされている唯一のビデオ再生技術です。
この要素は、2006 年 10 月にWHATWGで議論され始めました。 [ 2 ]この要素は、2007 年 2 月にOpera Softwareによって提案されました。 [ 3 ] Opera は、同日にプレビュー ビルドも公開し、[ 4 ] [ 5 ]動画がウェブの第一級市民になることを求めるマニフェストも発表しました。[ 6 ]<video><video>
以下のHTMLコードは、WebM動画をウェブページに埋め込むためのものです。
< video src = "movie.webm" poster = "movie.jpg" controls > これは、動画タグをサポートしていないユーザーエージェント向けに表示する代替コンテンツです。 </ビデオ>「controls」属性を使用すると、ブラウザ独自のユーザーインターフェースで再生を制御できます。あるいは、JavaScriptを使用して再生を制御することも可能で、 WebデザイナーはJavaScriptを使って独自のユーザーインターフェースを作成できます。オプションの「poster」属性は、再生開始前に動画の代わりに表示する画像を指定します。この画像は、動画の内容を表すためのものです。
ビデオフォーマットのサポートはブラウザによって異なります（下記参照）。そのため、ウェブページでは複数のフォーマットのビデオを提供できます。その他の機能については、ブラウザスニッフィングが使用されることがありますが、これはエラーが発生しやすい場合があります。ウェブ開発者のブラウザに関する知識は、必然的に不完全または最新ではないためです。問題のブラウザは、使用できるフォーマットを「最もよく知っています」。「video」要素は、複数のソースを指定することでフォールバックをサポートします。以下に示すように、任意の数の<source>要素を使用すると、ブラウザはダウンロードするファイルを自動的に選択します。あるいは、JavaScriptのcanPlayType()関数を使用して同じことを実現することもできます。「type」属性はMIMEタイプと、場合によってはコーデックのリストを指定します。これにより、ブラウザはダウンロードを開始せずにファイルをデコードできるかどうかを判断できます。MIMEタイプはファイルのコンテナフォーマットを示し、コンテナフォーマットはコーデック文字列の解釈を定義します。[ 7 ]
< video poster = "poster.jpg" controls > < source src = "av1.mp4" type = 'video/mp4; codecs="av01.0.00M.08, opus"' > < source src = "avc.mp4" type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2"' > < source src = "vp9.webm" type = 'video/webm; codecs="vp9.0, opus"' > < source src = "theora.ogv" type = 'video/ogg; codecs="theora, vorbis"' > < p >これは、video タグをサポートしていないユーザー エージェントに表示されるフォールバック コンテンツです。</ p > </ video >HTML仕様では、ブラウザがサポートすべきビデオおよびオーディオ形式は規定されていません。ユーザーエージェントは、適切と思われるビデオ形式を自由にサポートできますが、ユーザーエージェントにはサポートすべき最低限のビデオおよびオーディオ形式が定められていないため、コンテンツ作成者は、すべての準拠ユーザーエージェントがすべてのビデオにアクセスできると想定することはできません。
HTML5ワーキンググループは、すべてのユーザーエージェント（ブラウザ）がサポートすべきビデオフォーマットを少なくとも1つ指定することが望ましいと考えた。この点における理想的なフォーマットは以下のとおりである。
当初、Ogg Theoraは既知の特許の影響を受けなかったため、HTML5の推奨標準ビデオフォーマットでした。しかし、2007年12月10日にHTML5仕様が更新され、[ 8 ]具体的なフォーマットへの参照が置き換えられました。
ユーザーエージェントは、TheoraビデオとVorbisオーディオ、およびOggコンテナフォーマットをサポートする必要があります。
プレースホルダー付き: [ 9 ]
すべてのブラウザが同じコーデックをサポートできれば、相互運用性にとって有益でしょう。しかし、現在のすべてのプレーヤーのニーズを満たす既知のコーデックはありません。ユニットごとまたはディストリビューターごとのライセンスを必要とせず、オープンソース開発モデルと互換性があり、使用可能な品質を備え、大企業にとって新たな潜水艦特許リスクとならないことが知られているコーデックが必要です。これは継続的な問題であり、より多くの情報が入手可能になり次第、このセクションは更新されます。[ 10 ]
その結果、HTMLビデオは、業界標準でありISOで定義されているものの特許に縛られたフォーマットと、オープンフォーマットとの間で二極化しました。Alliance for Open Mediaによる新しいAV1フォーマットは、業界標準であり、ロイヤリティフリーでオープンであることを目指しており、業界から幅広い支持を得ています。
MozillaとOperaは当初、 TheoraとWebMのオープンフォーマットのみをサポートしていました。Theoraは既知の非フリー特許の影響を受けませんが、Apple [ 11 ]は、Theoraに影響を与える可能性のある未知の特許について懸念を表明しました。特許権者は、訴訟を起こす前に、潤沢な資金力を持つ企業がフォーマットを使用するのを待っている可能性があります。[ 12 ] [ 13 ] H.264のようなフォーマットも原則として未知の特許の対象となる可能性がありますが、それらははるかに広く展開されているため、特許権者はすでに自らを公表していると考えられます。Appleはまた、一部のデバイスは他のフォーマットをはるかに簡単にサポートできる可能性があり、HTMLは歴史的に特定のフォーマットを何に対しても要求してこなかったという理由で、HTML標準でOggフォーマットのサポートを要求することにも反対しました（「すべき」要件としてであっても）。[ 13 ]
一部のウェブ開発者は、仕様からOggフォーマットが削除されたことを批判した。[ 14 ]また、W3Cの質疑応答ブログでもフォローアップの議論が行われた。[ 15 ]
適応型ビットレートストリーミング規格であるMPEG-DASHは、Media Source Extensions（MSE）[ 16 ]およびJavaScriptベースのDASHプレーヤーを介してWebブラウザで使用できます。このようなプレーヤーには、例えばDASH Industry Forumのオープンソースプロジェクトdash.js [ 16 ]がありますが、 BitmovinのHTML5 Video Player [ 17 ] （HTMLとJavaScriptを使用）や、MSEをサポートしていない従来のWebブラウザ向けのFlashベースのDASHプレーヤーなどの製品もあります。
Googleは 2010 年にOn2を買収し、VP8ビデオ フォーマットを取得しました。Google はVP8 をロイヤリティフリーで使用できるライセンスを提供しています。[ 18 ] Google はまた、標準化されたオープンソースの VP8 ビデオ コーデックとVorbisオーディオをMatroskaベースのコンテナに組み合わせたWebMを開始しました。VP8 の公開はフリー ソフトウェア財団によって歓迎されました。[ 19 ]
Googleが2011年1月にChromeでのH.264のネイティブサポートを終了すると発表した際[ 20 ] 、 Ars Technicaのピーター・ブライト[ 21 ]や、Googleの動きをエスペラント語をアメリカ合衆国の公用語と宣言することに例えたマイクロソフトのウェブエバンジェリスト、ティム・スニースなど、多くの方面から批判が寄せられた[22]。しかし、Opera Softwareのハーバード・モエンはArs Technicaの記事を強く批判し[ 23 ]、Googleはオープン性を基盤として自社製品でWebMを推進する意図を明確にすることで、この反応に対応した[ 24 ] 。
WebMのリリース後、MozillaとOperaはHTMLへのVP8の組み込みを求めた。[ 25 ]
2013年3月7日、Google Inc.とMPEG LA , LLCは、VP8に「不可欠となる可能性のある」技術に関する合意を発表し、GoogleはMPEG LAと11の特許権者からライセンスを取得し、MPEG LAはVP8特許プールの形成に向けた取り組みを終了した。[ 26 ] [ 27 ] [ 28 ] [ 29 ]
2012年、GoogleはVP8の後継としてVP9をリリースした。VP9もまたオープンソースで、ロイヤリティフリーである。
2017年末、Alliance for Open Media (AOMedia)がVP9の進化形として開発した新しいAV1フォーマットは機能凍結に達し、ビットストリーム凍結は2018年1月に予定されている。Firefoxのナイトリービルドには既にAV1のサポートが含まれている。[ 30 ]
H.264/MPEG-4 AVCは広く使用されており、速度、圧縮、ハードウェアデコーダ、ビデオ品質に優れていますが、特許で制限されています。[ 31 ] H.264のユーザーは、一部のインターネット放送ビデオの使用を除き、個々の特許権者またはMicrosoftやAppleを含む特許権者のグループであるMPEG LAからライセンスを取得する必要があります。 [ 32 ] H.264は通常、 Advanced Audio Coding （AAC）オーディオとともにMP4コンテナフォーマットで使用されます。AAC自体も特許で保護されているため、MP4のユーザーはH.264とAACの両方のライセンスを取得する必要があります。
2009年6月、WHATWGは、既存のフォーマットはいずれも規定要件として適切ではないと結論付けた。[ 33 ]
Appleは依然としてH.264のみをサポートしていますが、Microsoftは現在VP9とWebMをサポートしており、AV1のサポートも約束しています。
2013年10月30日、シスコはバイナリH.264モジュールをダウンロード可能にすると発表した。シスコは、ソフトウェアのインストール中にユーザーがダウンロードしたバイナリモジュールの特許ライセンス費用を負担し、その特定のケースではH.264を無料で使用できるようにした。[ 34 ]
シスコは発表の中で、 WebRTCプロジェクトの利用をさらに促進したいという希望を理由に挙げ、WebRTCのビデオチャット機能はすべてのブラウザでビデオフォーマットがサポートされることで恩恵を受けると述べた。[ 35 ] H.264モジュールは「あらゆるアプリケーションにロードできる、普及している、または実現可能なすべてのプラットフォーム」で利用可能になる。[ 36 ]
Cisco は、これらのモジュールのソースコードをBSD ライセンスで公開することも計画していますが、ロイヤリティは支払わない予定です[ 34 ]。そのため、コードはH.264ソフトウェア特許のない国でのみ実質的にフリー ソフトウェアとなり、これは他の既存の実装でもすでに当てはまります。
また、2013 年 10 月 30 日、Mozilla のBrendan Eich 氏は、Firefox がデフォルトで必要に応じて Cisco の H.264 モジュールを自動的にダウンロードすると発表した。同氏はまた、バイナリ モジュールは完璧な解決策ではないとも指摘した。なぜなら、ユーザーは「ライセンス契約や料金なしで変更、再コンパイル、再配布する」完全なフリー ソフトウェアの権利を持っていないからである。そのため、Xiph と Mozilla はDaalaの開発を続けている。[ 36 ] [ 37 ]
OpenH264 はH.264 のベースラインプロファイルのみをサポートしており、それ自体では AAC デコーダーの必要性に対応していません。そのため、通常AAC オーディオを含むハイプロファイルである一般的な MP4 Web ビデオには十分ではないと考えられています。[ 38 ] [ 39 ] [ 40 ] ただし、WebRTC で使用する場合、リリース発表では AAC の省略が正当化されています。「標準化団体は、WebRTC の共通オーディオ コーデックとしてOpusとG.711に合意しました」。 [ 35 ] AAC のライセンス局が OpenH264 のリリース直後に価格上限を撤廃したため、Cisco の H.264 に対する上限付きグローバル ライセンスのように、AAC の上限付きグローバル ライセンスが実現可能かどうかは疑問です。[ 41 ]
この表は、特定のユーザー エージェントでサポートされている可能性が高いビデオ フォーマットを示しています。ここにリストされているブラウザのほとんどは、ソフトウェア コンポーネントを組み込む代わりに、ビデオのデコードと表示にマルチメディア フレームワークを使用しています。オペレーティングシステムとサードパーティ コーデックに依存するため、マルチメディア フレームワークに問い合わせることなく、サポートされているフォーマットのセットを知ることは一般的にできません。[ 42 ] [ 43 ]これらの場合、ビデオ フォーマットのサポートは、ブラウザが未知のビデオ フォーマットを拒否する前にマルチメディア フレームワークに適切に問い合わせることを前提として、ブラウザ (またはそのレイアウト エンジン) ではなく、フレームワークの属性です。場合によっては、ここにリストされているサポートは、オペレーティングシステムの基盤となるメディア フレームワーク内で使用可能なコーデックの機能でも、ブラウザに組み込まれたコーデック機能の機能でもなく、たとえば、ブラウザの通常の HTML 解析をバイパスしてプラグイン ベースのビデオ プレーヤーを埋め込むブラウザ アドオンによるものである可能性があります。
動画ファイルには通常、動画コンテンツと音声コンテンツの両方が含まれており、それぞれ独自の形式でエンコードされています。ブラウザは動画形式と音声形式の両方をサポートしている必要があります。各ブラウザがサポートする音声形式の一覧については、「HTMLオーディオ」を参照してください。
HTMLでは、ビデオ形式をMIMEタイプで指定できます（例を参照）。MIMEタイプは、サポートされている形式をマルチメディアフレームワークに問い合わせるために使用されます。[ 44 ]
これらのブラウザのうち、組み込みのデコード用のライブラリを使用しているのは Firefox と Opera だけです。実際には、Internet Explorer と Safari も特定のフォーマットのサポートを保証できます。これは、それぞれのメーカーがマルチメディア フレームワークも作成しているためです。一方、Konqueror は Windows 上で実行した場合、Internet Explorer と同じフォーマットをサポートし、Mac 上で実行した場合、Safari と同じフォーマットをサポートしていますが、ここで選択されている Konqueror のサポートは、Konqueror のユーザーの大半がいるLinuxの典型的なものです。一般的に、ブラウザのフォーマット サポートは、ベンダーの相反する利害によって大きく左右されます。具体的には、Media FoundationとQuickTime は商用標準をサポートしていますが、GStreamerとPhonon は、対象となるフリー オペレーティングシステム上で、デフォルトでフリー フォーマット以外のフォーマットを法的にサポートすることはできません。[ 45 ]
これらは、各エンジンにおける該当アイテムのサポートレベルを示します。デフォルトでは、エンジンの最新バージョンが使用されます。ただし、特定のバージョン番号を指定することも可能です。完全サポートを示す場合は、そのアイテムを完全にサポートする最初のバージョンのエンジンが使用されます。
透明ビデオ、つまりアルファチャンネルを持つビデオには、複数の設計上の利点があります。[ 110 ]
transparent[ 114 ]フラグを使用することでした。HTML は、暗号化メディア拡張機能(EME) を介してデジタル著作権管理(DRM、コンテンツの使用方法を制限する)をサポートしています。DRM の追加は、フェアユースによってユーザーが法的権利を持っている場合でも、DRM によって制限されたメディアを使用するユーザーの自由を制限することができるため、議論の的となっています。[ 115 ] W3C が EME を承認した主な論拠は、そうでなければビデオコンテンツはウェブブラウザではなくプラグインやアプリで配信されることになる、というものでした。[ 116 ]
2013年、Netflixは、 Silverlightプラグイン（DRM付き）を使用した従来の配信方法に加えて、EMEを使用したHTMLビデオのサポートを追加しました。 [ 117 ]
2010 年、Apple iPad の発売後、スティーブ・ジョブズがApple のモバイル デバイスは Flash をサポートしないと発表した後、多くの著名なサイトがiPad を識別するユーザー エージェントに対してAdobe Flashの代わりに H.264 HTML ビデオの提供を開始しました。 [ 118 ] HTML ビデオは Flash ビデオほど普及しませんでしたが、 DailyMotion (Ogg Theora および Vorbis フォーマットを使用)、[ 119 ] YouTube (H.264 および WebM フォーマットを使用)、[ 120 ] Vimeo (H.264 フォーマットを使用) [ 121 ]から実験的な HTML ベースのビデオ プレーヤーが展開されました。
HTMLビデオのサポートは着実に増加しています。2013年6月、NetflixはHTMLビデオのサポートを追加しました。[ 122 ] 2015年1月、YouTubeはデフォルトでFlashの代わりにHTMLビデオを使用するように切り替えました。[ 123 ] 2015年12月、FacebookはすべてのビデオコンテンツでFlashからHTMLビデオに切り替えました。[ 124 ]
2016 年現在、Flash はデスクトップに広くインストールされていますが、スマートフォンなどのモバイル デバイスでは一般的にサポートされていません。[ 125 ] Adobe を含む多くの企業がFlash プラグインは段階的に廃止される運命にあると広く考えており、[ 125 ] [ 126 ]これにより、HTMLビデオがワールド ワイド ウェブ上でビデオを再生するための唯一の広くサポートされている方法になります。Chrome、[ 129 ] [ 130 ] Firefox、[ 131 ] Safari、[ 132 ] Edge、[ 133 ]は、 2017 年にほぼすべての Flash コンテンツをクリックして再生するようにする計画があります。Flash を廃止する計画を発表していない唯一の主要なブラウザは Internet Explorer です。[ 134 ] Adobe は 2017 年 7 月 25 日に、2020 年に Flash の開発を永久に終了すると発表しました。[ 135 ]
ビデオ要素は、ビデオや映画を再生するために使用されます。
{{cite web}}: CS1 maint: タイトルとしてアーカイブされたコピー (リンク)このブログでは、自社ソフトウェア製品であるRotatoの宣伝に加え、ウェブデザインにおける透明動画のさまざまな使用例を紹介しています。
31 では、WebM の動画のアルファ透明度がサポートされるようになりました。つまり、Chrome は、アルファ チャンネルを持つ WebM (VP8 および VP9) にエンコードされたグリーンスクリーン動画を再生する際に、アルファ チャンネルを考慮します。これにより、ウェブ ページ、画像、または他の動画の上に透明な背景を持つ動画を再生できます。
ファイルの背景色 (ステージ色) を透明に設定できます。SWF ファイルを含む HTML ページの背景色または画像が透けて見えます。このテクニックを使用すると、SWF コンテンツと DHTML (ダイナミック HTML) コンテンツを重ね合わせることができます。すべての Web ブラウザが同じように透明度を処理するわけではありません。ユーザーが使用できるようにしたいすべてのブラウザで SWF ファイルをテストしてください。ほとんどの Linux ブラウザは、アニメーションの透明度をサポートしていません。
transparent — SWF コンテンツは、ページ上の他の HTML 要素と重ねて表示されます。SWF ファイルの背景色 (ステージ色) は透明です。SWF ファイルの下にある HTML 要素は、アルファ ブレンディングを使用して、SWF の透明な領域を通して表示されます。このオプションは、wmode=window または wmode=direct と比較して再生パフォーマンスが低下します。