HTML5 视频的图像占位符后备

Posted

技术标签:

【中文标题】HTML5 视频的图像占位符后备【英文标题】:Image placeholder fallback for HTML5 Video 【发布时间】:2013-01-15 00:05:18 【问题描述】:

我正在使用以下代码在页面上实现 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 advice (no flash),它开始了讨论。但不确定这些答案是否是我需要的。

我的直觉告诉我,我可以让 JQuery 检测视频功能,如果不支持视频,则写出一些显示图像的 HTML。但我想看看是否有更简单的方法。

【问题讨论】:

How can I display an image if browser does not support HTML5's <video> tag的可能重复 【参考方案1】:

经过大量搜索,我找到了对我有用的解决方案,回到 IE8。未在 IE7 中测试。

How can I display an image if browser does not support HTML5's <video> tag

上面的帖子显示了一种似乎对我有用的方法。这是基于我上面的代码的输出:

<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 浏览器不支持视频元素。我们必须为视频标签编写后备代码。这是我的代码:)

<video controls="controls" autoplay="autoplay" 
poster="#"  >
    <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" 
     >
        <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  src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg"   title="No video playback capabilities, please download the video below" />
    </object>
</video>

【讨论】:

来自未来的问候,IE现在支持视频标签。 caniuse.com/#feat=video

以上是关于HTML5 视频的图像占位符后备的主要内容,如果未能解决你的问题,请参考以下文章

用于输入占位符的 HTML5 图像图标

Glide v4 中的占位符/错误/后备 [重复]

如何为 YouTube 视频添加启动画面/占位符图像 [关闭]

如何将占位符图像添加到嵌入的 Vimeo 和 Youtube 视频中?

HTML5“占位符”支持

谷歌的 html5 shiv 不呈现占位符?