質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

iphone XRとXSのウェブブラウザ上でmp4を正常に読み込む事ができません。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 681

score 0

前提・実現したいこと

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に問題がありそうです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • Natdog

    2020/06/22 07:41

    ご返信ありがとうございます。

    となるとブラウザに問題があるのではなく、端末の仕様の問題なのでしょうか。

    本日まで色々と試してはいますが、未だに解決できず困っています。

    キャンセル

  • yuki84web

    2020/06/22 07:52

    どのみち、現在iPhone5sを使っているユーザーは多くないと思うので、あまり検証端末とすべきではなさそうですが、とりあえず'autoplay'を取り除いてみるとか

    キャンセル

  • Natdog

    2020/06/22 09:29

    ご返信ありがとうございます。

    iphone7でも検証しましたが、この端末でも正常に表示されます。

    10のすべてのソースコードからautoplayを外したところ、PC上では動画が静止している状態ですが、iphone端末(XS,XR,7,5s)で確認するとすべて真っ白で、何も表示されなくなりました。


    ■本日気づいたこと■
    サイト内に静止画(jpg)と文章のみの記事がいくつかあるのですが、そのページへアクセスしたあとに、mp4が見れなかったページに再度アクセスすると、XSとXRでもmp4ファイルがすべて見れるようになっていました。

    mp4ファイルが掲載されているいくつかのページへ連続してアクセスすると、3記事目くらいからmp4がまばらに表示されるというような現象が起きています。

    この現象はXSとXRのみで、正常に表示される端末(PCやiphone5や7など)はmp4が掲載されているページへ連続でアクセスしても動画ファイルはすべて正常に表示されます。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る