Blog スタッフブログ

2026.07.29

WEB制作

大容量動画の読み込みを高速化するために、MP4からHLSへ変更してみる

Webサイトに動画を掲載すると、見た目の印象や情報量を大きく高めることができます。

一方で、動画ファイルは画像と比べて容量が大きくなりやすく、ページの表示速度や動画の再生開始までの待ち時間に大きく影響します。

約100MB近い動画ファイルをできるだけ快適に再生できるよう、動画の読み込み方法を見直しました。

MP4をクリック時に読み込む方式

当初ページを開いた時点では動画を読み込まず、ユーザーが再生ボタンを押したタイミングでMP4ファイルを読み込む方法を採用していました。

この方法には、初回ページ表示を軽くできるメリットがありますが再生可能になるまで待つ必要がありました。

待ち時間を短縮する

最終的に採用したのが、HLSによる動画配信です。

HLSは動画を1つの大きなファイルとして配信するのではなく、数秒単位の小さなファイルに分割して順番に配信する方式です。

video.mp4という1つの動画ファイルを以下のように分割しました。

video.m3u8
video_000.ts
video_001.ts
video_002.ts
video_003.ts
…

HLSでは必要な部分だけを順次読み込みます。

最初の数秒分を取得
↓
再生開始
↓
再生しながら次のデータを取得

これによって動画のダウンロード完了を待つ必要がなくなりました。

FFmpegでHLSに変換

HLSへの変換にはFFmpegを使用しました。

※FFmpegはオープンソースのメディアエンコーダです。

■コマンド

ffmpeg \
  -i video.mp4 \
  -c:v copy \
  -c:a copy \
  -hls_time 4 \
  -hls_playlist_type vod \
  -hls_flags independent_segments \
  -hls_segment_filename "video_%03d.ts" \
  video.m3u8

-hls_time 4 を指定しているため、約4秒単位を目安に動画が分割されます。

HTML側

<div class="video">
  <button class="video__play" type="button" data-movie="video.m3u8" aria-label="動画を再生"></button>
</div>

変換後は、MP4ではなく .m3u8 を指定します。

動画そのものは、これまでと同じ <video> タグを利用しています。

ブラウザのhls対応

PCChromeやEdge、Firefoxでは、hls.jsを使用してHLSを再生します。

<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>

JavaScript側では、ブラウザによって処理を分岐します。

if (
  video.canPlayType(
    'application/vnd.apple.mpegurl'
  )
) {

  // Safariなど
  video.src = movieSrc;

} else if (
  typeof Hls !== 'undefined' &&
  Hls.isSupported()
) {

  // Chrome / Edge / Firefox
  var hls = new Hls();

  hls.loadSource(movieSrc);
  hls.attachMedia(video);

}