如何讓移動設備顯示圖像而不是視頻？

我正試圖讓移動設備顯示圖像而不是視頻。我已經在我測試過的所有瀏覽器上使用該代碼。在移動設備上，它會顯示帶有播放標誌的視頻，而不是自動播放（我相信手機不會自動播放）。我想要一個靜態圖像而不是視頻，這可能嗎？如何讓移動設備顯示圖像而不是視頻？

我的代碼是在這裏：

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

讓我知道如果我可以給任何更多的信息或供應代碼更好的辦法，這是我第一次公佈。非常感謝。

來源

2014-01-06 Dally

一個簡單的CSS媒體查詢可以實現這個

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

的jsfiddle here

來源

2015-04-21 07:24:00

你可以簡單地僅僅利用<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

來源

2016-01-29 15:21:44

如何讓移動設備顯示圖像而不是視頻？

回答

相關問題