video/rp/rt/ruby

<video>

video要素は、ビデオやムービー、そして、キャプションを伴うオーディオファイルを再生するために使います。

video要素の中にコンテンツを入れることができます。ユーザーエージェントは、ユーザーにそのコンテンツを見せるべきではありません。それは、video要素をサポートしていない古いウェブ・ブラウザに向けたものです。古いビデオ用プラグインを試すことができるようにしたり、古いブラウザーを使っているユーザに、ビデオ・コンテンツにアクセスする方法を知らせるためのテキストを見せたりします。

とりわけ、このコンテンツは、アクセシビリティの問題を解決するものではありません。目が不自由な人や耳が不自由人、そのほか、肉体的障害や認知障害を持った人でもコンテンツにアクセスできるようにするために、ウェブ制作者は、メディア・ストリームを選択できるようにしたり、アクセシビリティ支援(説明文や字幕)をメディア・ストリームの中に組み込んだりすることが期待されます。

video要素はメディア要素ですが、そのメディア・データは表面上はビデオ・データだけれども、オーディオ・データが関連づけられている可能性があります。

src,preload,autoplay,mediagroup,loop,muted,controls属性は、すべてのメディア要素に共通の属性です。

poster属性は、ユーザーエージェントが利用可能なビデオ・データがないときに表示できる画像ファイルのアドレスを与えます。この属性が存在すれば、これは潜在的にスペースで囲まれた空でない妥当な URLでなければいけません。

指定されたリソースが使われることになったら、この要素が生成されたとき、または、poster属性がセット、変更、削除されたときに、ユーザーエージェントは、この要素のポスター・フレームを決定するために、次の手順を実行しなければいけません:

  1. 該当のvideo要素に対して実行されているこのアルゴリズムの既存のインスタンスがあれば、ポスター・フレームを変更せずに、このアルゴリズムのインスタンスを中止します
  2. poster属性の値が空文字列なら、または、その属性が存在しないなら、ポスター・フレームはありません。これらの手順を中止します。
  3. poster属性の値を、該当の要素に対して解決します。これに失敗したら、ポスター・フレームはありません。これらの手順を中止します。
  4. この要素のDocumentの origin から、結果として得られた絶対 URLをフェッチします。これは、この要素のドキュメントのload イベントを遅延させなければいけません。
  5. 画像を取得できたら、ポスター・フレームは、その画像となります。そうでなければ、ポスター・フレームはありません。

poster属性で指定された画像、つまり、ポスター・フレームは、そのビデオの代わりになるフレーム(通常は、空でない最初のフレーム)として想定されていますが、それがどんなビデオなのかをユーザに提示するものです。

利用可能なビデオ・データがない(この要素のreadyState属性がHAVE_NOTHINGまたはHAVE_METADATAのいずれかであるが、まだビデオ・データを全く取得できていない、もしくは、この要素のreadyState属性が何か次に続く値ではあるけれども、メディア・リソースがビデオ・チャネルを持たない)とき、そのvideo要素は、ポスター・フレームを表す、もしくは、何も表さない、のいずれかとなります。

video要素が一時停止され、現在の再生位置がビデオの最初のフレームなら、この要素は、現在の再生位置に相当するビデオ・フレームか、ポスター・フレームかのいずれかを表しますが、どちらかについてはブラウザに任されます。

上記にかかわらず、ポスター・フレームは何に対しても優先されるべきではありません。しかし、ポスター・フレームは、ビデオ・フレームが表示されたら、その後に再び表示されるべきではありません。

video要素が他のどこの位置で一時停止されても、そして、そのメディア・リソースがビデオ・チャネルを持つとき、この要素は、現在の再生位置に相当するビデオフレームを表します。また、それがまだ利用可能でないなら(例えば、そのビデオがシーク中やバッファリング中の場合)、それは、そのビデオの最後にレンダリングされたフレームを表します。

メディア・リソースがビデオ・チャネルを持つvideo要素が潜在的に再生中のとき、それは、連続的に増え続けている”現在” の位置のビデオ・フレームを表します。現在の再生位置が変わってしまい、最後にレンダリングされたフレームがもうそのビデオの現在の再生位置に対応するフレームでないとき、新しいフレームがレンダリングされなければいけません。同様に、そのメディア・リソースと結び付けられているオーディオも、それが再生されるなら、この要素の実効メディア・ボリュームで、現在の再生位置と同期して再生されなければいけません。

メディア・リソースがビデオ・チャネルを持つvideo要素が潜在的に再生中でも一時停止でもなければ(例えば、シーク中やコマ送り)、この要素は、レンダリングされた最後のビデオフレームを表します。

特定の再生位置に対応するフレームがビデオ・ストリームのどこになるかは、ビデオ・ストリームのフォーマットで定義されます。

video要素は、また、テキスト・トラック・キュー・アクティブ・フラグがセットされ、テキスト・トラックが表示中またはデフォルトで表示中モードになっているテキスト・トラック・キューを表します。

上記に加え、ユーザーエージェントは、ビデオにテキストやアイコンをオーバーレイしたり、この要素の再生領域の外など適切な場所に表示したりして、ユーザーにメッセージ(”バッファリング中”, “ビデオ未ロード”, “エラー” やその他、詳細情報)を提供することができます。

ビデオをレンダリングできないユーザーエージェントは、代わりに、外部のビデオ再生ユーティリティやビデオ・データそのものへのリンクを表すことができます。

HTML5コーディングならココ!

属性

src属性
動画ファイルを指定する
poster属性
動画のヒントとなる画像を表示する
preload属性
動画をあらかじめ読み込む(auto、metadata、none)
autoplay属性
動画を自動再生する
loop属性
ループ再生を指定する
controls属性
インターフェースを表示する
width属性
幅を指定する
height属性
高さを指定する

<rp>

rp要素は、ルビ注記のテキストを括弧で囲むために使われます。ルビ注記に対応していないユーザーエージェントで表示されます。

ruby要素の子となるrp要素は、何も表しません。そのコンテンツは無視されなければいけません。親要素がruby要素でないrp要素は、その子を表します。

<ruby>
死電<rt>デッド</rt>
区間<rt>セクション</rt>
</ruby><br>

<ruby>
鎮魂歌<rp>(</rp><rt>レクイエム</rt><rp>)</rp>
</ruby>

↓表示例

死電デッド区間セクション
鎮魂歌レクイエム

<rt>

rt要素は、ルビ注記のルビ・テキスト構成要素をマークします。

ruby要素の子であるrt要素は、その直前にある 0 個以上のruby要素内のフレージング・コンテンツのノードに対する注記(その子によって与えられます)を表します。rp要素は無視されます。

ruby要素の子でないrt要素は、その子と同じものを表します。

<ruby>
武装<rt>スキル</rt>
無能力者集団<rt>アウト</rt>
</ruby><br>

<ruby>
180分の <rp>(</rp><rt>インスタント</rt><rp>)</rp>
恋奴隷 <rp>(</rp><rt>ラヴァー</rt><rp>)</rp>
</ruby>

↓表示例

武装スキル無能力者集団アウト
180分のインスタント恋奴隷ラヴァー

<ruby>

ruby要素を使って、フレージング・コンテンツの一つ以上の範囲にルビ注記を入れることができます。ルビ注記は、ベースのテキストに併記される短いテキストですが、主として、発音のガイドとしてや、他の注記を入れるために、東アジアの印刷で使われます。日本語では、この印刷形態は「ふりがな」としても知られています。

<rt>はRuby Textの略でルビのテキストを、 <rp>はRuby Parenthesesの略でルビのテキストを囲む括弧等の記号を、それぞれ指定します。 <rt>と<rp>は、<ruby>~</ruby>の中で子要素として使用します。

<rp>~</rp>の内容は、<ruby>タグに対応したブラウザでは無視されます。 <ruby>タグに対応していないブラウザでは、 漢(かん)字(じ) のように表示されます。

ruby要素は、それが含んでいるフレージング・コンテンツの範囲を表します。子のrt要素とrp要素、そしてそれらの子孫は無視されます。これらのフレージング・コンテンツの範囲は、rt要素を使って生成される注記と結びづけられるようになりました。

<ruby>
絶対<rt>エンペラー</rt>
時間<rt>タイム</rt>
</ruby><br>

<ruby>
俺の両手は <rp>(</rp><rt>ダブル</rt><rp>)</rp>
機関銃 <rp>(</rp><rt>マシンガン</rt><rp>)</rp>
</ruby>

WEB制作でお困りのあなたに朗報

↓表示例

絶対エンペラー時間タイム
俺の両手はダブル機関銃