logo标签列表

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

androidhtmliphonemobilevideo
3
我正在尝试让移动设备显示图像而非视频。我所拥有的代码在我测试过的所有浏览器上都有效。在移动设备上，它显示带有播放标志的视频而非自动播放（我认为移动设备无法自动播放）。我想要显示静态图像而非视频，这是否可能？
我的代码如下： 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>

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

2个回答
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>

在这里检查fiddle 链接

0
一个简单的CSS媒体查询就可以实现这个功能。
@media (max-width: 640px) {
    #wrapper {
        background: url(path_to_your_image) #000!important;
        background-size: cover;
    }
    #video { display: none; }
}

JsFIDDLE 在这里

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接