videoタグを使ってみたのですが、PCは問題なく動くのですが、SP（ネクサス５）で動画が出ず、保険の画像だけが出てしまいます。

Question

videoタグを使ってみたのですが、PCは問題なく動くのですが、SP（ネクサス５）で動画が出ず、保険の画像だけが出てしまいます。

<video class="c-video" src="img/index/hero-movie.mp4" autoplay loop poster="img/index/food.jpg" onclick="this.play();">
							<!-- poster="img/index/food.jpg"動画が再生されない場合に表記される画像 -->
							</video>

http://www.tam-tam.co.jp/tipsnote/html_css/post2604.htmlをみて、こちらの指定方法も試したのですが同じでした。

<video class="c-video" controls poster="img/index/food.jpg" preload="none" onclick="this.play();" width="640" height="360">
<source src="img/index/hero-movie.mp4" type="video/mp4">
<p>代替表示用</p>
</video>

http://codepen.io/anon/pen/bwzrdW

poster="img/index/food.jpg"を削除すると動画が停止状態で表記されますが、

<div class="filter u-size-full u-gradient-red u-zindex-top"> というフィルターをかけているので、タップができません。 codepenにはこちらは再現していない。

jqueryでコノフィルターをクリックしたときに再生するように指定するしかないでしょうか・

Answer 1

すみません、その前に、ブラウザはその動画の再生に対応していますでしょうか？
こちらにあるように、ブラウザごとに対応しているファイルの種類が異なると思います。
http://www.aoharu-b.com/cgi/sk/2011/09/html55video.html

まず、動画がどのようなフォーマットなのかを調べて、ブラウザが対応しているかを確認してみてはいかがでしょうか。

Comments

[退会済みユーザー]

ネクサス５はmp4に対応していると思います。ウエノフィルターがなかった時にはちゃんと再生できていました。
保険の画像なしだと今でも停止中の動画は出てきます。

[usugita_san]

他にボタンを作って、ボタンのイベントでvideoタグのplayイベントを実行しても、再生できませんか？

[usugita_san]

もうひとつ。
DIVタグを合わせると、HTMLのソースは、こんな感じですか？

<div class="filter u-size-full u-gradient-red u-zindex-top">
<video class="c-video" src="img/index/hero-movie.mp4" autoplay loop poster="img/index/food.jpg" onclick="this.play();">
<!-- poster="img/index/food.jpg"動画が再生されない場合に表記される画像 -->
</video>
</div>

[退会済みユーザー]

はい、htmlはそのようになっています。

＞＞＞
他にボタンを作って、ボタンのイベントでvideoタグのplayイベントを実行しても、再生できませんか？

これはまだやっていませんがjqueryのクリックファンクショントで実行するようにできるということですね。
いっそのことフィルターのdivを押したら実行されるようにするとちょうどいいかもしれないですね。どんなメソッドを使うと動画を実行できるのか調べてみます。

[退会済みユーザー]

＞＞＞
他にボタンを作って、ボタンのイベントでvideoタグのplayイベントを実行しても、再生できませんか？

というよりも、そもそもposter="img/index/food.jpg"があると動画自体が表記されず、保険の画像がSPでは表記されてしまいます。

PCではちゃんと動画が動きます。

[usugita_san]

autoplayがあるにもかかわらず、自動的に再生できないという事は、恐らく動画のフォーマットにブラウザが対応していないのでしょう。
再生できないのでposterの画像が表示されるのは正しい動作です。poster属性が原因に絡んでいるのではなく、動画が単純に再生できないと考えた方が良いです。

> ネクサス５はmp4に対応していると思います。

mp4は拡張子であってフォーマットではないです。
以下のURLにあるmp4のサンプル動画は両方mp4という拡張子ですがフォーマットが異なり、ブラウザによって再生できたりできなかったりします。
http://www.gomplayer.jp/player/support/sample.html

試しに私のパソコン（Ubuntu 16.04)でChrome 54.0.2840.71 (64-bit) でvideoタグの動作を確認しました。
mp4_h264_aac.mp4(4.98MB)では動画が再生可能。
mp4_mpeg4_aac.mp4(1.28MB)では再生が不可能。

mp4でも中身は色々ですので、調べてみてはいかがでしょうか？

[退会済みユーザー]

再度確認しました。
<video id="js-video" class="c-video" src="img/index/hero-movie.mp4" autoplay loop onclick="this.play();">
<!-- poster="img/index/food.jpg"動画が再生されない場合に表記される画像 -->
</video>

としたところやはり動画が止まった状態で出てきます。

poster="img/index/food.jpg"が悪さをしているようです。
ネクサス５はposter="img/index/food.jpg"があるとダメなのですかね？

[usugita_san]

poster属性がなくても再生できないのですよね？ならばposter属性は原因ではないと考えられます。
ブラウザは何でしょうか？

[退会済みユーザー]

poster属性なしだと動画が止まって表記さ、lv9サーバ上では実行できません。
ただ前ほかのレンサバでは動きました。
サーバ側の問題というのも考えられるのでしょうか？

ネクサス5にプリインストールされているものです、クロームのアイコンです。
ただPCのクロームでは問題なく動きます。

[退会済みユーザー]

lv9に問い合わせても返事もしてきません。

[退会済みユーザー]

バージョンも必要なら教えてください。何とか調べてみます。

[退会済みユーザー]

htaccsessに下記を記載して、index.htmlのカレントディレクトリに入れてみましたがそれでもだめでした。

AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/webm .webm

http://webfeelfree.com/html5-video-basis/

[usugita_san]

なかなか回答できずにすみません。
以下の事を試してみてはいかがでしょうか？
・前述したURLからサンプルの動画を落としてきて、２つとも再生が可能か調べてみる。
・どちらか再生できるのであれば、動画のフォーマットの問題が濃厚。動画のフォーマットを調べる。
・chromeのバージョンを調べて、videoタグで再生に対応しているフォーマット（拡張子ではなくフォーマット←ココ注意）を調べる。
・動画のフォーマットに問題があるなら、動画を変換した方が早いです。

もうひとつ。
PCがあるなら、Genymotionなどのエミュレータを入れて、そこから再生してみたらいかがでしょうか？今後の開発に必ず役立つので、Androidのエミュレータは何かしらあった方が良いと思います。

[退会済みユーザー]

そんなエミュレータがあるのですね。
ありがとうございました。

こちらも締め切っていないことに気づかずすいませんでした。

その後lv9に連絡したところ何もしていないのに急に動くようになりました。
ずいぶん不安定なサーバなので、サーバ側の問題だったとしか考えられません。