Захват замещающего изображения для HTML5 Video

Я использую следующий код для реализации 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-код, который показывает изображение. Но я искал, есть ли что-то, что может быть проще.

Ответ 1

После многого поиска я нашел решение, которое сработало для меня в 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>

Ответ 2

Браузер IE7 не поддерживает элемент видео. Мы должны написать Fall back code для видеотега. Вот мой код:)

<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>