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

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

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

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

Struts 2

Apache Struts 2は、Apache Strutsプロジェクトにて開発されているオープンソースのJavaベースのWebアプリケーションフレームワークです。Sturts1に比べ、設定ファイルの削減、依存性の注入、POJO等の改善がなされています。

Q&A

2回答

14154閲覧

HTMLのvideoタグの動画がスマホで表示されない

Begi

総合スコア56

HTML5

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

Struts 2

Apache Struts 2は、Apache Strutsプロジェクトにて開発されているオープンソースのJavaベースのWebアプリケーションフレームワークです。Sturts1に比べ、設定ファイルの削減、依存性の注入、POJO等の改善がなされています。

0グッド

1クリップ

投稿2017/07/27 11:57

###前提・実現したいこと
HTML5のvideoタグを使用し、動画を再生させています。
PCでは正常に動画を再生できるのですが、スマートフォンで表示すると動画が再生できず、以下のようになってしまいます。

スマホキャプチャ

ソースは以下です。

<video style="width: 300px; height: auto;" controls> <source src="common/img/00001V01.mp4"> </video>

sourceタグにtype="video/mp4"を付与してみたりしましたが、効果がありませんでした。
お知恵をお貸しいただけませんでしょうか。よろしくお願い致します。

###補足情報(言語/FW/ツール等のバージョンなど)
Struts2で開発しており、jspで動作させています。

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

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

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

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

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

guest

回答2

0

おそらく原因としては

  • mp4ファイルを再生できる機種ではない
  • mp4ファイルを取得できない
  • サイトにbasic認証がかかっている
  • etc...

など機種OS、サーバの設定など色々原因があります。
そもそもそのソースファイルに直接アクセスして動画を再生可能なのか、
他の機種では再生されるが該当の機種だけ再生されないのか
ソースのファイルの拡張子を変えてみたらどうなるのか

など虱潰しに調べていくとよいかと思います!

もし、特定の機種のみで再生されないのであれば
「videoタグ Android」や「videoタグ Sumsong4」のように調べる道標が出来てくると思います!

以下は参考程度にどうぞ!
iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法
Androidでvideoタグによる動画再生を実装する際の落とし穴

投稿2017/07/28 03:23

MasakazuFukami

総合スコア1869

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

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

Begi

2017/07/28 04:31

回答いただきありがとうございます。 表示できない端末はiPhone5SとNECのLAVIE Tabです。どちらで閲覧しても同様の結果になってしまいます。 PCから見ると再生できるので、取得できていないことは無いと思います。 また、どちらの機種でもmp4は再生できました(以下のサイトで再生確認済み、mp4であることも確認済みです) https://www.nhk.or.jp/archives/creative/material/view.html?m=D0002060531_00000 サーバの設定というのは、どのあたりを確認すべきものなのでしょうか。申し訳ありませんが、ご教授いただけますと助かります。 ちなみに、キャプチャの再生ボタンを押しても何も反応が無い状態です。
MasakazuFukami

2017/07/28 05:09

サーバの設定ですが、mp4などのリソースが配信できない設定になる可能性があったのですが、ブラウザで直接見れる場合は関係ないかもしれないですね! iphoneやandorindには実機で見ながらusbケーブルをPCにつなぐとwebインスペクタ(developer toolのようなもの)が使えるのでそちらでデバッグしてみてください! http://dev.classmethod.jp/tool/ios-safari-web-debug/
Begi

2017/07/28 05:20

返信いただきありがとうございます。 webインスペクタの件ですが、先日試そうと思いましたがMACを持っていないために諦めました。 そこで、ios_webkit_debug_proxyというフリーソフトとiTunes、Chromeを使いデバッグできる方法を試したのですが、そこでもうまくデバッグできなかったために、原因を存じ上げる人がいればと思い質問させていただいた次第です。 参考サイト:http://qiita.com/tyam001/items/dc9f44add8e31dcbfa7a
MasakazuFukami

2017/07/28 05:23

なるほど。 それではwindowsでiphoneを無理やり?デバッグするのではなく、chromeを使用してAndroid(LAVIE Tab)のデバッグをしてみてはいかがでしょうか? そちらを解決するとiphoneの方でも解決できているかもしれません。
Begi

2017/07/28 10:06

はい、Android Studioはインストール済みのため、時間が取れたらデバッグしてみたいと思います。 ご助力いただきありがとうございました。
guest

0

私も全く同じ現象に悩まされています。
解決ではありませんが、検証していて判明したことを記載します。

恐らく、視聴したい動画の解像度は1080p以上(1920x1080)だと思われます。
1080pまでの動画でしたら、iPhone5s、iPad、iPhone6で視聴が出来ています。
しかし、1440p(2560x1440)の動画に変えると、上記3つのデバイスのうちiPhone6しか視聴が行えなくなりました。

youtubeでもAmazonPrimeVideoでもsafariから見るときは720pまで制限されてしまいます。
原因は分かりませんが、解像度による何かしら問題が存在しているのかもしれません。
今の所、1080p以上の動画を見るには別のブラウザを使用するしかなさそうです。

投稿2017/08/18 05:06

shingoalpha

総合スコア33

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

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

Begi

2017/08/18 15:58

回答いただきありがとうございます。 動画は1920x1080でした。解像度を落として試してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問