Q&A
iPhone5sのsafariのバージョンは最新ではないですよね。最近のバージョンでは動画再生について何らかの制限がかかっていそうな気がします。それこそ、自動再生される動画が10個もあるなんてモバイル環境に優しくないページが、何も制限されないとは思いたくないですが…
前提・実現したいこと
iphone XRとXSを含めすべての端末のウェブブラウザ上でmp4ファイルが正常に表示されるようにしたいです。
発生している問題・エラーメッセージ
<video src="〇〇.mp4" playsinline muted autoplay loop width="100%" height="100%"></video>
上記コードをwordpressの記事に貼り付けたのですが、iPhoneXS、XR端末のSafariとChromeのどちらを使用してもmp4を正常に読めたり読み込めなかったりします。
例として、記事内に上記コードを10張り付けると、10あるうちの6つが表示され4つが表示されなかったり、
2つは表示され8つが表示されないなどまばらです。
表示できなかったmp4ファイルは、iphone端末の低電力モードで見ると下記のように表示されます。
通常の電力モードの場合は真っ白になったままです。
一時的な改善の例
iphone端末のバックグラウンドでSafariを終了させたり、履歴とwebデータを消去すると症状が一時的に改善されてすべての動画が表示されるようになりますが、数分後あるは数時間後に同じページにアクセスすると症状が元に戻ってしまいます。
正常に表示される端末
いくつかの端末で試したところ、この症状がでるのは「iPhoneXS、XR」で「windows10 PC、iphone7、iPhone5s、iPhone5、galaxy note8」では正常に表示されます。
気になる点
・「iPhoneXS、XR」以外の端末で該当ページへアクセスすると、ページ全体の表示も速くてページ内でのスクロールもスムーズ。
・「iPhoneXS、XR」は他の端末に比べ該当ページへのアクセスが若干遅く、ページ内でのスクロールが若干不安定。
（下部で途切れていた文字が急に現れたりするなど）
・「iPhoneXS、XR」はページ自体は正常に表示される（mp4ファイルだけが正常に読み込まない）
・「iPhoneXS、XR」でmp4が表示されなかったページをアドレスバー右側の更新を押すとページが表示されるまでに凄く時間がかかるが、バックグラウンドからブラウザを一度削除して、該当のページを再度読み込むと素早くページが表示され動画もすべて表示される。
該当のソースコード
試したソースコードは以下のみです
<video src="〇〇.mp4" playsinline muted autoplay loop width="100%" height="100%"></video>
使用サーバー
litespeed
メインで使用するワードプレステーマ
JIN
試したが上手くいかなかった事 まとめ
・キャッシュ系プラグインの停止と削除
・CDNキャッシュ削除と停止
・Safariやクロームのウェブデータ、キャッシュ削除
・WordPressテーマの変更
・mp4ファイルのアップロード先の変更（例：htmlは〇〇.com。mp4だけ××.comなど）
正常に表示されない端末
iPhone XS v13.4.1
iPhone XR v13.5.1
正常に表示される端末
PC windows10
Mac book air OS 10.14.5
iPhone5s v12.1.4
iphone7 v12.1.4
galaxy note8
6月22日追記
正常に動画ファイルが表示されていたiphone7 v12.1.4をv13.5.1に変更したところ、XSとXRと同じ現象が起きました。
端末の問題ではなくiosに問題がありそうです。
ご返信ありがとうございます。
iphone5sのsafariのバージョンは最新ではありませんが、最新のクロームアプリでもすべて表示が出来ております。
アフリカの動物などのGIFをアップしていたのですが、gifはかなり帯域を使用するので代わりにファイル容量の小さいmp4を使用しています。
一つあたりのファイルサイズは100kbから500kbほどです。
最新のChromeであろうと、内部的にはSafariを利用しているので、SafariとChromeの結果は変わらないはずです。
ご返信ありがとうございます。
となるとブラウザに問題があるのではなく、端末の仕様の問題なのでしょうか。
本日まで色々と試してはいますが、未だに解決できず困っています。
どのみち、現在iPhone5sを使っているユーザーは多くないと思うので、あまり検証端末とすべきではなさそうですが、とりあえず'autoplay'を取り除いてみるとか
ご返信ありがとうございます。
iphone7でも検証しましたが、この端末でも正常に表示されます。
10のすべてのソースコードからautoplayを外したところ、PC上では動画が静止している状態ですが、iphone端末（XS,XR,7,5s）で確認するとすべて真っ白で、何も表示されなくなりました。
■本日気づいたこと■
サイト内に静止画（jpg)と文章のみの記事がいくつかあるのですが、そのページへアクセスしたあとに、mp4が見れなかったページに再度アクセスすると、XSとXRでもmp4ファイルがすべて見れるようになっていました。
mp4ファイルが掲載されているいくつかのページへ連続してアクセスすると、3記事目くらいからmp4がまばらに表示されるというような現象が起きています。
この現象はXSとXRのみで、正常に表示される端末（PCやiphone5や7など）はmp4が掲載されているページへ連続でアクセスしても動画ファイルはすべて正常に表示されます。
あなたの回答
tips
プレビュー
