動画を埋め込むHTML要素<video>の使い方

投稿日：2021年2月16日

動画を埋め込む

以下のようにsrc属性に埋め込みたい動画のURLを指定することで動画を埋め込むことができます。

<video src="movie.mp4"></video>

または<source>要素を用いて以下のように記述することもできます。

<video>
  <source src="movie.mp4" type="video/mp4">
</video>

またvideoタグ内にテキストを記述しておくと、ブラウザで要素がサポートされていなかった場合にテキストを表示することができます。

<video>
  <source src="movie.mp4" type="video/mp4">
  このブラウザでは動画埋め込みがサポートされていません。
</video>

以下のようにcontrols属性を指定すると、再生や音量のコントロールを行うことができるようになります。

<video controls>
  <source src="movie.mp4" type="video/mp4">
</video>

width属性で幅を、height属性で高さを指定することができます。

いずれもピクセル数で指定します。

<video width="1280" height="768">
    <source src="movie.mp4" type="video/mp4">
</video>

以下のようにautoplay属性を指定すると、再生可能になった時点で自動的に再生を開始します。

ブラウザにより、muted属性も指定しないと動作しません。

<video autoplay muted>
    <source src="movie.mp4" type="video/mp4">
</video>

<video>: 動画埋め込み要素 – HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

<source>: メディアまたは画像のソース要素 – HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/source