web-dev-qa-db-fra.com

Solution de substitution d'espace image pour la vidéo HTML5

J'utilise le code suivant pour implémenter une vidéo HTML5 sur une page

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

Cela fonctionne très bien, intégré à ma page dans FF, Safari et Chrome. Ce que je voudrais, étant donné que cette vidéo ne comporte pas de contrôle et qu'il est censé être intégré à la page sans bordure (BG blanc dans la vidéo), c'est qu'une image apparaisse à la place de la vidéo.

J'aimerais avoir une image comme solution de secours si la vidéo ne peut pas être rendue avec l'élément. J'ai vu le post suivant: Conseil de repli vidéo html5 (pas de flash) qui a lancé la discussion. Mais pas sûr si ces réponses étaient ce dont j'avais besoin.

Mon instinct me dit que JQuery peut détecter la capacité vidéo. Si la vidéo n'est pas prise en charge, écrivez du code HTML qui montre une image. Mais je cherchais à voir si quelque chose pourrait être plus simple.

html5videohtml5-video
27
stebesplace

Après de nombreuses recherches, j'ai trouvé la solution qui fonctionnait pour moi dans IE8. Je n'ai pas testé dans IE7.

Comment puis-je afficher une image si le navigateur ne prend pas en charge la balise <video> de HTML5

Le post ci-dessus montre une méthode qui semble fonctionner pour moi. Voici la sortie basée sur mon code ci-dessus:

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

Le navigateur IE7 ne prend pas en charge l'élément vidéo. Nous devons écrire le code de secours pour le tag vidéo. Voici mon 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>
0
user1878874