HTML ビデオタグでサイト内に動画を埋め込み、操作する方法
HTML ビデオタグでサイト内に動画を埋め込み、操作する方法

HTML ビデオタグでサイト内に動画を埋め込み、操作する方法

HTML  2022/06/01 (更新日:2023/01/10) HTML ビデオタグでサイト内に動画を埋め込み、操作する方法

video タグを使って、web サイト内に埋め込む方法とJavaScript で操作する方法を確認します。

  1. 動画を埋め込む
    1. 自動再生
    2. コントロールバーを表示
    3. ループ再生
    4. サイズ指定
  2. JavaScriptで操作する
    1. イベント表

video要素

動画を埋め込む

<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>play</button> <button>pause</button> <button>load</button> </div>

6: play() 動画を再生する。

7: pause() 動画を停止する。

8: load() 動画を再読み込みする。

イベント表

イベント

イベント発生canplay一応再生できるようになった。canplaythrough完全に再生できるようになった。durationchange再生時間が更新された。emptiedload()メソッドが呼び出された場合など、メディアが空になった。endedメディアの末尾に達したために再生が停止。loadeddataメディアの最初のフレームが読み込み終わった。loadedmetadataメタデータを読み込んだ。pause再生が一時停止した。play再生が始まった。playingデータがなくなったために一時停止または遅延した後で、再生の再開の準備ができた。progressブラウザーがリソースを読み込んでいる間に定期的に発生。ratechange再生レートが変更された。seekedシーク操作が完了した。seekingシーク操作が始まった。stalledユーザーエージェントがメディアを読み込もうとしているが、データが予期せずに入ってこない。suspendメディアデータの読み込みが停止した。timeupdatecurrentTime 属性で示されている時刻が更新された。volumechange音量が変更された。waiting一時的なデータの不足により、再生が停止した。

以上ビデオタグでサイト内に動画を埋め込み、操作する方法でした。

HTML の雛形（テンプレート）をVSCodeで簡単に生成する HTML チェックボックスで送信される値と取得・チェックされてるか確認方法 HTML パスワードフォームの目のマークを実装する HTML form input 要素で入力フォームを出力と値を送信する方法 SVGをHTMLファイルに埋め込む HTML × CSS svg mask を使って画像・動画を切り取る方法 HTML ラジオボタンで送信される値と取得・チェックされてるか確認方法 HTML data属性の指定方法と取得方法 wordpress ダウンロードリンクボタンとファイルの置き場とパスの指定方法
📎📎📎📎📎📎📎📎📎📎
BOT