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

HTML5のvideo要素の属性と使い方を徹底解説

HTML5のvideo要素とは

HTML5の<audio>タグと<video>タグを使えば、ウェブサイトへのメディア埋め込みがとても簡単になります。<video>タグでは、src属性でメディアファイルの場所を指定し、controls属性を付けるだけで、ユーザーが再生・一時停止を操作できるプレイヤーが表示されます。

<video>タグには、見た目や操作性、さまざまな機能を細かく制御するための属性が多数用意されています。ここでは、押さえておきたい主要な属性を一覧形式で解説します。

video要素の主な属性一覧

No.属性と説明
1autoplay

このブール型属性を指定すると、データの読み込みが完了するのを待たずに、再生可能になった時点で動画が自動的に再生されます。
2autobuffer

このブール型属性を指定すると、自動再生が設定されていなくても、動画のバッファリングが自動的に開始されます。※現在では非標準の属性であり、代わりにpreload属性の使用が推奨されています。
3controls

この属性を指定すると、音量調整・シーク(再生位置の移動)・一時停止や再開など、ユーザーが動画の再生をコントロールできるようになります。
4height

動画の表示領域の高さをCSSピクセル単位で指定します。
5loop

このブール型属性を指定すると、動画が最後まで再生された後、自動的に先頭に戻って繰り返し再生されます。
6preload

ページ読み込み時に動画を事前にロードし、すぐに再生できる状態にしておくかどうかを指定します。autoplay属性が指定されている場合は無視されます。
7poster

ユーザーが動画を再生またはシークするまでの間に表示される画像(サムネイル)のURLを指定します。
8src

埋め込む動画ファイルのURLを指定します。この属性は省略可能で、代わりに<video>要素内に<source>要素を記述して動画を指定することもできます。
9width

動画の表示領域の幅をCSSピクセル単位で指定します。

video要素の基本的な記述例

以下は、<video>要素を使った基本的な記述例です。

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

ブラウザごとの動画フォーマット対応の違いに備えたい場合は、<source>要素を複数記述しておくと、対応している形式が自動的に選択されるため便利です。

  1. HTMLのdata-*属性とは？カスタムデータ属性の基本と使い方を実例付きで解説

    HTMLのdata-*属性は、あらゆるHTML要素に独自のカスタムデータを埋め込むために使用されるグローバル属性です。グローバル属性であるため、どの要素に対しても自由に利用できます。 JavaScriptと連携して要素に関連付ける情報を持たせたい場合などに非常に便利で、モダンなWeb開発では広く活用されています。 data-*属性の書き方（構文） 基本的な構文は以下の通りです。 <element data-属性名=値> ここで注意すべきポイントは次の2つです。 属性名には小文字のみを使用する（大文字は使用不可） 接頭辞「data-」の後に、少なくとも1文字以上の文字が必要 da

  2. HTML属性とは？基本構文からol・textareaの実用例までわかりやすく解説

    HTML属性（attribute）は、画像やキャンバスの幅・高さのように、要素に対してプロパティを設定するために使用されます。すべての要素は属性を持つことができ、要素に関する追加情報をブラウザに伝える役割を果たします。属性は「名前」と「値」のペアで構成されます。以下はその基本的な例です。<canvas id="newCanvas" width="400" height="300">その他の属性の例も見てみましょう。<img alt="代替テキスト">HTML5の標準仕様では、属性値を引用符で