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

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

ただいまの
回答率

89.99%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,800
退会済みユーザー

退会済みユーザー

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

<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でコノフィルターをクリックしたときに再生するように指定するしかないでしょうか・

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/31 18:34

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

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

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

    キャンセル

  • 2016/11/12 22:20

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

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

    キャンセル

  • 2016/11/13 07:53

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

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

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

    キャンセル

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • HTML5に関する質問
  • videoタグを使ってみたのですが、PCは問題なく動くのですが、SP(ネクサス5)で動画が出ず、保険の画像だけが出てしまいます。