對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

回答

相關問題