カメラを構えている写真 カメラを構えている写真

Blog

Blog

小技

動画の読み込みを早くする

2022年8月25日

Webサイトに動画を埋め込む方法

Webサイトのトップページにメインビジュアルとして動画を埋め込みたい。それにはどのような方法があるのか、メリットやデメリット、私なりの最善の方法をご紹介します。

YouTube動画として埋め込む

編集した動画をYouTubeにアップし、その埋め込みコードをコピーしHTMLにペーストする方法です。

メリットとしては、動画を読み込むわけではないので、Webサイトの表示が遅くなりません。自動で再生されることもなく、見たい人は再生ボタンを押し、見たくない人はそのままスクロールできます。

デメリットは見た目です。YouTubeを埋め込んだのが一目瞭然の見た目。YouTubeへのリンクもできるので、ファーストビューからいきなりYouTubeへ行ってしまいWebサイトを離脱されてしまいます。

ビデオタグで埋め込む

動画をYouTubeに投稿せず、videoタグで埋め込むことができます。この方が見た目がシンプルで、ページ全体のイメージが変わることもありません。

見た目はいいのですが、ページの表示に時間がかかります。

私が考える最善の方法

トップページのメインビジュアルなので、YouTube動画のような見た目で表示させたくない。

videoタグで埋め込むと読み込みに時間がかかり、ページの表示に時間がかかります。

できれば、videoタグでどうにかしたいという場合、私が考える最善の方法を紹介します。

Adobe PremiereProで編集するのがお勧め

  • まずは、動画の解像度を1920×1080になっていれば、比率を維持したまま縮小します。例えば1280×720に縮小します。
  • 動画の長さを10秒程度になるようにトリミングします。
  • フレームレートを30から24に変更します。

フレームレートとは、1秒間の静止画の枚数です。普通に撮影するとフレームレートは30です。

フレームレート30だと、10秒間で300枚。フレームレートを24に変更すると10秒間で60枚減少します。

ファイルサイズも大きく変わるので、フレームレートを下げるのは読み込みを速くするのに有効です。

これでmp4で書き出します。

アーカイブ