web-dev-qa-db-de.com

Fallback für Bildplatzhalter für HTML5-Video

Ich verwende den folgenden Code, um ein HTML5-Video auf einer Seite zu implementieren

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

Dies funktioniert hervorragend, eingebettet in meine Seite in FF, Safari und Chrome. Was ich gerne hätte, da dieses Video keine Steuerelemente hat und in die Seite ohne Rahmen eingebettet werden soll (weiße Hintergrundfarbe im Video), soll ein Bild anstelle des Videos angezeigt werden.

Ich hätte gerne ein Bild als Fallback, wenn das Video nicht mit dem Element gerendert werden kann. Ich habe den folgenden Beitrag gesehen: html5 Video-Fallback-Hinweis (kein Flash) der die Diskussion begann. Aber nicht sicher, ob diese Antworten das waren, was ich brauchte.

Mein Bauch sagt mir, dass JQuery die Videofunktion erkennen kann. Wenn Video nicht unterstützt wird, schreiben Sie HTML, das ein Bild anzeigt. Aber ich suchte, ob es etwas gibt, das einfacher sein könnte.

27
stebesplace

Nach langem Suchen fand ich die Lösung, die bei IE8 wieder funktionierte. Habe nicht in IE7 getestet.

Wie kann ich ein Bild anzeigen, wenn der Browser das <video> -Tag von HTML5 nicht unterstützt

Der obige Beitrag zeigt eine Methode, die für mich zu funktionieren scheint. Hier ist die Ausgabe basierend auf meinem obigen Code:

<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

Der IE7-Browser unterstützt kein Video Element. Wir müssen Rückfallcode für Video-Tag schreiben. Hier ist mein 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