Base64 を動画に変換

Base64入力

オンラインでBase64エンコードされた動画データを再生可能なMP4/WebM/OGG動画ファイルに復元します。Data URLプレフィックスの自動認識に対応し、すべての操作はブラウザローカルで完了、動画データはサーバーにアップロードされません。バックエンドAPIインターフェースのデバッグ、動画エンコードの検証、フロントエンドインライン動画の復元に最適で、デコード後は直接プレビュー再生してダウンロードできます。

関連おすすめ

動画→Base64変換

Base64 パディング処理

ファイルハッシュ検証

DES暗号化/復号

JSON 圧縮

SQL フォーマッター

ユースケース

  • バックエンド動画インターフェースのデバッグ：APIがBase64エンコードされた動画データを返す場合、ツールに直接貼り付けて迅速にプレビューし、フロントエンドのデコードコードを書くことなくインターフェースの返却が正しいか検証できます
  • 動画エンコード出力の検証：FFmpegまたはクラウドトランスコードサービスを使用してBase64動画を生成した後、デコード再生してトランスコード結果が正常か確認し、エンコード破損の問題をトラブルシューティング
  • フロントエンドインライン動画の復元：HTML、CSS、JavaScript内のData URL形式インライン動画（data:video/mp4;base64,...）を抽出し、閲覧可能な動画ファイルに復元
  • 動画データの迅速な検証：2つのBase64動画をデコードして同一コンテンツか比較したり、Base64転送中にデータ破損が発生していないか検証
  • ショート動画の一時プレビュー：ローカルに保存する必要のないショート動画クリップをツールで直接プレビュー再生し、コンテンツを確認してからダウンロードするか決定
  • クローラーデータ解析：Webクローラーが取得したBase64エンコード動画データを、コンテンツ審査や分析のために素早く再生可能ファイルに復元
  • クライアント開発デバッグ：モバイルアプリ、ミニプログラム開発でバックエンドがBase64動画を返す場合、本ツールでデータの正確性を検証してからクライアントデコード開発を実施
  • 教育デモ用途：Base64エンコード原理、Data URL技術、フロントエンドでのBlob/URL.createObjectURLの使用法を説明する際のオンラインデモツールとして
  • メール添付ファイルプレビュー：一部のメールシステムでは添付ファイルをBase64に変換して埋め込むため、抽出後に素早く動画コンテンツを復元して閲覧可能
  • Bug再現支援：テストチームが動画関連のBugを報告する際にBase64データを提供すれば、開発者が素早く動画を復元して問題シナリオを再現可能

使い方

  1. Base64動画データを取得：APIレスポンス、ログ、HTMLソース、データベースなどからBase64エンコードされた動画文字列をコピーします。Data URLプレフィックスの有無は問いません
  2. 入力エリアに貼り付け：コピーしたBase64テキストをツールの入力ボックスに完全に貼り付けると、ツールがdata:video/...;base64,プレフィックスが含まれているか自動認識します
  3. 形式を確認または選択：入力にData URLプレフィックスが含まれている場合、ツールがMIMEタイプを自動認識します；純粋なBase64の場合は、対応する動画形式（MP4/WebM/OGG）を手動選択
  4. デコードボタンをクリック：デコードボタンをクリックすると、ツールがブラウザローカルでBase64デコード、Uint8Array変換、Blob作成などの処理を実行し、処理中に状態メッセージが表示されます
  5. 動画情報を確認：デコード完了後にファイルサイズ、MIMEタイプ、形式確認などの動画基本情報を表示し、デコードが成功したか検証
  6. 動画をプレビュー再生：ページ内蔵のHTML5プレーヤーで動画をプレビューし、シークバーをドラッグして動画コンテンツが完全か、映像と音声が正常か確認
  7. 動画ファイルをダウンロード：動画に問題がなければ、ダウンロードボタンをクリックしてBlob動画をローカルに保存します。ファイルには正しい拡張子（.mp4/.webm/.ogg）が自動的に付与されます

特徴

  • 入力形式をインテリジェント認識：純粋なBase64エンコードと完全なData URL形式（data:video/...;base64,プレフィックス）を自動検出し、手動でプレフィックスを削除する必要なくデコードできます
  • 複数形式の動画をサポート：MP4（video/mp4）、WebM（video/webm）、OGG（video/ogg）など、主要ブラウザがネイティブにサポートする主流の動画MIMEタイプを完全サポート
  • ブラウザローカル処理：Base64デコード、Blob生成、動画プレビューのすべての操作がユーザーのブラウザ内でJavaScriptによって実行され、動画データはいかなるサーバーにもアップロードされません
  • 即時プレビュー再生：デコード後にHTML5 videoプレーヤーが自動生成され、再生、一時停止、シークバー操作、音量調整、全画面表示などの完全な再生コントロールをサポート
  • 元ファイルのダウンロード：ワンクリックでデコードした動画をローカルファイルとして保存し、MIMEタイプに基づいて正しいファイル拡張子（.mp4/.webm/.ogg）を自動選択
  • MIMEタイプ自動検出：Data URLプレフィックスから動画形式を自動認識するため、ユーザーが手動で選択する必要はありません；純粋なBase64入力時は手動で形式を指定可能
  • リアルタイムなデコード進捗表示：大容量Base64データのデコード時に処理状況を表示し、ユーザーがページがフリーズしたと誤認することを防ぎます
  • 動画メタ情報表示：デコード後に動画サイズ、MIMEタイプ、長さ（再生可能な場合）、解像度などの基本情報を表示
  • エラー診断メッセージ：入力形式エラー、Base64エンコードの破損、未対応の動画形式の場合に明確なエラーメッセージとトラブルシューティングのヒントを提供
  • ドラッグ&ドロップと貼り付けに対応：Base64テキストの直接貼り付け、テキストファイルの入力エリアへのドラッグ&ドロップをサポートし、デバッグ効率を向上
  • エンコード問題の自動修復：Base64パディング文字（=）の欠落、空白文字、改行文字などの一般的な形式の問題を自動処理
  • クロスブラウザ互換性：Chrome、Firefox、Safari、Edgeなどのすべてのモダンブラウザをサポートし、標準のatobとUint8Array APIを使用
  • レスポンシブデザイン：デスクトップとモバイルの両方での使用に対応し、スマートフォンやタブレットでもショート動画を正常にデコードおよびプレビュー可能
  • プライバシー安全保障：動画データは完全にローカルメモリ内で処理され、ページを閉じるとデータは即座に消去され、キャッシュや記録は残りません

よくある質問

Base64→動画変換ツールはどの動画形式をサポートしていますか？

ブラウザがネイティブに再生可能な主流の動画形式をサポートしています：MP4（video/mp4、H.264+AACエンコード）、WebM（video/webm、VP8/VP9+Vorbis/Opusエンコード）、OGG（video/ogg、Theora+Vorbisエンコード）。そのうちMP4形式が最も互換性が高く、すべてのモダンブラウザとモバイルデバイスでサポートされているため、優先的に使用することを推奨します。あなたの動画が他の形式（MOV、AVI、MKVなど）の場合は、先にFFmpegでMP4(H.264+AAC)にトランスコードしてからBase64エンコードする必要があります。

入力にはdata:video/mp4;base64プレフィックスが必要ですか？

必要ありません。ツールは2つの入力形式をサポートしています：①純粋なBase64文字列（プレフィックスなし）；②完全なData URL（data:video/xxx;base64,プレフィックス付き）。ツールは入力にプレフィックスが含まれているか自動的に検出し、ある場合は自動的にBase64コンテンツを抽出してMIMEタイプを認識します。APIが返す完全なコンテンツをそのままコピーすればよく、手動でプレフィックスを処理する必要はありません。

デコード後の動画はブラウザで直接再生できますか？

はい、できます。デコード完了後にツールは内蔵のHTML5動画プレーヤーを生成し、再生/一時停止、シークバー操作、音量調整、全画面再生などの完全な機能をサポートします。ページ上で直接動画コンテンツをプレビューし、映像と音声が正常であることを確認してからローカルにダウンロードするか決定できます。

大容量のBase64動画は処理できますか？サイズ制限はありますか？

ツール自体に厳格なサイズ制限はありませんが、ブラウザにはメモリとパフォーマンスの制限があります。Base64エンコードは動画サイズを約33%増加させ、デコード中にブラウザはBase64文字列、バイナリ文字列、Uint8Array、Blobなどの複数のコピーを保存するためにメモリを割り当てる必要があり、ピークメモリ使用量は元の動画サイズの3-5倍になる可能性があります。5MB以内のBase64（元の動画約3.7MB相当）であれば比較的スムーズに処理できますが、10MBを超えるBase64はページのフリーズを引き起こす可能性があります。大きな動画にはBase64方式は推奨されず、従来のファイルアップロードとURL読み込み方式を推奨します。

動画データはサーバーにアップロードされますか？プライバシーは安全ですか？

すべてのデコード操作は完全にあなたのブラウザローカルでJavaScriptによって実行され、動画データがいかなるサーバーにもアップロードされることはなく、ネットワークリクエストも送信されません。ページを閉じると、動画データはブラウザメモリから即座に消去され、キャッシュや記録は残りません。ネットワークを切断した状態でも本ツールを使用でき、デコード機能は正常に動作します。

なぜBase64エンコード後の動画は元のファイルより1/3大きくなるのですか？

これはBase64エンコードの原理によるもので、ツールの問題ではありません。Base64は3バイト（24ビット）のバイナリデータを4つのASCII文字（各文字は1バイトを占有）に再エンコードするため、エンコード後のサイズは元の4/3≈133%になり、サイズが約33%増加します。元のデータ長が3の倍数でない場合、末尾に=記号でパディングされるため、実際のサイズ増加は約33%-37%になります。このサイズ増加はすべてのBase64エンコードに共通の特性であり、本ツールの問題ではありません。

なぜ私のMP4 Base64はデコード後に再生できないのですか？

MP4はコンテナ形式に過ぎず、内部の動画エンコードがブラウザのサポートする形式である必要があります。99%のケースは、動画エンコードがH.264ではないか、音声エンコードがAACではないことが原因です。例えばMP4内にH.265(HEVC)、AV1などのエンコードが格納されている場合、ブラウザが再生できない可能性があります。FFmpegコマンドffmpeg -i input.mp4でエンコード情報を確認できます。H.264+AACでない場合は、コマンドffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4でトランスコードしてからBase64エンコードしてください。また、MIMEタイプがvideo/mp4に設定されていること、Base64データが完全で切り詰められていないことも確認してください。

自分の動画エンコードがブラウザ互換であることを確認するにはどうすればよいですか？

FFmpegツールでの検証を推奨します：FFmpegをインストール後、ffmpeg -i yourvideo.mp4を実行し、出力情報のVideo行とAudio行を確認します。Video行にはh264（またはavc）が含まれ、Audio行にはaacが含まれている必要があります。例：Stream #0:0(eng): Video: h264 (avc1/0x31637661...), Stream #0:1(eng): Audio: aac (mp4a/0x6134706D...)。これら2つのエンコードでない場合はトランスコードが必要です。また、元の動画ファイルをChromeブラウザウィンドウに直接ドラッグして、直接再生できればエンコードはブラウザ互換です。

デコード後にダウンロードされる動画ファイルの拡張子は何ですか？

ツールはあなたが選択した（または自動認識した）MIMEタイプに基づいて正しいファイル拡張子を自動的にマッチングします：video/mp4は.mp4、video/webmは.webm、video/oggは.ogvに対応します。手動で拡張子を変更する必要はなく、ダウンロードしたファイルはシステムのデフォルトプレーヤーで直接開くことができます。

Base64文字列内の改行やスペースはデコードに影響しますか？

影響しません。ツールはBase64文字列内の改行(\n)、復帰(\r)、スペース、タブなどの空白文字を自動的に処理し、デコード前にこれらの文字を除去します。そのため、あなたのBase64が複数行形式（76文字ごとに改行されたMIME形式など）であっても、コピー時に排版スペースが混入しても正常にデコードできます。

フロントエンドでJavaScriptを使用してBase64を動画に変換するにはどうすればよいですか？

コアコードロジックは以下の通りです：①Data URLプレフィックスを除去して純粋なBase64を取得；②atob(base64Str)でバイナリ文字列にデコード；③バイナリ文字列をUint8Arrayに変換（各文字を走査してcharCodeを取得）；④new Blob([uint8Array], {type: 'video/mp4'})でBlobを作成；⑤URL.createObjectURL(blob)で一時URLを生成；⑥video.srcにURLを設定。使用後はURL.revokeObjectURL(url)を呼び出してメモリを解放し、メモリリークを回避してください。

Data URL動画とBlob URL動画の違いは何ですか？

Data URLは完全なBase64データをURL内に直接記述し、形式はdata:video/mp4;base64,XXXXで、URL自体にすべてのデータが含まれます；Blob URLはURL.createObjectURL()によって生成されるblob://形式の一時的な参照で、ブラウザメモリ内のBlobオブジェクトを指し、URL自体は短くデータは含まれません。Data URLは使用するたびにBase64文字列全体を解析する必要がありパフォーマンスが劣ります；Blob URLはより効率的で、再生と再利用に適しています。本ツールは内部でBlob URL方式を使用してプレーヤーを実装しています。

どのようなシーンがBase64エンコード動画に適していて、どのようなシーンが適していませんか？

適したシーン：①数MB以内のショート動画（ローディングアニメーション、ガイドヒント、アイコンアニメーション）；②動画を単一HTMLファイルに埋め込む必要があるDemo/ドキュメント；③メール埋め込み小動画；④APIインターフェースデバッグ時に一時的に小動画を送信する場合。適していないシーン：①5MBを超える動画（サイズが33%膨張し帯域幅が無駄になります）；②ユーザーがアップロードした動画（サイズが制御不能）；③ストリーミング読み込みやシークが必要な長い動画；④ブラウザにキャッシュされて再利用される必要がある動画（Data URLは個別にキャッシュできません）；⑤本番環境のエンドユーザー向け動画コンテンツ（CDNと外部ファイルURLを使用すべきです）。

なぜ動画のデコード後にSafariでは正常に再生できるのにChromeでは再生できないのですか？

このケースは比較的稀ですが、通常は動画エンコードがH.265(HEVC)であることが原因です——SafariはmacOSとiOSでH.265のサポートが良好です（ハードウェアアクセラレーションあり）が、ChromeとFirefoxのH.265サポートは限定的です（ハードウェアとライセンスが必要）。解決方法はH.264エンコードにトランスコードすることです。これはすべてのブラウザがサポートする汎用エンコードです。逆にChromeで再生できてSafariで再生できないケースの方が一般的で、通常はエンコードProfile/Levelが高すぎるかmoov atomがファイル末尾にあることが原因です。

Base64動画と動画ファイルの相互変換で画質は劣化しますか？

画質は劣化しません。Base64はエンコード方式であり、圧縮やトランスコードではなく、バイナリデータとテキスト文字列を1対1でマッピングする変換に過ぎません。動画をBase64に変換してからデコードして戻すと、得られるバイナリデータは元の動画ファイルと完全に一致し（バイト単位で同一）、画質や音質の劣化は一切ありません。これは圧縮変換ではなくファイルのコピー＆ペーストに似ています。Base64エンコードとデコードのプロセスが正しければ、動画品質は元のファイルと完全に同一です。

トラブルシューティング

Base64デコード後に動画が再生できず、HTML5 videoに形式非対応または黒い画面が表示される

MIMEタイプ設定エラー：MP4動画にvideo/webmを設定するなど、一致しないタイプを設定している 動画エンコードがブラウザのサポートする形式ではない：例えばMP4内がH.264ではなくH.265エンコードになっている Base64データがコピー中に切り詰められ、最初または最後の部分が欠落してファイルが破損している Data URLプレフィックス処理エラー：プレフィックスもBase64としてデコードしているか、プレフィックス除去時にBase64の最初の文字を誤って削除している 元の動画自体が破損しているか、ブラウザがサポートしていない特殊な形式である 動画解像度がブラウザの制限を超えているか、ブラウザがサポートしていないピクセル形式（10-bit YUVなど）を使用している 動画ファイルヘッダー（ftyp atom）が破損しており、ブラウザがMP4コンテナ形式を認識できない

atob()関数がInvalidCharacterErrorをスローしてデコードに失敗する

Base64文字列に不正な文字が含まれている：Base64標準文字セットはA-Z、a-z、0-9、+、/、=の65文字のみです Data URLプレフィックスdata:video/mp4;base64,が除去されておらず、そのままatob()に渡されている 文字列に改行\n、復帰\r、スペース、タブなどの空白文字が混入している Word/Webページなどからコピーする際に中国語句読点、全角文字、または不可視の特殊文字が混入した Base64文字列がURLエンコードされている（プラス+が%2Bに、スラッシュ/が%2Fになっている）ため、先にURLデコードが必要 Base64文字列の長さが4の倍数ではなく、パディング文字=が欠落しているためatobの検証に失敗する 一部のバックエンド言語（Java、Pythonなど）のBase64エンコーダーがURL安全変種を使用している（+と/の代わりに-と_を使用）

Chrome/Firefoxでは動画が正常に再生できるが、Safariでは再生できない

SafariのH.264エンコードのProfileとLevelに対する要件がより厳格で、High Profile Level 5.1などの高度な設定はサポートされていない場合がある MP4ファイルのmoov atom（メタデータ）がファイルの末尾ではなく先頭にあり、Safariが完全にダウンロードするのを待ってから再生する必要がある 音声エンコードがAACではなく、SafariがMP4コンテナ内のMP3など他の音声のサポートが十分でない 動画解像度またはビットレートが高すぎて、Safari（特にiOS Safari）のハードウェアデコード能力を超えている Safariがサポートしていないエンコード機能（10-bit色深度、一部のH.264機能など）を使用している iOS Safariでは動画をインライン再生するためにplaysinline属性の設定が必要で、そうしないと全画面になるか再生できない Safariには音声トラックのサンプルレートに要件があり、非標準サンプルレート（44.1kHz/48kHz以外など）は再生失敗につながる可能性がある

大容量Base64動画のデコード時にページがフリーズ、ブラウザがクラッシュする

JavaScriptはシングルスレッドであり、atob()とUint8Array変換がメインスレッドで実行され、UIレンダリングをブロックする Base64デコード中に複数の大きな文字列と配列が生成され、メモリ使用量が高くなる（10MB Base64デコード時のピークメモリは数十MBに達する可能性がある） BlobとObject URLの作成にもメモリが必要で、大きな動画はブラウザのメモリ制限をトリガーしやすい モバイルデバイスはメモリがより小さいため、OOM（メモリ不足）クラッシュが発生しやすい Web Workerを使用しておらず、すべての操作がメインスレッドで行われ、イベントループをブロックしている ブラウザには単一文字列長に制限があり（V8エンジンは約512MBから1GB）、超長Base64文字列は正しく解析できない可能性がある デコード中の頻繁なガベージコレクション（GC）もページのフリーズと応答遅延を引き起こす

APIレスポンスからコピーしたBase64をデコードすると、動画が破損して再生できない

バックエンドがBase64を返す際に特殊文字を自動エスケープしている（+がスペースになる、JSONエスケープの問題など） JSON解析時にBase64文字列内の特殊文字が正しく処理されていない バックエンドのBase64エンコード時にエンコードエラーが発生し、バイナリデータをUTF-8文字列として処理している gzip圧縮またはHTTP送信中にデータが改変された Chrome DevToolsからコピーする際に、NetworkパネルのResponseプレビューが長い文字列を切り詰めたりエスケープしたりする可能性がある バックエンドが異なるBase64変種（URL安全Base64、+と/の代わりに-と_を使用）を使用しているのにフロントエンドで処理していない APIレスポンスがページネーションされているか切り詰められており、Base64データが不完全である

動画の映像は出るが音が出ない、または音声と映像が同期していない

音声エンコードがブラウザにサポートされていない：例えばMP4内でAACではなくMP3やOpusを使用している 動画トランスコード時の音声パラメータ設定が不適切で、タイムスタンプ（PTS/DTS）エラーが発生している Base64データが不完全で、音声トラックの一部のデータがちょうど切り詰められている 動画が可変フレームレート（VFR）であり、一部のブラウザがVFR動画のサポートが不十分で音声と映像が同期しない 元の動画自体に音声と映像の同期問題があり、Base64デコードによるものではない 音声サンプルレートまたはチャンネル数がブラウザにサポートされておらず、音声トラックのデコードに失敗する 動画コンテナ内の音声トラックと動画トラックのタイムベース（timebase）が一致しておらず、再生時に同期ズレが発生する

用語集

Base64
64個の印字可能文字を使用してバイナリデータを表現するエンコード方式で、3バイトのバイナリデータを4バイトのASCIIテキストにエンコードし、サイズを約33%増加させます。テキストプロトコルでバイナリデータを送信する際によく使用されます。
Data URL
RFC 2397で定義されたURIスキームで、形式はdata:[mediatype][;base64],data。小さなファイルをドキュメントに直接埋め込むことができ、追加のHTTPリクエストが不要です。
MIME タイプ
メディアタイプ識別子。ドキュメントまたはファイルの形式を表すために使用され、動画形式はvideo/で始まります。例：video/mp4、video/webm、video/ogg。ブラウザはMIMEタイプに基づいてリソースの処理方法を決定します。
Blob
Binary Large Object（バイナリラージオブジェクト）。ブラウザ内でイミュータブルな元のバイナリデータを表すオブジェクトで、動画、画像などのファイルデータの保存に使用できます。URL.createObjectURL()によってアクセス可能なURLを生成します。
atob()
ブラウザ組み込み関数。Base64エンコードされた文字列をバイナリ文字列にデコードします（ASCII to Binary）。対応するエンコード関数はbtoa()（Binary to ASCII）です。
btoa()
ブラウザ組み込み関数。バイナリ文字列をBase64文字列にエンコードします（Binary to ASCII）。atob()の逆の操作で、動画をBase64に変換する際に使用します。
Uint8Array
JavaScriptの型付き配列。8ビット符号なし整数（0-255）を格納し、各要素は1バイトに対応します。バイナリデータを処理する標準的な方法であり、Base64デコード後はUint8Arrayに変換してからBlobを作成する必要があります。
MP4
MPEG-4 Part 14。一般的なマルチメディアコンテナ形式で、通常はH.264動画エンコードとAAC音声エンコードを格納します。Web互換性が最も高く、ファイル拡張子は.mp4です。
WebM
Googleが開発したオープンソースでロイヤリティフリーの動画コンテナ形式。通常はVP8/VP9/AV1動画エンコードとVorbis/Opus音声エンコードを使用し、圧縮率はMP4より優れています。Chrome/Firefox/Edgeで良好にサポートされています。
OGG
Xiph財団が開発したオープンソースのマルチメディアコンテナ形式。動画は通常Theoraでエンコード、音声はVorbisでエンコードされます。現在は徐々にWebMに置き換えられており、ファイル拡張子は.ogvです。
H.264/AVC
現在最も広く使用されている動画エンコード標準。AVC（Advanced Video Coding）とも呼ばれ、圧縮率と品質のバランスが優れており、ハードウェアアクセラレーションをサポートします。MP4コンテナの標準動画エンコードであり、すべてのブラウザで互換性があります。
AAC
Advanced Audio Coding。高品位音声エンコード。MP4コンテナの標準音声エンコードであり、MP3形式の後継です。同品質でファイルサイズがより小さく、すべてのモダンブラウザでサポートされています。
Object URL
URL.createObjectURL(blob)によって作成される一時的なURL。形式はblob://...で、video/imgなどのタグのsrc属性に直接使用でき、メモリ内のBlobデータを指します。使用後はrevokeObjectURLで解放する必要があります。
FFmpeg
オープンソースの音声・動画処理ツール。動画のトランスコード、編集、エンコード情報の表示、圧縮などの操作に使用でき、動画処理の業界標準ツールです。動画エンコードの検証と変換に不可欠です。
moov atom
MP4ファイル内のメタデータアトム。動画の長さ、解像度、エンコード情報、デコードパラメータなどの重要なデータが含まれています。moovがファイルの先頭にあると高速に再生できるため、Web動画では先頭に配置することが推奨されます（faststart）。
コンテナ形式
動画ストリーム、音声ストリーム、字幕、メタデータを格納するファイル形式。例：MP4、WebM、OGG、MKV。コンテナ形式はエンコード形式と同じではなく、同じコンテナに異なるエンコードを格納できます。
動画エンコード
動画データを圧縮および伸張するアルゴリズム。一般的なものにH.264、H.265(HEVC)、VP8、VP9、AV1があります。エンコードは圧縮率と画質を決定し、ブラウザがサポートするエンコードによって動画を再生できるかどうかが決まります。
API デバッグ
フロントエンド・バックエンドインターフェース開発時にデータの正確性を検証するプロセス。本ツールはAPIが返すBase64動画データが正しいかを、フロントエンドのデコードコードを記述することなく迅速にプレビューするために使用できます。
Chrome DevTools
Chromeブラウザに組み込まれた開発者ツール。NetworkパネルでAPIリクエストとレスポンスを確認でき、そこからBase64動画データをコピーしてデバッグに使用できます。
パディング文字 =
Base64エンコードの末尾に1個または2個の等号が現れることがあり、エンコード結果の長さを4の倍数にパディングするために使用されます。デコード時にパディングが欠落しているとエラーが発生する可能性がありますが、ツールはパディングの問題を自動的に修復できます。

Web動画MIMEタイプと互換性対照表

MIMEタイプコンテナ形式一般的な動画エンコード一般的な音声エンコードブラウザ互換性ファイル拡張子
video/mp4MP4 (MPEG-4 Part 14)H.264/AVC, H.265/HEVC, AV1AAC, MP3すべてのモダンブラウザ（Chrome/Firefox/Safari/Edge/iOS/Android）、H.264+AACの組み合わせは100%互換.mp4, .m4v
video/webmWebMVP8, VP9, AV1Vorbis, OpusChrome/Firefox/Edge/Operaは完全対応、Safari 14.1以降対応、iOS Safari 15以降部分対応.webm
video/oggOggTheoraVorbisFirefox/旧版Chrome/Opera対応、Safari非対応、現在は使用が少ない.ogv, .ogg
video/quicktimeQuickTime (MOV)ProRes, H.264AAC, PCM主にSafari/macOS対応、他のブラウザは互換性が低い.mov
video/x-matroskaMatroskaH.264, VP9, AV1, 等各種エンコードブラウザのネイティブサポートが低く、通常はサードパーティプレーヤーが必要。Webでの使用は非推奨.mkv

Base64動画デコードのよくあるエラーコードと解決策

エラー現象/エラーメッセージ考えられる原因トラブルシューティングの方向性解決策
atob()エラー: InvalidCharacterError または "not correctly encoded"Base64文字列に不正な文字が含まれる；Data URLプレフィックスが除去されていない；空白文字/改行文字が存在する入力文字列がA-Za-z0-9+/=のみを含むか確認；data:プレフィックスを除去したか確認data:video/...;base64,プレフィックスを除去；すべての改行、スペース、タブを削除；日本語や特殊文字が混入していないか確認
デコード成功だが動画が再生できず、"非対応の動画形式"と表示されるMIMEタイプエラー；動画エンコードがブラウザにサポートされていない；ファイルヘッダー破損MIMEタイプが動画の実際の形式と一致しているか確認；FFmpegでエンコード情報を確認正しいMIMEタイプを選択（MP4はvideo/mp4）；FFmpegでH.264+AAC（MP4）にトランスコード；Base64の最初と最後が完全か確認
動画の映像は出るが音が出ない、または音は出るが映像が出ない音声エンコードまたは動画エンコードのいずれかがブラウザにサポートされていない；音声トラックまたは動画トラックが破損FFmpegで動画に含まれるストリームとそのエンコードを確認MP4はH.264動画+AAC音声である必要がある；WebMはVP8/VP9+Vorbis/Opusを使用；標準互換形式に再トランスコード
動画の映像がブロックノイズ、グリーンスクリーン、モザイクになるBase64データが不完全（切り詰められている）；デコード中にデータが破損；キーフレームの欠落元のBase64長と比較し、完全にコピーされているか確認完全なBase64文字列を再コピー；送信中に文字が失われていないか確認；元の動画ファイル自体が正常か検証
デコード後の動画サイズが元ファイルと一致しないBase64パディング文字=の処理エラー；バイナリ文字列からUint8Arrayへの変換時のエンコード問題デコードロジックがパディングを正しく処理しているか確認；charCodeAtの範囲が0-255であることを確認Base64末尾の=記号が正しく処理されていることを確認；Uint8Array変換ロジックが正しいか確認
大きな動画のデコード時にページがフリーズして応答しないBase64デコードがメインスレッドで実行され、UIをブロック；動画が大きすぎてメモリ制限を超過Base64データサイズを確認。10MB以上のBase64（元の動画約7.5MB）はフリーズする可能性がある大きな動画にはBase64を使用しない；Web Workerでのバックグラウンドデコードを検討；チャンク処理；ファイルアップロード方式に変更
Safariでデコードできるが再生できず、Chromeでは正常Safariの動画エンコード要件がより厳格；moov atomがファイル先頭にない；エンコードProfile/Levelが高すぎるFFmpegでH.264 ProfileとLevelを確認；moovの位置を確認トランスコード時に-movflags +faststartを追加；H.264 Baseline/Main Profile、Level 4.1以下を使用；AAC音声であることを確認
Data URLを直接video srcに設定しても再生できないData URL形式エラー；MIMEタイプの記述ミス；Base64部分が破損Data URL形式がdata:video/xxx;base64,xxxxになっているか確認MIMEタイプが正しいことを確認；カンマは英語のカンマ；Base64部分が完全；一部モバイルはData URLサイズに制限がある

元の動画サイズとBase64エンコード後のサイズ対比表

元の動画サイズBase64エンコード後サイズ（約）サイズ増加Data URLヘッダーオーバーヘッドインライン使用に適しているか代表的なシーン
100 KB~133 KB+33%約20バイト推奨極小アイコンアニメーション、数秒の無音ローディングアニメーション
500 KB~667 KB+33%約20バイト推奨短いループアニメーション、操作ヒントのショート動画、ボタンフィードバックアニメーション
1 MB~1.33 MB+33%約20バイトケースバイケース5-10秒のガイド動画、低解像度デモアニメーション、ファーストビューのパフォーマンスに注意
2 MB~2.67 MB+33%約20バイト非推奨インライン動画のサイズ上限に近く、ページ読み込み時間が大幅に増加する
5 MB~6.67 MB+33%約20バイト非推奨サイズが大きすぎるためBase64インラインは推奨されず、外部動画ファイルを使用
10 MB~13.3 MB+33%約20バイト禁止ページ読み込みに深刻な影響を与え、モバイルでメモリ不足クラッシュを引き起こす可能性がある
50 MB~66.7 MB+33%約20バイト禁止このサイズの動画をBase64で処理することは絶対に避け、ファイルアップロード/読み込み方式を使用する必要がある