videoタグでマークアップした動画がスマホで再生できません

###前提・実現したいこと
Webサイトにvideoタグを使用して動画を埋め込み、PC・スマホで再生したいです。

###発生している問題・エラーメッセージ
ブラウザ上では動画を再生することができたのですが、スマホだと中央にある再生ボタンをタップしても動画が再生されません。
動画の拡張子はmp4で、サイズは166MBです。

###該当のソースコード

HTML
1<video src="movie.mp4" poster="movie_img.png" controls preload="none" onclick="this.play();" controlslist="nodownload"></video>
2
3<video poster="movie_img.png" controls preload="none" onclick="this.play();" controlslist="nodownload">
4    <source src="movie.mp4" type="video/mp4">
5</video>

###試したこと
・動画のファイルサイズの変更
・<video src>と<video><source>どちらもスマホで再生できない
・videoタグにsrc属性でマークアップすると、動画をタップしたときに中央の再生ボタンに斜線が出ます。
・sourceタグにsrc属性でマークアップすると、動画をタップしたときは中央の再生ボタンに何も出ません。

###問題の発生した環境
スマホ：iPhone
ブラウザ：Safari, Chrome
環境：ローカル、テストサーバー、本サーバー
言語：HTML5
動画：mp4
サイズ：166MB

PCではChrome、Firefox、IEで再生できることは確認しました。
iPhoneだとChrome、Safariで再生できません。

原因が分からないので、解決策を教えていただけますでしょうか？
お手数をおかけしますが、お力添えをいただければ幸いです。

2017.09.22 解決済
無事スマホでも動画を再生することができました。
アドバイスありがとうございました。

T_sa

2017/09/22 00:09

動作確認した環境などを記入されたほうが回答を得やすいと思います。

pochino0525

2017/09/22 00:20

追記ありがとうございます。動作環境を追記したいと思います。

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

回答1件

ベストアンサー

小さなサンプル動画を作って

<video controls>
  <source src="somevideo.mp4" type="video/mp4">
  <source src="somevideo.webm" type="video/webm">
  
  I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.
  <!-- 古いブラウザーで mp4 ビデオを再生するために、Flash プレイヤーを埋め込むことができます -->
</video>

オンラインコンバーターなどでwebmを作って簡単なテストされたらどうでしょうか？

投稿2017/09/22 04:20