HTML5

タグ(要素)

VIDEO

  編集:2022.07.01 by T.A.

mdn

ビデオ プレイヤーに使用される。

この要素を使用できる文脈

エンベディッド内容が期待される場所。

内容モデル

要素が src 属性を持つ場合: 0 個以上の TRACK 要素で、次に透過的だが、メディア要素子孫をもたない。

要素が src 属性を持たない場合: 0 個以上の SOURCE 要素で、次に 0 個以上の TRACK で、次に透過的だが、メディア要素子孫をもたない。

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性

この例は、ビデオを正常に再生するために障害が発生したことを検出する様子を示す:

<SCRIPT>
 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }
 }
</SCRIPT>
<P><VIDEO src="tgif.vid" autoplay controls onerror="failed(event)"></VIDEO></P>
<P><A href="tgif.vid">Download the video file</A>.</P>
関連

SOURCETRACK


src属性

表示するメディア リソース(ビデオ、オーディオ)の URL を与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でない URL を含まなければならない。

<VIDEO id=IdsrcVideo src="../Sample/Eizou_CM.mp4"></VIDEO><BR>
<BUTTON onclick="IdsrcVideo.src='../Sample/Eizou_CM.mpg'">.mpg</BUTTON>
<BUTTON onclick="IdsrcVideo.src='../Sample/Eizou_CM.avi'">.avi</BUTTON>
<BUTTON onclick="IdsrcVideo.src='../Sample/Eizou_CM.wmv'">.wmv</BUTTON>
<BUTTON onclick="IdsrcVideo.src='../Sample/Eizou_CM.mkv'">.mkv</BUTTON>
<BUTTON onclick="IdsrcVideo.src='../Sample/Eizou_CM.mp4'">.mkv</BUTTON>
[Edge]では.mp4しか受け付けないのだろうか?

crossorigin属性

要素が生成元をまたいだ要求を処理する方法。CORS 設定属性

poster属性

先にビデオ プレイバックを見せるポスター フレーム。

ビデオ データが利用可能でない間に、ユーザー エージェントが表示できる画像ファイルの URL を与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でない URL を含まなければならない。

<VIDEO poster="../Sample/Picture_M.jpg" src="../Sample/Eizou_CM.mp4"></VIDEO>

preload属性

メディア リソースがどの程度バッファーリングに必要になるかのヒント。列挙属性

次の表は、キーワードと属性の状態を示す。1 列目のキーワードは、キーワードと同じ行で 2 列目のセル内の状態に対応づける。メディア リソースがバッファーまたは再生されている場合でも属性を変更できる。下記の表の説明では、この点に留意して解釈されるべきである。

キーワード 状態 概要
none None 著者がメディア リソースを必要とすることをユーザーに期待しない、またはサーバーが不要なトラフィックを最小限にしたいのいずれかのユーザー エージェントへのヒント。

バッファーリングはとにかく開始する(たとえばユーザーが "play" に当たる)場合、この状態は、メディア リソースを実際にダウンロードする方法に関して積極的にヒントを提供しない。

metadata Metadata 著者がメディア リソースを必要とするとユーザーに期待しないが、リソースのメタデータ(寸法、トラック リスト、期間など)フェッチし、そしておそらく最初の数フレームが合理的であるユーザー エージェントへのヒント。

ユーザー エージェントが正確にメタデータ以上のものをフェッチしない場合、典型的には、一部のフレームも同様に得られ、おそらく HAVE_CURRENT_DATA または HAVE_FUTURE_DATA になるにもかかわらず、メディア要素は HAVE_METADATA に設定される readyState 属性に終わる。

メディア リソースが再生するとき、たとえばメディア データが依然として一貫した再生を維持し最も遅い可能性のレートで得られるようにダウンロードを絞ることが示唆するような、帯域幅の不足を考慮すべきであるというユーザー エージェントへのヒント。

auto Automatic ユーザー エージェントが、楽観的に全体のリソースのダウンロードを含め、サーバーへのリスクなしに、最初のユーザーのニーズを置くことができるというユーザー エージェントへのヒント。

空文字列もまた妥当なキーワードであり、自動状態に対応づける。メタデータ状態はサーバーの負荷を軽減し、最適なユーザー エクスペリエンスを提供する妥協点として示唆されるけれども、属性の欠損値のデフォルトおよび不正値のデフォルトは、実装定義である。

注釈: 一度ユーザーが再生を始めると、著者は、動的に "none" または "metadata" から "auto" に属性を切り替えるかもしれない。たとえば、多くのビデオをもつページ上で、要求されないが一度に動画が積極的にダウンロードされる限り、これは多くの動画がダウンロードされるべきではないことを示すために使用されるかもしれない。

autoplay属性

ページが読み込まれるときにメディア リソースが自動的に開始可能というヒント。真偽属性

存在する場合、停止せず再生できるようになるとすぐに、(ここで記述されるアルゴリズムで説明されるような)ユーザー エージェントは自動的にメディア リソースの再生を開始する。

注釈: 著者は、望まれない場合、たとえばスクリーン リーダーを使用する場合、ユーザーが自動再生を上書きできるよう、自動再生を誘発するためのスクリプトを使用するよりも、autoplay 属性を使用するように促される。著者はまた、一切自動再生の動作を使用することなく、代わりに明示的に再生を開始するためのユーザーに対してユーザー エージェントが待機しないよう考慮することが推奨される。

<VIDEO autoplay muted src="../Sample/Eizou_CM.mp4"></VIDEO>

playsinline属性

要素の再生領域内のビデオ内容を表示することをユーザー エージェントに勧める。真偽属性

この属性が存在する場合、この属性は、代わりにフルスクリーン表示されているまたは独立したサイズ変更可能なウィンドウで、要素の再生領域が制限される、映像がデフォルトで文書で "インライン" に表示されるべきユーザー エージェントへのヒントとして提供する。

注釈: playsinline 属性の不在は、映像がデフォルトでフルスクリーンに表示されることを意味するものではない。実際、ほとんどのユーザー エージェントは、デフォルトですべてのビデオ インラインを再生することを選択し、そのようなユーザー エージェントで playsinline 属性は効果がない。

loop属性

メディア リソースをループするかどうか。真偽属性

この属性が指定される場合、終端に達するとメディア リソースの先頭に戻ってシークするメディア要素であることを示す。

<VIDEO loop controls muted src="../Sample/Eizou_CM.mp4"></VIDEO>

muted属性

デフォルトでメディア リソースをミュートするかどうか。真偽属性

潜在的にユーザー設定を上書きし、メディア リソースに属するオーディオ出力のデフォルトの状態を制御する。

<VIDEO controls muted src="../Sample/Eizou_CM.mp4"></VIDEO>

controls属性

ユーザー エージェントの制御を表示する。真偽属性

この属性が存在する場合、著者がスクリプト化されたコントローラーを提供しておらず、ユーザー エージェントに独自の制御の集合を提供したいと考えていることを示す。

<VIDEO controls muted src="../Sample/Eizou_CM.mp4"></VIDEO>

width属性

横方向の寸法。

<VIDEO width=200 controls muted src="../Sample/Eizou_CM.mp4"></VIDEO>

<DIV style="width:200px; border:1px solid black;">
 <VIDEO width=50% controls muted src="../Sample/Eizou_CM.mp4"></VIDEO>
</DIV>
パーセンテージ指定できた

<VIDEO width=200 poster="../Sample/Picture_M.jpg" controls muted src="../Sample/Eizou_CM.mp4"></VIDEO>

height属性

縦方向の寸法。

<VIDEO width=200 height=200 controls muted src="../Sample/Eizou_CM.mp4"></VIDEO><BR>
<VIDEO width=500 height=500 controls muted src="../Sample/Eizou_CM.mp4"></VIDEO><BR>
サイズが自由に指定できた

controlslist属性

[Edge]実験的。controlslist 属性が指定されていると、ブラウザー自身のコントロールのセットを表示する場合(例えば controls 属性が設定されている場合)、メディア要素に表示するコントロールを選択するのを補助します。

nodownload
nofullscreen ¶全画面表示にできなくする。
noremoteplayback

disablepictureinpicture 属性を使用すると、ピクチャ イン ピクチャ モード(およびコントロール)を無効にすることができます。

<VIDEO controls controlslist=nodownload muted src="../Sample/Eizou_CM.mp4"></VIDEO>

<VIDEO controls controlslist=nofullscreen muted src="../Sample/Eizou_CM.mp4"></VIDEO>

<VIDEO controls controlslist=noremoteplayback muted src="../Sample/Eizou_CM.mp4"></VIDEO>

autopictureinpicture属性

[Edge]実験的。論理属性。true であれば、ユーザーがこの文書と他の文書やアプリケーションとの間を行き来したときに、自動的にピクチャ イン ピクチャ モードに切り替わるようにすることを示します。

<VIDEO controls autopictureinpicture muted src="../Sample/Eizou_CM.mp4"></VIDEO>

disablepictureinpicture属性

[Edge]実験的。ブラウザーにピクチャ イン ピクチャのコンテキスト メニューを表示させないようにしたり、場合によっては自動的にピクチャ イン ピクチャを要求しないようにします。

disableremoteplayback属性

[Edge]実験的。論理属性。有線(HDMI、DVI など)や無線(Miracast、Chromecast、DLNA、AirPlay など)を使用して接続された端末のリモート再生機能を無効にするために使用されます。

Safari では、代替として x-webkit-airplay="deny" を使用することができます。


テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: