以前から比べると、動画を使ったWebサイトが当たり前になってきました。YouTubeをそのまま読み込んでいるものもありますが、オリジナルで作成した動画を利用しているWebサイトも多くあります。
今回は、オリジナルの動画ファイルを読み込むためのvideoタグについて、解説していこうと思います。
<video></video>video要素
video要素は字幕付きのビデオやムービー、オーディオファイルを再生するために使用されるタグです。最新の、HTML Living Standardによると、
- フローコンテンツ
- フレージングコンテンツ
- エンベディッドコンテンツ
- インタラクティブコンテンツ（※要素がcontrols属性を持つ場合）
- パルパブルコンテンツ。
と、複数のコンテンツカテゴリーにまたがっている要素だということがわかります。
また、属性もグローバル属性に加え、
- グローバル属性
- src：リソースのアドレス
- crossorigin：要素が生成元をまたいだ要求を処理する方法
- poster：先にビデオプレイバックを見せるポスターフレーム
- preload：メディアリソースがどの程度バッファーリングに必要になるかのヒント
- autoplay：ページが読み込まれるときにメディアリソースが自動的に開始可能というヒント
- playsinline：要素の再生領域内のビデオコンテンツを表示することをユーザーエージェントに勧める
- loop：メディアリソースをループするかどうか
- muted：デフォルトでメディアリソースをミュートするかどうか
- controls：ユーザーエージェントのコントロールを表示する
- width：横の次元
- height：縦の次元
などの属性が使用可能で、さまざまなオプションによって使い分けることが可能です。
では、実際に実装しながら、要素と属性の解説をしていきます。
src属性
src属性値で、動画ファイルのある場所（path）を指定します。
<video src="http://trident-com.net/wf1-2025/wp-content/uploads/2025/06/videotag_dance_min.mp4"></video>その他の属性
この状態だと、読み込んで表示するだけになりますので、必要な属性を設定していきます。controlsで、操作UIを表示させます。autoplayで自動再生、loopでループ再生、mutedで最初は音を消して再生するように設定します。それぞれは、属性名を記入したら有効になる、値を持たない属性で論理属性といいます。
<video src="http://trident-com.net/wf1-2025/wp-content/uploads/2025/06/videotag_dance_min.mp4"
controls autoplay loop muted>
</video>poster属性
表示するためのダウンロード中や動画再生前に表示されるサムネイル画像のURLです。この属性が指定されない場合、再生可能になるまで何も表示されず、その後、最初のフレームをサムネイルとして表示します。
JavaScriptで操作
video要素は、JavaScriptで外部からも操作可能です。
class属性を設定し、その他の属性を削除します。外側にbutton要素で再生と一時停止ボタンを設置します。
<video class="samplevideo" src="http://trident-com.net/wf1-2025/wp-content/uploads/2025/06/videotag_dance_min.mp4">
</video>
<button class="play">再生</button>
<button class="pause">一時停止</button>JavaScriptで各ボタンで操作できるようにします。
const video = document.querySelector(".samplevideo");
document.querySelector(".play").addEventListener("click", () => {
video.play();
});
document.querySelector(".pause").addEventListener("click", () => {
video.pause()
});最近のWebサイトは、動画が埋め込まれているサイトも多くあります。
授業ではしっかりとやらないタグですので、自分で調べて使えるといいですね。
コメント