EN / JA
Dev Stories

TikTokアプリ内ブラウザで動画のplaysinlineが無効化される問題と対処法

· 1 min read

この記事の要点

  • TikTokアプリ内ブラウザ（WebView）では、<video>タグのplaysinline属性が削除もしくは無効化される
  • その結果、LP等に埋め込んだMP4動画が全画面再生になり、ページの閲覧・操作ができなくなる
  • 対処法としてアニメーションWebPへの変換が有効。GIFより高画質・軽量で、現在は主要ブラウザでほぼ問題なく表示される

発端：広告運用者からの相談

先日、広告運用を担当している方からこんな相談を受けました。

「TikTokから飛ばしたLPで、埋め込み動画が全画面表示になってしまって、ページが見られなくなる」

具体的な状況を整理するとこうです。

TikTokでは、動画広告からLP（ランディングページ）などの外部Webページにユーザーを遷移させることがよくあります。そして、そのLP上で商品の説明動画をループ再生させたり、使用感を伝えるための短い動画を埋め込んでいるケースも多いでしょう。

通常、スマートフォンのブラウザ上でMP4動画をインライン自動再生するには、<video>タグにmutedとplaysinlineの両方の属性を指定する必要があります。

<video src="demo.mp4" autoplay muted playsinline loop></video>

この記述自体はWeb制作の基本です。SafariでもChromeでも、この書き方でインライン自動再生が機能します。

ところが、TikTokアプリ内のブラウザで開くと話が変わります。

何が起きているのか

iPhoneでの確認になりますが、TikTokアプリ内ブラウザ（いわゆるWebView）でLP等を開くと、playsinline属性が削除される、あるいは無効化されているようです。

その結果、埋め込み動画が強制的に全画面再生されてしまいます。

ユーザーから見ると、LPを開いた瞬間に動画が画面いっぱいに広がり、その下にあるはずのテキスト・画像・CTAボタンなど、ページの他のコンテンツが一切見えなくなります。LPとして完全に機能しなくなる、致命的な状態です。

なぜTikTokはそうしているのか

これはTikTokの仕様としては、おそらく意図的なものです。理由として考えられるのは以下のとおりです。

TikTokのUXは「全画面で動画を見る」ことが核です。ユーザーがTikTokアプリを使っている間は、アプリ内ブラウザも含めて「動画＝全画面」という体験を一貫させたいという設計思想は理にかなっています。

また、アプリ内ブラウザ上で小さなインライン動画が再生される体験は、TikTok本体の全画面動画視聴と比べてチープに映る可能性があります。プラットフォームとしてのブランド体験を守るために、動画は全画面で再生するという制御をかけていると推測できます。

加えて、外部ページ上の動画がインラインで自動再生されると、ユーザーがTikTokアプリ外のコンテンツに長く滞在する要因になりえます。プラットフォーム側として、アプリ内の滞在時間やエンゲージメントを最適化したい意図もあるでしょう。

TikTokの立場からすれば、合理的な仕様です。

LP運用としては最悪の仕様

しかし、広告主・LP運用者の視点から見ると、これは最悪の仕様と言わざるを得ません。

LPの目的は、ユーザーを購入や申し込みなどのコンバージョンに導くことです。ページ内の構成要素――キャッチコピー、商品説明、口コミ、CTAボタン――が一体となって初めて機能します。

動画が全画面で再生されてしまうと、これらの購入導線がすべて隠れてしまいます。TikTok広告からの流入が多いLPでは、コンバージョン率に直接的な悪影響を及ぼす深刻な問題です。

相談への回答：アニメーションWebPという選択肢

相談者の方は「MP4をアニメーションGIFにするしかないですか？」と聞いてきました。

たしかにGIFなら<video>タグではなく<img>タグで表示するので、playsinlineの問題を完全に回避できます。しかし、GIFには大きなデメリットがあります。

そこで提案したのが、アニメーションWebPに変換するという方法です。

MP4 / アニメーションGIF / アニメーションWebP 比較表

項目 MP4 アニメーションGIF アニメーションWebP
表示方法 <video>タグ <img>タグ <img>タグ
TikTok WebView ❌ 全画面化する ✅ 問題なし ✅ 問題なし
ファイルサイズ ◎ 非常に軽量 ✕ 非常に重い（MP4の10〜50倍） △ MP4より重い（MP4の2〜10倍程度）
画質 ◎ 高画質 ✕ 256色制限・ディザが目立つ ○ 高画質（フルカラー対応）
透過 ✕ 非対応 △ 1bit透過のみ ◎ アルファチャンネル対応
ブラウザ対応 ◎ 全ブラウザ対応 ◎ 全ブラウザ対応 ○ 主要ブラウザほぼ対応（IE非対応）
ハードウェアアクセラレーション ◎ 対応 ✕ 非対応 ✕ 非対応
ループ再生 コード指定 自動 自動

なぜGIFよりWebPなのか

GIFは256色までしか使えないため、グラデーションや細かいディテールがある映像ではディザリング（粒状のノイズ）が目立ち、見た目のクオリティが大きく落ちます。さらに、ファイルサイズがMP4と比べて桁違いに大きくなるため、ページの読み込み速度にも悪影響を与えます。

アニメーションWebPは、フルカラー（24bitカラー＋8bitアルファ）に対応しており、GIFよりもはるかに高画質です。ファイルサイズもGIFに比べると大幅に小さく抑えられます。

ブラウザ対応も、2024年以降はIEのサポート終了もあり、実質的にほぼ全ての環境で表示可能です。WebViewでの表示についても、<img>タグで読み込むため、TikTokアプリ内ブラウザのplaysinline問題の影響を受けません。

注意点：ファイルサイズのバランス

アニメーションWebPはGIFよりは軽量ですが、MP4と比べるとやはりファイルサイズは大きくなります。

これはコーデックの仕組み上避けられない差です。MP4（H.264等）はフレーム間圧縮に最適化された動画専用フォーマットですが、WebPは基本的に静止画の連続であり、フレーム間の冗長性を動画ほど効率的には削減できません。

そのため、実運用では以下のようなバランス調整が必要です。

  • 動画の長さを短くする（3〜5秒のループがおすすめ）
  • 解像度を必要最低限に抑える（フルHDではなく、表示サイズに合わせる）
  • フレームレートを下げる（30fpsではなく12〜15fps程度で十分な場合が多い）
  • 品質（quality）パラメータを調整する（見た目と容量の許容ラインを探る）

完璧な画質を維持しつつ軽量に、というのは難しいので、許容範囲のファイルサイズと見た目のクオリティのバランスを見極めてもらうしかありません。

まとめ

TikTokアプリ内ブラウザでは、playsinline属性が無効化されるため、<video>タグで埋め込んだMP4動画が全画面再生になってしまいます。TikTok広告からのLP流入が多い場合、購入導線が機能しなくなる重大な問題です。

対処法としては、動画部分をアニメーションWebPに変換して<img>タグで配置するのが現実的な選択肢です。GIFと比較して画質が良く、ファイルサイズも小さく抑えられます。

TikTok経由のLPで同様の問題に直面している方は、ぜひアニメーションWebPを選択肢に入れてみてください。

補足：MP4→アニメーションWebP変換ツール

MP4からアニメーションWebPへの変換には、以下のツールをご活用ください。

MP4 to Animated WebP Converter

  • 無料・サインアップ不要
  • ブラウザ上で完結（サーバーへのアップロードなし）
  • ファイルがサーバーに送信されないため、商用素材の変換にも安心して利用可能
← すべてのコラム