JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLの

HTMLの<video>要素の主な属性

HTMLの<video>要素は、Webページに動画を埋め込むための標準的な要素です。再生方法や表示サイズ、読み込みの挙動などを属性で指定することで、動画を柔軟に制御できます。ここでは、<video>要素で利用できる主な属性とその役割をわかりやすくまとめました。

属性の一覧

属性説明
autoplay 論理属性です。この属性を指定すると、データの読み込みが完了していなくても、再生可能になった時点で自動的に動画の再生が開始されます。
autobuffer 論理属性です。自動再生が設定されていない場合でも、動画のバッファリング（先読み）を自動的に開始します。なお、現在では後述の preload 属性が標準となっており、この属性は非推奨です。
controls この属性を指定すると、音量・シーク（再生位置の移動）・一時停止／再開など、ユーザーが動画の再生を操作するためのコントロールが表示されます。
height 動画の表示領域の高さをCSSピクセル単位で指定します。
loop 論理属性です。この属性を指定すると、動画が最後まで再生された後に自動的に先頭へ戻り、繰り返し再生されます。
preload ページ読み込み時に動画を事前に読み込み、再生できる状態にしておくかどうかを指定します。autoplay 属性が指定されている場合は無視されます。値としては「none」（事前読み込みなし）、「metadata」（メタデータのみ）、「auto」（自動的に読み込む）の3種類があります。
poster ユーザーが再生やシークを開始するまでの間に表示されるサムネイル画像（ポスター画像）のURLを指定します。
src 埋め込む動画ファイルのURLを指定します。この属性は省略可能で、代わりに<video>ブロック内に<source>要素を配置して動画を指定することもできます。
width 動画の表示領域の幅をCSSピクセル単位で指定します。

記述例

以下は、<video>要素に複数の属性を組み合わせた基本的な記述例です。

<video src="movie.mp4" controls width="640" height="360" poster="thumbnail.jpg" preload="metadata">
  お使いのブラウザはvideo要素に対応していません。
</video>

この例では、コントロールを表示し、表示サイズを640×360に指定しています。また、再生前には「thumbnail.jpg」がサムネイルとして表示され、メタデータのみが事前読み込みされます。

まとめ

<video>要素の属性を適切に使い分けることで、自動再生やループ再生、サムネイル表示など、ユーザー体験に合わせた動画再生の制御が可能になります。特に controls や poster、preload は実務でもよく使われる属性なので、ぜひ覚えておきましょう。

  1. HTMLのoptimum属性とは？meter要素での使い方を解説

    HTMLのoptimum属性は、ドキュメント内でゲージの値が「最適」とみなされる範囲を定義する属性です。この属性を指定できるのは、meter要素のみです。 optimum属性は、min・max・low・highなどの属性と組み合わせて使用することで、計測値がどの範囲にあれば望ましい状態なのかをブラウザに伝える役割を果たします。 構文 optimum属性の構文は以下のとおりです。 <meter optimum="数値"></meter> 属性値には、ゲージの最適値となる数値（整数または小数）を指定します。 それでは、HTMLのoptimum属性の具体的

  2. HTMLのonscrollイベント属性とは？使い方とサンプルコードを解説

    HTMLのonscrollイベント属性は、HTMLドキュメント内でスクロールバーを使ってHTML要素がスクロールされたときに発火するイベント属性です。ユーザーがスクロール操作を行ったタイミングでJavaScriptを実行したい場合に活用できます。構文onscrollイベント属性の基本的な構文は以下のとおりです。<tagname onscroll="script"></tagname>onscroll属性には、スクロール時に実行したいJavaScriptのコードまたは関数名を指定します。divやpなど、overflowプロパティでスクロール可能に設定さ