HTML5视频的后备图片

Question

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html

I'm trying to set a fallback image to this video banner. When the site hits a media query (mobile) I'd like the video to become an image, but when I refresh the page I'm noticing a class I have is giving a dark grey background before the video loads in. I'm thinking the same image maybe could be present. I want to believe a background-image would be set and when a query is hit maybe I add something like display:none on the video.

Not sure if I did this correctly but heres a fiddle https://jsfiddle.net/8ucrarm0/

Just in case that's terrible here's the html/css:

HTML -->

                    <div class="banner-text">
                        <span class="logo-white"><img src="img/logo-white.svg" alt=""></span>
                        <h1>Feeling luxurious is only one car wash away.</h1>
                        <h4>Become a Diamond Club Member today.</h4>    
                        <button class="btn btn-primary btn-lg">See Pricing</button>
                    </div>
                </div><!-- end video-holder -->
            </header>
    </div><!--end banner-->

CSS:

#banner.container-fluid {
    padding: 0;
    position: relative;
}
#banner.overlay:after {
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: block;
    z-index:0;
    background-color: rgba(0,0,0,0.8);
}
header {
    position: relative;
    overflow: hidden;
    width:100vw;
    height:100vh;
    max-height:100vh;
    text-align:center;
}
.banner-text {
    position: relative;
    top: 55%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    margin: 0 auto;
    max-width: 550px;
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);*/
}
.banner-text h1,
.banner-text h4 {
    color: #fff;
}
.banner-text h1 {
    padding-bottom: 20px;
}
.banner-text h4 {
    padding-bottom: 40px;
}
.banner-text .logo-white {
    width: 75px;
    height: 65px;
    display: block;
    margin: 0 auto 20px auto;
}
.video-holder {
    position:absolute;
    height:100%;
    width:200%;
    left:-50%;
}
video {
    position:absolute;
    top: -99999px;
    bottom: -99999px;
    left: -99999px;
    right: -99999px;
    margin: auto;
    min-height:100%;
    min-width:50%;
}

Answer 1

probably not what you are after but i dislike loading mp4 on mobile devices so i load a append with jquery.

<video class="noMob">
</video>

and the Jquery

    if ($(window).width() < 740) {
        $("video.noMob").replaceWith('<video class="noMob"></video>');
    }
  if ($(window).width() > 740) {
    $("video.noMob").replaceWith('<video class="noMob" autoplay loop muted ><source src = "http://darrenbachan.com/playground/diamond-hand-car-wash/img/wash.mp4" type = "video/mp4" ></video>');
  }

Answer 2

This code should work for you:

    <video autoplay>
        <source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
        <source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
        <img src="/images/product/product-parent-hero.jpg" title="Your browser does not support the <video> tag">
    </video>

Answer 3

To fallback image to html5 in mobile view.

you need to use media queries.

CSS

@media screen and (max-width: 768px){
  video{
    display:none;
  }
    .full-img{
    background: url('https://pbs.twimg.com/profile_images/686049493884665856/BW148X8R_400x400.jpg');
    background-size: cover;
  }

DEMO