<video>要素(文書中に埋め込む動画)。

HTML 5 に於ける、文書中に埋め込む動画である<video>要素について解説します。

<video>要素の概要。

HTML 5 に於ける<video>要素は、文書中に埋め込む動画として定義されております。

  • HTML 4/XHTML 1には該当する要素はありません。

<video>要素の定義。

カテゴリ
要素が置ける箇所
要素の内容モデル
src 属性を持つ場合
  1. 零個以上の<track>要素
  2. その後透明な内容

すなわち、<video>要素の開始タグ, 終了タグと<track>要素のタグを取り除いても文法違反とならない内容。

src 属性を持たない場合
  1. 零個以上の<source>要素
  2. 零個以上の<track>要素
  3. その後透明な内容

すなわち、<video>要素の開始タグ, 終了タグと<source>要素及び<track>要素のタグを取り除いても文法違反とならない内容。

  • 但し、いずれの場合も、内容として他の<video>要素や<audio>要素を含んではならない。
要素で定義された属性
グローバル属性の他、以下の属性があります。
src 属性
埋め込み動画のURIです。
poster 属性
動画が表示出来ない場合や動画再生準備が整うまでに代わりに埋め込む画像のURLです。
preload 属性
読込に関する指定です。

値としては、以下のいずれかを採ります。

none
なるべく不必要な読込はしないように求めます。

すなわち、ユーザエージェントに対して

  • 当該動画は必ずしも閲覧されるものではない
  • サーヴァとしては余計なトラフィックはなるべく抑えたい

と言う事を提示します。

metadata
当該動画に関するメタ情報、すなわち
  • 解像度
  • 再生時間
  • 最初のフレームの内容

などと言った情報は取得する方が良いと言う事を提示します。

automatic
ユーザエージェントに対して、サーヴァのトラフィックなどを気にせず、閲覧者の需要に合わせて読込をして良いと言う事を提示します。
  • 空文字列の場合もこの扱いとなります。

尚、この属性がない場合や、属性が不正な値の場合は、ユーザエージェントに一任されます。

また、上記のように、余り具体的な取り扱いを明示していないため、状況に依っては無視される場合があります。

加えて、autoplay 属性値もある場合は、この属性は無視されなければなりません。

  • preload 属性と autoplay 属性値の併記は文法違反とはなりませんが、その場合 preload 属性は無効となる訳です。
autoplay 属性値
ユーザエージェントに対し、なるべく早く当該動画を読み込んで自動再生する事を求めます。
  • XHTML 5 で記述する場合またはXHTMLと互換性を持たせたい場合などは、autoplay="autoplay" と記述します。
mediagroup 属性
当該要素が属するグループ名を指定します。
  • 同一文書内で、同じ mediagroup 属性値を持つ<video>要素または<audio>要素は、一つのグループに纏められ、連続再生などが可能になります。
loop 属性値
ユーザエージェントに対し、エンドレス再生を行うよう求めます。
  • XHTML 5 で記述する場合またはXHTMLと互換性を持たせたい場合などは、loop="loop" と記述します。
muted 属性値
ユーザエージェントに対し、当該動画の音声を出さずに再生する事を求めます。
  • XHTML 5 で記述する場合またはXHTMLと互換性を持たせたい場合などは、muted="muted" と記述します。
controls 属性値
ユーザエージェントに対し、当該動画のコントローラ(再生ボタンや停止ボタンなどの表示)を出すよう求めます。
  • XHTML 5 で記述する場合またはXHTMLと互換性を持たせたい場合などは、controls="controls" と記述します。
width 属性
当該動画のユーザエージェント上での横方向のピクセル数を指定します。
height 属性
当該動画のユーザエージェント上での縦方向のピクセル数を指定します。

<video>要素の詳細。

HTML 5 に於ける<video>要素は、文書中に埋め込む動画です。

従来も、<embed>要素または<object>要素で、プラグインを前提とした埋め込みが可能でしたが、<video>要素はユーザエージェントがネイティヴで持つ再生機能を利用して埋め込むものです。

このため、以下の利点が生じます：

  • プラグインの有無を気にする必要がなくなります。
  • 記述が非常に簡素になります。

ただ、<video>要素自体が後発である事と、対応している動画形式がまちまちである事から、完全とは言えないのが実情です。

<video>要素で埋め込める動画の形式。

  • この節の内容は、公式に規格化されたものではありません。
  • この節には、制作者の私見が入ります。

ユーザエージェントの種類に依り、埋め込める動画形式が異なります。

ファイヤーフォックス 3.5以降
オペラ 10.50以降
グーグルクロム 3.0以降
アンドロイド用モバイルサファリ
以下のいずれかから撰べます。
WebM(ウェブエム)形式
動画コーデックはVP8、音声コーデックはVorbis(ヴォービス)
OGG(オッグ)形式
動画コーデックはTheora(セオラ)、音声コーデックはVorbis(ヴォービス)

但し、WebMは後発のコンテナ形式のため、オペラ 10.5x, ファイヤーフォックス 3.x, グーグルクロム 3.0〜5.xでは再生出来ません。

  • 各社ともWebMを採用したものの、既存のOGGのサポートを停止する予定はないようです。
サファリ(PC/Mac 3.1以降, 及びiOS用)
インターネットエクスプローラ 9以降
MPEG 4 形式
動画コーデックはH.264、音声コーデックはAAC-LCなど

グーグルクロムも平成23年 6月現在の最新版ではMPEG 4をサポートしておりましたが、今後はサポートしない予定となっております。

マイクロソフト・アップル両社の利害関係や、オペラ・グーグル両社の利害関係及びもじら財団の理念を考慮すると、この情勢では残念ながら今後も一本化される事は期待出来ないと思われます。

<video>要素の内容。

<video>要素の内容は、併用する<source>要素及び<track>要素の他、<video>要素に対応していない環境に限り扱われるべき内容となります。

例えば、

などと言ったものが考えられます。

ただ、注意したい事としては、<video>要素の内容はあくまでも対応していない旧型のユーザエージェントに向けられるものであり、アクセシビリティを助けるためのものではないと言う事です。

<video>要素の例。

<figure class="video">
    <figcaption>堀北真希ちゃん&#9825;</figcaption>
    <object data="/video/HORIKITA_Maki.swf" type="application/x-shockwave-flash" width="356" height="288">
        <param name="movie" value="/video/HORIKITA_Maki.swf" />
        <param name="loop" value="true" />
        <param name="quality" value="high" />
        <video width="356" height="288">
            <source src="/video/HORIKITA_Maki.MP4" type="video/mp4" />
            <p>お使いの環境では動画がご覧になれないため、動画のスライドショーをご覧ください。</p>
            <img alt="※この箇所にスライドショーとなるGIF画像が入ります。" src="/video/HORIKITA_Maki.GIF" width="356" height="288" />
            </video>
         </object>
    </figure>

この例では、取り敢えず<object>要素でフラッシュ動画を埋め込もうとしておりますが、フラッシュ再生に対応していない環境(ｉパッドなど)では内容となる<video>要素でMPEG 4動画が再生出来る様にしております。

フラッシュ再生にも<video>要素に対応していない場合は、断り書きとともにアニメーテッドGIF画像に依る動画のスライドショーを代わりにご覧頂けるようにしております。

注意事項。

ストリーミング配信について。

HTML 5 の仕様では、ストリーミング配信の方法は特に定めておりません。

ただ、ユーザエージェントがHTTP 1.1 の機能であるプログレッシヴ・ダウンロード(擬似ストリーミング)をサポートしてさえいれば、同様の機能を実現する事が可能です。

  • プログレッシヴ・ダウンロードは既にユーテューブなどで採用されており、それほど特殊な技術ではありません。
  • プログレッシヴ・ダウンロードは取得後のデータを破棄しないため、著作権のあるコンテンツで問題が生じ得るとされておりますが、その一方で特別なストリーミングサーヴァを要さず、通常のウェブサーヴァで配信が可能であると言う利点もあります。

ディジタル著作権管理(DRM)について。

HTML 5 の仕様では、ディジタル著作権管理(DRM)の方法も特に定めておりません。

これらの技術は、ユーザエージェントなどが実装するであろうからです。

動画形式の問題について。

  • この節には、制作者の私見が入ります。

<video>要素で埋め込める動画の形式で述べた通り、<video>要素で対応する動画フォーマットは二派に分かれ、一本化される可能性は非常に低いものとなっております。

また、平成24年 1月現在、<video>要素に対応していないインターネットエクスプローラ 8.0 以前が広く使われており、<video>要素だけとするのは時期尚早と言えます。

現状を見ると、アップル社の一部環境以外はフラッシュのプラグインが使えるため、今のところは以下の方法がベターだと思われます。

  1. 動画はフラッシュとMEPG 4を用意する(後述の参考事項もご覧ください)。
  2. フラッシュ動画は<object>要素と<param>要素で埋め込み、対応出来ないアップルの一部環境に対してのみ<video>要素で埋め込む。

勿論、WebMかOGG版とMPEG 4版を用意すれば、<video>要素と<source>要素だけで良いのですが、現状ではまだまだ<video>要素非対応の環境も少なくない事と、フラッシュの普及率がデスクトップ機では九割以上を占めている事から、フラッシュと MPEG 4 を用意する方が有利と思われます。

動画のアクセシビリティについて。

  • この節には、制作者の私見が入ります。

<video>要素の内容は、基本的に HTML 5 に対応していない環境向けの代替コンテンツとされており、HTML 5 に対応している環境で利用するものではないとされております。

HTML 5 では、動画の内容を完全に閲覧出来ない閲覧者向けの字幕や副音声を<track>要素で埋め込む事で対応するものとしております。

このため、現在の HTML 5 草案に於いては、以下の点に留意する必要があります。

  • HTML 5 対応環境での閲覧で動画をアクセシブルなものにするには、動画の進行に合わせた字幕データや副音声データを完備しなければならない
    • 字幕データや副音声データの作成を怠ると、HTML 5 対応環境を用いて視覚障害者や聴覚障害者が当該動画を閲覧した場合に内容を把握出来なくなる恐れが生じる
  • HTML 5 に対応出来ない環境を想定して、別途テキストを中心とした代替コンテンツを用意する必要がある。

動画コンテンツをアクセシブルなものにするために、制作者は以下のような方策を採る事をお勧めします。

テキストに依る動画の内容説明を、<video>要素の外に記述する
長尺の動画だと難しいかも知れませんが、動画のあらすじや台本などをテキストに起こし、それを<video>要素の外に記述します。

ここで、<video>要素の外にと強調したのは、HTML 5 に対応している環境だと<video>要素内にあるテキストへのアクセスが困難になるからです。

HTML 5 への対応/非対応に拘わらず利用出来るテキストとするには、<video>要素の外に記述しなければなりません。

  • 尚、JAVAスクリプトに依る DOM 操作を行う事で、健常者に対してはこれらのテキストを非表示にする事も出来ます。この場合、内容の把握が困難だと感じた場合に、クリック一つで当該テキストを読めるようにも出来ます。
    • JAVAスクリプトに依る DOM 操作が可能であれば、台本テキストを<video>要素内に記述しても、DOM 操作で<video>要素の外に移動させる事が可能です。ですが、JAVA スクリプトは決して必須の技術ではないので、依然<video>要素の外に記述しておく必要があります。

動画の話のあらすじや台本などをテキストに起こせれば、それを単一のセクションとして記述する事も出来るでしょう。

或いは、文書作成の段階で、読むだけで動画の内容が把握出来るようなテキスト文章を記述するようにします。

  • 近年では、SEO(検索エンジン最適化…検索エンジンに自分のコンテンツを適切に案内してもらえるようにするための、HTML 文書作成側での施策)の一環として、テキストに依るコンテンツの表現は重要視されて来ております。検索エンジンも基本的に動画の内容を把握する事は苦手ですので、このテクニックは有用と言えるでしょう。

確かに、<video>要素は HTML 5 の新機能の中で最も注目されているものの一つです。

ですが、その仕様には上記のようにアクセシビリティの問題が残っております。

コンテンツをアクセシブルなものにするためにも、テキストでの内容記述は依然行うべきものと言えるでしょう。

敢えて<object>要素を使う手もあります。

  • この節には、制作者の私見が入ります。

<object>要素は対応出来ない形式のオブジェクトに対しては、当該要素の開始・終了タグ及び直下の<param>要素を無視して、<param>要素以外の内容を取扱います。

また、<video>要素で埋め込める動画は<object>要素でも取り扱える事となっております。

と言う事は、敢えて<video>要素を使わずに、<object>要素を使うと言う手も考えられます。

<object>要素なら、HTML 5 の対応に拘わらず、代替コンテンツの記述が容易になります。

一方、<object>要素を用いた場合の問題点としては、以下のものがあります。

<video>要素向けに用意された属性が使えない
<video>要素には、動画の自動再生の可否や動画読み込みが終わるまでに表示する代替画像など、便利な属性が幾つもあります。

環境に依っては、これらの属性をパラメータで指定する事も可能ですが、方法は環境に依ってまちまちとなるでしょう。

<video>要素向けに用意された DOM インタフェイスも使えない
また、<video>要素には、動画の再生時に有用な DOM インタフェイスも用意しておりますが、<object>要素ではこれらは使えません。

これらの点についても考慮したうえで、<video>要素を用いるかそれとも<object>要素を用いるかを検討すべきでしょう。

HTML 4/XHTML 1との違い。

<video>要素は HTML 4/XHTML 1にはありません。

関連項目。

<embed>要素
外部アプリケーション等の埋め込み(パラメータ・代替内容なし)
<object>要素
外部リソースの埋め込み(パラメータ・代替内容あり)
<audio>要素
文書中に埋め込む音声
<source>要素
埋め込み動画/音声リソースの指定
<track>要素
動画/音声と同期するテキストトラックの埋め込み