reproductor - Recuperación del marcador de posición de la imagen para video HTML5

insertar video en html5

Question

Estoy usando el siguiente código para implementar un video HTML5 en una página

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

Esto funciona genial, incrustado en mi página en FF, Safari y Chrome. Lo que me gustaría, ya que este video no tiene controles, y es para ser incrustado en la página sin bordes (BG blanca en el video) es hacer que aparezca una imagen en lugar del video.

Me gustaría tener una imagen como alternativa si el video no se puede representar con el elemento. He visto la siguiente publicación: consejos de respaldo de video html5 (sin flash) que iniciaron la discusión. Pero no estoy seguro si esas respuestas fueron lo que necesitaba.

Mi instinto me dice que puedo hacer que JQuery detecte la capacidad de video, y si el video no es compatible, entonces escriba algo de HTML que muestre una imagen. Pero estaba buscando para ver si hay algo que podría ser más simple.

Answer 1

Después de mucha búsqueda, encontré la solución que me funcionó de nuevo en IE8. No he probado en IE7.

¿Cómo puedo mostrar una imagen si el navegador no admite la etiqueta <video> de HTML5?

La publicación anterior muestra un método que parece funcionar para mí. Aquí está la salida basada en mi código anterior:

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

Answer 2

El navegador IE7 no es compatible con Video Element. Tenemos que escribir el código Fallback para la etiqueta de video. Aquí está mi código :)

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