36

次のコードを使用して、ページにHTML5ビデオを実装しています

<video autoplay>
    <source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

これはうまく機能し、FF、Safari、Chromeの私のページに埋め込まれています。このビデオにはコントロールがなく、境界線のないページ（ビデオの白いBG）に埋め込まれることを意味するので、私が欲しいのは、ビデオの代わりに画像を表示することです。

要素を使用してビデオをレンダリングできない場合のフォールバックとして画像を使用したいと思います。私は次の投稿を見ました：議論を始めたhtml5ビデオフォールバックアドバイス（フラッシュなし） 。しかし、それらの答えが私が必要としていたものであったかどうかはわかりません。

私の腸は、JQueryにビデオ機能を検出させることができ、ビデオがサポートされていない場合は、画像を表示するHTMLを書き出すことができると言っています。しかし、私はもっと簡単なものがあるかどうかを探していました。

4

2 に答える 2

59

多くの検索を行った後、IE8に戻るのに役立つソリューションを見つけました。IE7でテストしていません。

ブラウザがHTML5の<video>タグをサポートしていない場合、どうすれば画像を表示できますか

上記の投稿は、私にとってうまくいくと思われる方法を示しています。上記のコードに基づく出力は次のとおりです。

<video autoplay>
    <source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
    <img src="/images/product/product-parent-hero.jpg" title="Your browser does not support the <video> tag">
</video>
于 2013-01-31T02:08:18.917 に答える
0

IE7ブラウザはVideoElementをサポートしていません。ビデオタグのフォールバックコードを作成する必要があります。これが私のコードです:)

<video controls="controls" autoplay="autoplay" 
poster="#" width="212" height="160">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" 
    width="212" height="160">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':true}]}" />
        <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
    </object>
</video>
于 2013-09-18T05:57:57.163 に答える