Question

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

我的代码在这里：

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

检查小提琴here

Answer 2

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

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

JsFIDDLE here

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

2 个答案: