android - 如何让移动设备显示图像而不是视频？

Question

我正在尝试让移动设备显示图像而不是视频。我的代码适用于我测试过的所有浏览器。在手机上，它显示带有播放标志的视频而不是自动播放(我相信手机不会自动播放)。我想要显示静止图像而不是视频，这可能吗？

我的代码在这里:

http://jsfiddle.net/QDfkf/

<div id="video-top">
            <video title="Norman's video" width="620" height="632" loop="loop" preload="none" autoplay tabindex="0">
                <source src="images/norman-web-opening-version.mp4" type="video/mp4"/>
                <source src="images/norman-web-opening-version.ogv" type="video/ogg" />
                <source src="images/norman-video.jpg" media="all and (max-width:700px)" type="image/jpeg">
                <source src="images/norman-web-opening-version.webm" type="video/webm" />
                <object width="620" height="650">
                    <param name="movie" value="images/norman-video.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#000000" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object width="620" height="650" data="images/norman-video.swf" type="application/x-shockwave-flash">
                    <param name="movie" value="images/norman-video.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#000000" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                </object>
                </object>
                <!-- Image fall back for non-HTML5 browser with JavaScript turned off 
          and no Flash player installed -->
                <img src="images/norman-video.jpg" width="620" height="632" alt="No video playback capabilities" />
            </video>
        </div>

如果我可以提供更多信息或提供更好的代码，请告诉我，这是我第一次发布。非常感谢。

Answer 1

您可以简单地使用 poster <video> 的属性标签，像这样

<video width="100%" height="100%" controls poster="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

检查 fiddle here