video タグを使って、web サイト内に埋め込む方法とJavaScript で操作する方法を確認します。
動画を埋め込む
<video src="a.mp4" type="video/mp4">
<!-- <source src="a.mp4" type="video/mp4"> -->
<p>代替テキスト</p>
</video>1: video タグのもしくは、video タグ内の 2: source タグに src 属性を指定します。
自動再生
<video muted playsinline autoplay>
<source src="a.mp4" type="video/mp4">
<p>代替テキスト</p>
</video>autoplay 属性を指定すると、再生可能な状態になった時点で即座にコンテンツの再生が行われます。
ブラウザやOSの都合により、muted playsinline を余計に指定します。
コントロールバーを表示
<video controls>
<source src="a.mp4" type="video/mp4">
<p>代替テキスト</p>
</video>controls 属性を指定すると、音量、シーク、ポーズなどを操作するためのバーが表示されます。
ループ再生
<video muted playsinline autoplay loop>
<source src="a.mp4" type="video/mp4">
<p>代替テキスト</p>
</video>loop 属性を指定すると、動画が末尾に達すると、自動的に先頭に移動します。
サイズ指定
<div class="wrapper">
<video muted playsinline autoplay loop>
<source src="a.mp4" type="video/mp4">
<p>代替テキスト</p>
</video>
</div>
<style>
video {
width: 200px;
height: 200px;
object-fit: cover;
object-position: right bottom;
}
</style>サイズは絶対的な値（%はだめ）で指定します。object-fit object-position プロパティなど使用することが出来ます。
JavaScriptで操作する
<video muted playsinline autoplay loop>
<source src="a.mp4" type="video/mp4">
<p>代替テキスト</p>
</video>
<div class="button-wrapper">
<button onClick="document.querySelector('video').play();">play</button>
<button onClick="document.querySelector('video').pause();">pause</button>
<button onClick="document.querySelector('video').load();">load</button>
</div>6: play() 動画を再生する。
7: pause() 動画を停止する。
8: load() 動画を再読み込みする。
イベント表
| イベント | 発生 |
| canplay | 一応再生できるようになった。 |
| canplaythrough | 完全に再生できるようになった。 |
| durationchange | 再生時間が更新された。 |
| emptied | load()メソッドが呼び出された場合など、メディアが空になった。 |
| ended | メディアの末尾に達したために再生が停止。 |
| loadeddata | メディアの最初のフレームが読み込み終わった。 |
| loadedmetadata | メタデータを読み込んだ。 |
| pause | 再生が一時停止した。 |
| play | 再生が始まった。 |
| playing | データがなくなったために一時停止または遅延した後で、再生の再開の準備ができた。 |
| progress | ブラウザーがリソースを読み込んでいる間に定期的に発生。 |
| ratechange | 再生レートが変更された。 |
| seeked | シーク操作が完了した。 |
| seeking | シーク操作が始まった。 |
| stalled | ユーザーエージェントがメディアを読み込もうとしているが、データが予期せずに入ってこない。 |
| suspend | メディアデータの読み込みが停止した。 |
| timeupdate | currentTime 属性で示されている時刻が更新された。 |
| volumechange | 音量が変更された。 |
| waiting | 一時的なデータの不足により、再生が停止した。 |
以上ビデオタグでサイト内に動画を埋め込み、操作する方法でした。
