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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

1351閲覧

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

Natdog

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/06/21 11:06

編集2022/01/12 10:55

前提・実現したいこと

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuki84web

2020/06/21 11:32

iPhone5sのsafariのバージョンは最新ではないですよね。最近のバージョンでは動画再生について何らかの制限がかかっていそうな気がします。それこそ、自動再生される動画が10個もあるなんてモバイル環境に優しくないページが、何も制限されないとは思いたくないですが…
Natdog

2020/06/21 12:46

ご返信ありがとうございます。 iphone5sのsafariのバージョンは最新ではありませんが、最新のクロームアプリでもすべて表示が出来ております。 アフリカの動物などのGIFをアップしていたのですが、gifはかなり帯域を使用するので代わりにファイル容量の小さいmp4を使用しています。 一つあたりのファイルサイズは100kbから500kbほどです。
kyoya0819

2020/06/21 21:38

最新のChromeであろうと、内部的にはSafariを利用しているので、SafariとChromeの結果は変わらないはずです。
Natdog

2020/06/21 22:41

ご返信ありがとうございます。 となるとブラウザに問題があるのではなく、端末の仕様の問題なのでしょうか。 本日まで色々と試してはいますが、未だに解決できず困っています。
yuki84web

2020/06/21 22:52

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

2020/06/22 00:29

ご返信ありがとうございます。 iphone7でも検証しましたが、この端末でも正常に表示されます。 10のすべてのソースコードからautoplayを外したところ、PC上では動画が静止している状態ですが、iphone端末(XS,XR,7,5s)で確認するとすべて真っ白で、何も表示されなくなりました。 ■本日気づいたこと■ サイト内に静止画(jpg)と文章のみの記事がいくつかあるのですが、そのページへアクセスしたあとに、mp4が見れなかったページに再度アクセスすると、XSとXRでもmp4ファイルがすべて見れるようになっていました。 mp4ファイルが掲載されているいくつかのページへ連続してアクセスすると、3記事目くらいからmp4がまばらに表示されるというような現象が起きています。 この現象はXSとXRのみで、正常に表示される端末(PCやiphone5や7など)はmp4が掲載されているページへ連続でアクセスしても動画ファイルはすべて正常に表示されます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問