簡単に動画をサイトに表示させることができるvideoタグ
画像だけでなく動画をサイトに表示させたい時ってありますよね。
そんな時便利なのがvideoタグです！
簡単に動画をサイトに表示させることができますし、再生時音声をミュートにしたり、ページが表示されたと同時に動画も自動で再生させたりと、さまざまなカスタマイズを簡単に設定することができてとっても便利です。
videoタグの基本的な指定方法はこちらです。
<video src=”hogehoge.mp4″></video>
シンプルでとってもわかりやすいですね😊
iPhoneで再生前にサムネイル画像が表示されないのを回避する方法
ただひとつ注意が必要です。
iPhoneのsafariでサイトを確認した時に、サムネイル画像がこのままでは表示されませんでした😱
iPhoneでもサムネイル画像を表示させたい場合は以下のように、再生前の画像を合わせて作成して指定しておくと安心です！
後ほどvideoタグの主要な属性表でもご紹介しますが、poster属性で再生前のサムネイル画像を指定します。
さらに再生前にサムネイル画像を表示させたことで、動画再生に必要な再生ボタンが表示されなくなるのを回避するために、再生、音量、シーク、ポーズの各機能を制御（表示）するcontrlosを指定します。
これでiPhoneで閲覧したときでも、動画再生前に動画のサムネイル画像を表示させることができました！
<video poster=”hogehoge.jpg” controls>
<source src=”hogehoge.mp4″>
</video>
<source src=”hogehoge.mp4″>
</video>
サンプル動画はこちら！
再生時音を出さない指定（muted）も追加しています。
動画のサムネイル画像は、iMovieを使用するとすぐに動画と同じ比率の画像を書き出すことができます！
その他の基本的なiMovieの編集をまとめた記事はこちら
videoタグでよく使う属性
controlsや、muted、poster属性などはよく使用する属性になると思います😊
| controls | コントロールパネルを表示する |
| muted | 再生時音を出さない |
| autoplay | 自動再生する |
| loop | 繰り返し再生させる |
| poster | 開始前に画像を表示させる |
| playsinline | スマホなどで全画面表示で再生するのを回避する （autoplay、muted、playsinlineの指定が必要） |
| width / height | 縦横のサイズを指定する |
| preload | 動画の読み込み設定 none：事前の動画の読み込みを禁止 metadata：映像のメタデータ (例えば、長さ) を読み込む auto（初期値）：動画ファイルを事前にダウンロードする |
