[HTML]videoタグのmp4がiOSで自動再生されない時に確認すること

HTML

2020.02.182025.08.23

WEBサイトに埋め込んだ動画が、iPhoneやiPadといったiOSデバイスで自動再生されない。。。

見た目は地味なトラブルですが、動画をキービジュアルとして使用している場合、再生失敗はユーザー体験（UX）を著しく損ないます。

動画が停止したままでは、訪問者はその瞬間にサイトから離脱しかねません。デザインの意図が伝わらないまま、エンゲージメント率が低下し、結果としてコンバージョン（成約）に繋がらないというビジネス上の大きな損失を招いてしまうでしょう。

原因は、AppleのSafariがユーザー保護のため、音声付き動画の自動再生を意図的に制限していることにあります。この記事では、最新の仕様に基づいた3つのチェックポイントを順に解説しますのでぜひ参考にしてくださいね。

①動画属性（アトリビュート）の記述ミスを排除する
1. 必須となる3つの属性
2. 正しいHTMLコードの記述例
②動画ファイル形式（コーデック）とサーバー設定の適合性を確認
1. iOSがサポートする推奨コーデック
2. サーバー側のMIME Type設定チェック
③JavaScriptによる再生制御のロバスト性を高める
1. Promiseを利用したエラーハンドリング
【まとめ】iOSの制約を理解し、確実な実装へ！

①動画属性（アトリビュート）の記述ミスを排除する

iOSデバイスで動画を自動再生させるために、最も重要かつ必須の要件となるのが、HTMLの video タグに特定の属性を正しく記述することです。

この記述こそが、iOSの「ユーザー保護」という制約をクリアするためのパスポートとなります。

必須となる3つの属性

iOS環境で動画を自動再生するには、以下の3つの属性を同時に記述することが求められます。

属性名	役割	必須性
autoplay	自動的に再生を開始する	高
muted	音声をミュート（消音）にする	最重要
playsinline	全画面表示に切り替えず、インラインで再生する	最重要

特に、muted 属性がなければ、ほとんどのモバイルブラウザで自動再生は実行されない仕様です。

正しいHTMLコードの記述例

古い記述には、属性に空の値を設定する例も見受けられますが、HTML5では、真偽値（Boolean）を取る属性は値なしで記述するのが正しい方法となります。

以下のコードを参考にしてください。

<video playsinline muted autoplay loop poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

</video>

自動再生は「音を消して（muted）」「画面内に留める（playsinline）」でOK！と覚えておくとスッキリするでしょう。

②動画ファイル形式（コーデック）とサーバー設定の適合性を確認

属性の記述が正しいにもかかわらず再生されない場合、原因は動画ファイルそのもの、あるいはファイルを配信するサーバー側の設定に潜んでいる可能性があります。

動画がサポート対象外の形式であれば、属性が完全でも再生は不可能となります。

iOSがサポートする推奨コーデック

MP4（H.264）は今なおWeb動画の標準ですが、ファイルサイズの軽量化と高画質化を両立する観点から、HEVC（H.265）コーデックへの対応も検討すべき時代です。

ファイル形式	推奨コーデック	備考
.mp4	H.264 または HEVC (H.265)	iOS 11以降はHEVCをサポート
.webm	VP8 または VP9	AndroidやChrome環境での互換性を高める

動画ファイルを作成する際は、これらのコーデックで適切にエンコードされているかを必ず確認しましょう。

サーバー側のMIME Type設定チェック

Webサーバーが「これは動画ファイルだ」と正しく認識できるように、MIME Typeの設定は非常に重要です。

特にWordPress環境でキャッシュプラグインなどを使用している場合、設定が上書きされ、MIME Typeが不正になるケースが散見されます。

最低限、MP4のMIME Typeが video/mp4 として認識されているかを、ホスティングサービスの設定や、必要に応じて .htaccess ファイルで確認するべきです。

# .htaccess ファイルに以下の記述を追加・確認
AddType video/mp4 .mp4
AddType video/webm .webm

# .htaccess ファイルに以下の記述を追加・確認

AddType video/mp4 .mp4

AddType video/webm .webm

もし、サーバーが動画ファイルをテキストファイルと誤認していたら、ブラウザは動画の再生を諦めてしまうでしょう。

③JavaScriptによる再生制御のロバスト性を高める

HTML属性による自動再生はシンプルですが、環境やタイミングによって失敗する不安定さを内包しています。

より確実な再生処理を実装したいのなら、JavaScriptで再生を制御することを推奨します。

Promiseを利用したエラーハンドリング

現代のブラウザでは、video.play() メソッドは即座に再生を開始するのではなく、Promise（非同期処理）を返します。

このPromiseがReject（拒否）された場合、自動再生に失敗したことを捕捉できるのです。これにより、自動再生失敗時の代替処理を実装できるようになります。

const video = document.getElementById('myVideo');

// 動画のロード完了を待ってから再生を試みる
video.addEventListener('loadedmetadata', () => {
    video.play()
        .then(() => {
            // 自動再生が成功した場合
            console.log("動画の自動再生に成功しました。");
        })
        .catch(error => {
            // 自動再生がブロックされた場合（iOSのミュートなし等）
            console.error("動画の自動再生はブロックされました。", error);

            // ここで代替案を提示する：
            // 1. 再生ボタンを表示してユーザーにクリックを促す
            // 2. 動画の代わりに静止画を表示する
            // etc.
        });
});