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

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

ソースは以下です。

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

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

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

行動規範の内容に同意します

回答2件

おそらく原因としては

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はインストール済みのため、時間が取れたらデバッグしてみたいと思います。ご助力いただきありがとうございました。

行動規範の内容に同意します

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

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

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

投稿2017/08/18 05:06