HTML videoの使い方 再生/ミュート/スマホ再生
HTMLの<video>タグは映像ファイルを再生するタグです。mp4ファイルなどの映像ファイルを読み込みこんで再生することができます。
属性を指定すれば音をミュートにしたり、スマホで再生したり、ループ再生することもできます。FVのメインエリアに自動再生で使われることが多いタグです。
<video autoplay muted loop playsinline>
<source src="video.mp4" type="video/mp4">
</video>
自動で再生する
- 動画に
autoplayを指定します。 autoplayを指定するとデータの読み込みが完了し、再生可能な状態になった時点で再生が始まります。- ブラウザによっては
muted属性がないと動作しません。
<video autoplay muted>
<source src="video.mp4" type="video/mp4">
</video>
ループ再生させる
- 動画に
loopを指定します。 loopを指定すると動画の再生が終わると自動的に始めから再生をします。
<video loop>
<source src="video.mp4" type="video/mp4">
</video>
音を消す
- 動画に
mutedを指定します。 mutedを指定すると動画の音声がミュートになります。
<video muted>
<source src="video.mp4" type="video/mp4">
</video>
拡大せずに再生する
- 動画に
playsinlineを指定します。 playsinlineを指定すると再生ボタン押下時に表示している画面で再生が始まります。- スマホを自動再生する場合は必須の属性です。
<video playsinline>
<source src="video.mp4" type="video/mp4">
</video>
動画が読み込まれるまでに画像を表示する
- 動画に
posterを指定します。 - 動画のダウンロード中に表示される画像のURLをしています。
- この属性が指定されない場合、最初のフレームが利用可能になるまで何も表示されず、その後、最初のフレームをポスターフレームとして表示します。
<video poster="video.jpg">
<source src="video.mp4" type="video/mp4">
</video>
