Question

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

我正在尝试将后备图片设置为此视频横幅。当网站点击媒体查询（移动）时，我希望视频成为图像，但是当我刷新页面时，我注意到我的课程在视频加载之前呈现深灰色背景我认为可能存在相同的图像。我想相信会设置背景图像，当查询被点击时，我可能会在视频中添加类似display：none的内容。

我不确定我是否正确地做了这件事，但又是一个小提琴https://jsfiddle.net/8ucrarm0/

以防万一这里的html / css很糟糕：

HTML - ＆GT;

                    <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

可能不是你想要的，但我不喜欢在移动设备上加载mp4，所以我加载了一个附加jquery。

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

和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

此代码适用于您：

    <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

在移动视图中将图片回退到html5。

您需要使用媒体查询。

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

HTML5视频的后备图像

3 个答案: