HTMLでは、videoタグを使うことによって動画を埋め込み、ページ上で再生することができます。 videoタグには様々な属性があり、それらを正しく組み合わせて使うことで、自動再生やループ再生などをコントロールすることが可能です。 今回は、HTMLでのvideoタグを使った動画の埋め込み方法と、それぞれの属性の使い方などをご紹介したいと思います。 Webサイトに動画を埋め込む方法 Webサイトに動画を埋め込む場合、大きく分けて下記の2種類の方法があります。 外部の動画配信サービスを使って動画を埋め込む（iframe） サーバーにファイルをアップロードしてvideoタグで動画を埋め込む 動画配信サービスには、例えばYouTubeやVimeoなどがあります。Webサイト上でそれらのサービスを使って動画を埋め込んでいるケースはよく見かけますね。単にWebページの中で動画を紹介したい場合は、外部サービスを使って埋め込んだ方が手軽に利用することができます。 一方、自分でサーバーに動画ファイルをアップロードしてvideoタグを使って埋め込む方法もあります。ファイル形式はMP4（.mp4）で用意しておけば基本的に問題ありません。 videoタグを使う場合は、YouTubeなどの動画埋め込みで表示されてしまうサービスのロゴや、固定表示されてしまう要素などを気にする必要がありません。背景動画として埋め込む場合などはvideoタグを使う方法がおすすめです。 ただし、サーバーに動画ファイルをアップロードして読み込みを行うと、サーバーの転送量が増えたり負荷が高くなったりする可能性もあるので、注意が必要です。基本的には、なるべくファイルサイズを抑えることを心がけましょう。 videoタグの使い方 videoタグは、下記のようにHTMLで記述します。 <video src="https://webdesign-trends.net/entry/video.mp4"></video> この状態では、下記のように表示されます。 ブラウザによって動作は異なりますが、動画の最初のフレームが画像のように表示されていたり、画像自体が表示されていないケースもあります。基本的に、videoタグを使用する場合は下記に登場する属性を組み合わせて、表示や動作をカスタマイズする必要があります。 videoタグの属性と役割 videoタグで使える属性は様々ありますが、よく使用する属性には、下記のようなものがあります。 autoplay：自動再生 loop：ループ再生 muted：ミュート controls：コントロール表示 playsinline：インライン再生 preload：事前読み込み poster：サムネイル画像 それぞれ、表示例と合わせて使い方を見ていきましょう。 autoplay：自動再生 autoplay属性を指定すると、ページを開いた時に自動で動画を再生することができます。。 背景に動画を使用する場合などは、ユーザーが能動的に動画の再生開始などを行わないため、autoplay属性を指定しておくと良いでしょう。 なお、iOSのSafariではplaysinline属性を付与していないとautoplay属性を有効にしていても自動再生されないため注意が必要です。 <video src="https://webdesign-trends.net/entry/video.mp4" autoplay playsinline></video> loop：ループ再生 loop属性を指定すると、動画をループ再生することができます。 こちらも背景動画などに使用する場合は指定しておくと良いでしょう。 <video src="https://webdesign-trends.net/entry/video.mp4" autoplay loop playsinline></video> muted：ミュート muted属性を指定すると、動画再生時にデフォルトでミュートにすることができます。（サンプル動画自体に音声が入っていないため、ここでの表示は上記のものと変わりありません。） また、Chromeなどのブラウザではmuted属性が指定されていないと、autoplay属性が動作しません。 Webサイトを開いた時に勝手に音声が再生されることは一般的に望ましくないとされているので、ユーザーが明確に音声が再生されることが分からない場合は、muted属性を指定するようにしましょう。 <video src="https://webdesign-trends.net/entry/video.mp4" autoplay loop muted playsinline></video> controls：コントロール表示 controls属性を指定すると、動画の再生位置や音量などコントロールパーツを表示することができます。 […]

Read more of this post