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

【问题标题】：How to make mobile devices to show image instead of video?如何让移动设备显示图像而不是视频？
【发布时间】：2014-01-06 16:21:47
【问题描述】：

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

我的代码在这里：

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>

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

【问题讨论】：

标签： android html iphone mobile video

【解决方案1】：

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

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

检查小提琴here

【讨论】：

【解决方案2】：

一个简单的css媒体查询就可以实现这个

@media (max-width: 640px) {
    #wrapper {
        background: url(path_to_your_image) #000!important;
        background-size: cover;
    }
    #video { display: none; }
}

JsFIDDLEhere

【讨论】：