Instagramリール風動画機能を付けたいときに考えること

toC向けアプリで、InstagramやTikTokのような動画投稿・連続再生機能を実装したいというご要望をよく頂くことがあります。
その際、ただ単純に動画をアップロードして、アップロードした動画を読み込ませただけでは、あのようなスムーズにさくさく動くユーザー体験は手に入れられません。
スワイプ操作に追従するスムーズな動画再生は、高度な技術によって実現されており、以下のようなことを採用しなければなりません。

1. 動画アップロード時の最適化

• 動画圧縮：
  • ユーザーが撮影した動画は、そのままではファイルサイズが大きく、再生時のパフォーマンスに悪影響を与えます。
  • H.264やH.265といったコーデックを用いて動画を圧縮し、ファイルサイズを小さくすることが重要です。
  • 圧縮率と画質のバランスを調整し、ユーザー体験を損なわない最適な設定を見つける必要があります。
• 解像度とフレームレートの調整：
  • スマートフォンの画面サイズに合わせた解像度、例えば1080pや720pにリサイズします。
  • フレームレートも30fpsや60fpsに調整することで、再生時の負荷を軽減できます。
• メタデータの付与：
  • 動画のサムネイル、再生時間、解像度などのメタデータを付与することで、再生時の処理を効率化できます。

2. 動画再生時の最適化

• プログレッシブダウンロード：
  • 動画全体をダウンロードするのではなく、再生に必要な部分だけをダウンロードするプログレッシブダウンロードを採用します。
  • これにより、動画の再生開始までの時間を短縮できます。
• プリロード（先読み）：
  • 現在再生中の動画だけでなく、次の動画、さらにその次の動画の冒頭部分を事前に読み込んでおきます。
  • ユーザーがスワイプした際に、即座に動画を再生できます。
  • 読み込む秒数は、ネットワーク環境や端末の性能に合わせて調整します。
• キャッシュ：
  • 一度再生した動画はキャッシュに保存し、再再生時のダウンロードを省略します。
  • キャッシュのサイズや有効期限を適切に設定することで、ストレージ容量を効率的に利用できます。
• アダプティブビットレートストリーミング：
  • ネットワーク環境に応じて、動画の画質を動的に調整するアダプティブビットレートストリーミングを採用します。
  • これにより、ネットワーク環境が悪い場合でも、動画の再生を途切れさせずに続けることができます。

3. 低速ネットワーク環境での検証

• スマートフォンの開発者向けオプションにあるネットワーク制限機能を利用することで、低速ネットワーク環境を再現できます。
• 低速ネットワーク環境での動画再生パフォーマンスを検証し、プリロードやアダプティブビットレートストリーミングのパラメータを調整します。

技術スタック例

• 動画圧縮・変換： FFmpeg
• 動画再生： ExoPlayer (Android), AVPlayer (iOS)

まとめ

Instagramリールのようなスムーズな動画再生体験を実現するには、動画のアップロードから再生まで、様々な技術を組み合わせた最適化が不可欠です。これらの技術を駆使することで、ユーザーに快適な動画視聴体験を提供できます。

動画投稿・再生機能の開発を検討している方々の参考になれば幸いです。