どうも、Webノマドのやぎ（@yagixlife）です。
今回はvideoタグを用いてmp4ファイルを自動再生する方法を紹介します。
videoタグはHTML5から追加されたタグで、imgタグと同じ要領でHTMLを書くことができ、動画再生をすることができます。
HPのメインビジュアルを動画にする際などにも使えるかと思います。
一方で、動画が自動再生されるような設定は少し条件がありますので注意が必要です。
この記事では、videoタグで動画を自動再生する方法と注意点をまとめました。
videoタグの存在は知ってるけど上手く使いこなせない😣
という方は参考にしてみてください。
videoタグの使い方
videoタグを使うと、動画ファイルを読み込んで表示させることができます。imgタグで、画像を読み込んで表示させるのと同じ要領ですね。
コードの書き方👇
|
1 |
<video src="test.mp4"></video> |
<video></video>とし、src="ファイルパス"とすれば、src参照場所の動画を表示することができます。
videoタグに使う属性
| 属性名 | 使い方 |
| src | 動画ファイルの指定・ファイルパスを入力 |
| poster | 動画を読み込むまでの間、表示される画像を指定できる。 poster="ファイルパス" |
| preload | webページを読み込む際に同時に動画も読み込むか設定 |
| autoplay | 動画を自動再生する |
| loop | 動画をループ再生する |
| controls | コントロールパネル（再生ボタン・再生位置など）を表示する |
| width | 幅を指定できる width="数値px"（pxのみ使用可） |
| height | 高さを指定できる height="数値px"（pxのみ使用可） |
| muted | 初期設定を消音にする（これを指定しないと音声が流れる） |
| playsinline | 動画をインライン再生にする（autoplay、mutedと一緒に使用しなければならない） |
自動再生（インライン再生）について
インライン再生とは👇
画面を移動する（全画面になる）ことなく、その場で流れる動画
※違うけどgifに近いイメージ
では、通常再生とインライン再生を比較しつつ見ていきます。
通常再生
通常再生の場合、WordPressであればで「メディアを追加」から、動画を選んで下記のように表示させることができます。
インライン再生
一方、インライン再生の場合はこのようにコードを記述します。
|
1 |
<video playsinline muted autoplay src="test.mp4" width="568px" height="320px"></video> |
これで、インライン再生をすることができました。
インライン再生では、画面を移動することなく自動で再生させることができます。
注意点は以下の通りです。
videoタグで書くときのポイント👇
・playsinlineでインライン再生が可能になる
・muted（音量0にする）、autoplay（自動再生）と一緒に書かないとインライン再生されない
・width・heightはpxしか指定できない（%、vhなどは書けない）
動画のレスポンシブ化やメインビジュアルで使いたい場合は、別途CSS記述が必要になりますのでご注意ください。
まとめ
今回は、videoタグを使ったインライン再生の簡単な使い方を紹介しました。
videoタグを使えばHPやwebページ上で、動画を利用しやすくなりますので色々試して見てください。
