12

これは奇妙に聞こえるかもしれませんが、その場合でもフォールバック画像を表示できますか？

モバイル（AndroidおよびiOS）のビデオ要素は、クリックするとネイティブのビデオプレーヤーアプリを開くため、AndroidおよびiOS用のビデオのGIFバージョン（フォールバックイメージとして配置します）を表示したいと思います。ブラウザがモバイルであるかどうかをJavascriptで検出する方法を知っています。ベスト・プラクティスに関するアドバイスが必要です。

私がしていること

<video>
    <source mp4>
    <source ogg>
    <source webm>
    <img src="*.gif">
</video>

次に、jsで

if(site.isMobile()){
    $('video').hide();
    $('video img').show();
}

もちろん、imgはビデオ内にあるため、機能しません。imgのクローンを作成し、ビデオ要素の前に追加してから、ビデオ要素を非表示にできると思います。次のようになります。

if(site.isMobile()){
    $('video img').clone().prependTo('video'); // just some pseudocode
    $('video').hide();
}

でもそれは良い習慣ですか？もっと簡単な解決策はありますか？

4

2 に答える 2

45

posterあなたが探しているものかもしれません：

ポスター：ユーザーが再生またはシークするまで表示するポスターフレームを示すURL。この属性が指定されていない場合、最初のフレームが使用可能になるまで何も表示されません。次に、最初のフレームがポスターフレームとして表示されます。-https : //developer.mozilla.org/en-US/docs/HTML/Element/video経由

例：

<video width="316" height="161" poster="https://i.stack.imgur.com/BfXRi.png" controls>
  <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
  <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
  Your browser does not support the video tag.
</video>

于 2013-03-19T17:12:31.987 に答える
5

これを試して-

if(site.isMobile()){
    $('video *').hide();
    $('video img').show();
}

画像のコピーを作成するのではなく。

于 2013-03-19T12:58:09.430 に答える