[英]Image placeholder fallback for 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 video fallback advisor (no flash) 。 但不確定這些答案是否是我所需要的。
我的直覺告訴我,我可以讓 JQuery 檢測視頻功能,如果不支持視頻,則寫出一些顯示圖像的 HTML。 但我想看看是否有可以更簡單的東西。
經過大量搜索,我找到了對我有用的解決方案回到 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>
IE7 瀏覽器不支持視頻元素。 我們必須為視頻標簽編寫回退代碼。 這是我的代碼:)
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.