サーバーに動画アップロード時の注意点とフォーマット互換性テストの手順

# 概要

想像してみてください。あなたのウェブサイトやアプリが数百万人のユーザーに利用されているとします。そして、あなたは重要な情報を伝えるために動画を作成しました 🎬🎬🎬。でも、_<ins>**何らかの理由で一部のユーザーがその動画を再生できない—なぜか分からないまま…**<ins>_ 🤯。こんな経験、ありませんか？実は、私も同じような状況に遭遇したことがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620296/8d2f4be2-5d1a-4607-8995-28ec3d4529b8.png)

動画が一部のデバイスで再生できないとなると、多くの人に影響が及びます。

そんな状況を避けたいと思いませんか？


心配いりません、このガイドはまさにそのために作られました！


ここでは、動画の解像度やコーデック、SDR/HDR設定など、再生互換性を確保するための注意点とテスト手順について詳しく解説します。

## 目次
この記事では、以下の二つのポイントについて詳しく解説します：

1. 動画のフォーマットで注意すること: 
   - 動画の解像度やコーデック、SDR/HDR設定、ファイルサイズについてのベストプラクティス
2. 動画アップロード後の確認と互換性テストの手順:
   - アップロード後に行うべき動画情報の確認と、多様なデバイスでの再生互換性を確保するためのテスト手順

## 1. 動画のフォーマットで注意すること: 
### 1. 解像度について
- **推奨解像度:** すべての解像度をテストすることは難しいため、最大の動画解像度を一概に示すことはできませんが、通常は1080p（1920×1080px）までの解像度であれば、多くのケースで問題なく再生できます。それ以上の解像度（例えば、1440p（2560×1440px））では、特定の端末で再生できない場合があります
- **UXの観点:** 解像度が高すぎると、ファイル容量が増加し、ユーザーエクスペリエンス（UX）に悪影響を与える可能性があるため、適切に圧縮することが重要です。
- **確認方法:** Macの場合、右クリックで「情報を見る」から確認可能。VLC Media Playerからも確認可能。


#### 過去にあった事例：

過去に以下の特定のXperia端末で、解像度が1500×2250pxの動画が再生できない問題が発生しました。この問題は、解像度を750×1124pxに変更することで解決しました。

- Xperia 10 V A302SO (Android 13)
- Xperia 10 IV SO-52C (Android 12)

### 検証結果

| 動画解像度 | 再生可否 | 備考 |
|--------|--------|--------|
| 1500×2250px | ❌ | Xperiaの特定の端末で再生できなかった |
| 1920×1080px | ✅ | 問題なく再生できた |
| 750×1124px | ✅ | 問題なく再生できた | 


### 2. SDRとHDRについて

簡単に言うとSDRは標準的な映像、HDRはより高品質な映像と考えてもらえればいいです。
HDR非対応の原因で動画再生できなかったケースは少ないが、特定の端末がHDR非対応なことがわかったら、SDRに変換することも検討可能です。

- SDR（Standard Dynamic Range）: 標準のダイナミックレンジで、ほとんどのデバイスで互換性があります。 ITU-R BT.709 はSDRのカラープライマリを表します。
- HDR（High Dynamic Range）: 高ダイナミックレンジで、色の範囲やコントラストがより広いですが、対応していないデバイスでは正しく表示されない可能性があります。
- 確認方法: 動画がSDRかHDRかを確認するには、VLC Media Playerなどのツールを使用して、動画の「カラープライマリ情報」を確認します。

| 基本色・色空間 | フォーマット |
|--------|--------|
| BT.709 | SDR |
| BT.2020 | HDR | 

### 3. コーデックについて

コーデックとは映像や音声データをエンコード（符号化）／デコード（復号化）するプログラム・規格のことです。H.264やH.265があります。

- **推奨コーデック：** H.264は最も広くサポートされている動画コーデックで、ほとんどのデバイスで互換性があります([source](https://www.cloudflare.com/ja-jp/learning/video/what-is-h264-avc/))。このコーデックを使用することで、互換性問題を最小限に抑えることができます。
- **確認方法:** Macの場合、右クリックで「情報を見る」から確認可能。VLC Media Playerからも確認可能。

### 4. 容量について

具体的な容量制限はありませんが、動画のファイルサイズが大きすぎる`特定の端末で再生できなかったり`、`ユーザー体験（UX）に悪影響を与える可能性`があります。
そのため、可能な限り圧縮して容量を減らすことが推奨されます。

### 5. ファイルの情報確認方法

Macの場合、右クリックで「情報を見る」から確認可能ですが、VLC Media Playerであればより詳しい情報を確認できます。必要な情報を確認できるのであれば好きなツールを使ってください。

- 動画をVLC Media Playerで開きます。
- 動画が再生されたら、メニューから 「ウインドウ」 > 「メディア情報」> 「コーデックの詳細」を選択します。
- ここで、解像度、コーデック、フレームレート、基本色・色空間（SDR/HDR）などの詳細情報を確認できます。

<img width="550" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620296/417c6df1-f651-878e-fbfe-11a14c9c5f19.png">


## 2. 動画アップロード後の確認と互換性テストの手順:
### 端末ブラウザーでのテスト: 
動画がアップロードされた後、ブラウザーで直接リンクを開いて再生可能かどうかを確認します。
以下の端末でテストを実施し、再生確認を行います（過去に以下の端末で動画再生できなことがあっため推奨）：
- Xperia 10 V A302SO (Android 13)
- Xperia 10 IV SO-52C (Android 12)

### 再生できない場合の対処法・トラブルシューティング:

1. **ブラウザーキャッシュをクリア:** 再生できない場合は、ブラウザーのキャッシュをクリアして再試行します。
1. **別のブラウザーで試す:** 他のブラウザーで試してみることで、ブラウザー固有の問題を確認します。
1. **端末の空き容量確認:** 端末の空き容量が十分であることを確認します。
1. **端末にダウンロードして再生:** 動画をダウンロードし、端末のプレイヤーで直接再生してみることで、ネットワークやストリーミングの問題を切り分けます。
1. **動画の情報を確認・調整：** 上記で触れた情報を確認し、動画が標準から外れている、または互換性に問題があると感じた場合には、動画を変更する。

## まとめ
動画が再生されないなんて、もったいないし避けるべきものです。適切なフォーマットと徹底的なテストで、そんな悲劇を避けましょう。これで、ユーザーがどんなデバイスでもあなたの動画を楽しめるでしょう:rocket: