CODEWITHSUNDEEP
androidhtmliphonemobilevideo
Dally
Dally

Reputation: 41

How to make mobile devices to show image instead of video?

I'm trying to get mobile devices to display an image instead of a video. The code I have works on all browsers that I have tested. On mobile it shows the video with a play sign instead of auto-playing (I believe mobiles do not auto-play). I would like a still image to show instead of the video, is this possible?

My code is here:

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>

Let me know if I can give any more info or supply code a better way, this is the first time I have posted. Thanks a lot.

Upvotes: 4

Views: 8692

Answers (2)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6642

You can simply just make use of the poster attribute of the <video> tag, like so

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

Check the fiddle here

Upvotes: 1

Tharaka Karunarathne
Tharaka Karunarathne

Reputation: 65

A simple css media query can achieve this

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

JsFIDDLE here

Upvotes: 0

Related Questions