对HTML5视频

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html 对HTML5视频

后备图片我想回退图像设置为这部影片的旗帜。当网站遇到媒体查询（手机）时，我希望视频成为图像，但是当我刷新页面时，我注意到一个类，在视频加载之前我给出了深灰色背景。思考相同的图像可能会出现。我想相信一个背景图像将被设置，并且当查询被打时，我可以在视频上添加诸如display：none之类的东西。

不知道如果我这样做是正确的，但继承人小提琴https://jsfiddle.net/8ucrarm0/

以防万一，这是可怕的，这里的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%; 
}

来源

2016-04-22 Darren Bachan

怎么样['poster'属性（https://developer.mozilla.org/en/docs/Web/HTML/Element/video#attr-海报）的'

回退到图像移动视图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

来源

2016-04-22 07:23:41 Fiido93

这工作。谢谢。有没有办法让图像垂直和水平居中？ –

可能不是你所追求的，但我不喜欢在移动设备上加载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>'); 
    }

来源

2016-04-22 03:13:43

此代码应为你工作：

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

来源

2016-04-22 05:21:06

对HTML5视频

回答

相关问题