iPhoneで見ても動画再生前にサムネイルを表示させたい時のvideoタグの設定方法

iPhoneで見ても動画再生前にサムネイルを表示させたい時のvideoタグの設定方法

簡単に動画をサイトに表示させることができる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>

サンプル動画はこちら!
再生時音を出さない指定(muted)も追加しています。
 

動画のサムネイル画像は、iMovieを使用するとすぐに動画と同じ比率の画像を書き出すことができます!

その他の基本的なiMovieの編集をまとめた記事はこちら

 

iMovieの基本的な編集方法と動画の容量を軽くして書き出す方法

videoタグでよく使う属性

controlsや、muted、poster属性などはよく使用する属性になると思います😊

controls コントロールパネルを表示する
muted 再生時音を出さない
autoplay 自動再生する
loop 繰り返し再生させる
poster 開始前に画像を表示させる
playsinline スマホなどで全画面表示で再生するのを回避する
(autoplay、muted、playsinlineの指定が必要)
width / height 縦横のサイズを指定する
preload 動画の読み込み設定
none:事前の動画の読み込みを禁止
metadata:映像のメタデータ (例えば、長さ) を読み込む
auto(初期値):動画ファイルを事前にダウンロードする
 

サイト制作カテゴリの最新記事