Table of Contents
動画を埋め込む
以下のように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
