HTML5背景ビデオが再生されない

Question

私はビデオオフカバーを使用しています - それは私が全幅で再生しているちょうどhtmlビデオです。問題は、mp4を再生していないということです。代わりに、デフォルトの画像を使用しています。私はmp4とwebmをインデックスと同じディレクトリに持っています。ビデオファイルをダウンロードした

$(document).ready(function() { 

    scaleVideoContainer(); 

    initBannerVideoSize('.video-container .poster img'); 
    initBannerVideoSize('.video-container .filter'); 
    initBannerVideoSize('.video-container video'); 

    $(window).on('resize', function() { 
     scaleVideoContainer(); 
     scaleBannerVideoSize('.video-container .poster img'); 
     scaleBannerVideoSize('.video-container .filter'); 
     scaleBannerVideoSize('.video-container video'); 
    }); 

}); 

function scaleVideoContainer() { 

    var height = $(window).height() + 5; 
    var unitHeight = parseInt(height) + 'px'; 
    $('.homepage-hero-module').css('height',unitHeight); 

} 

function initBannerVideoSize(element){ 

    $(element).each(function(){ 
     $(this).data('height', $(this).height()); 
     $(this).data('width', $(this).width()); 
    }); 

    scaleBannerVideoSize(element); 

} 

function scaleBannerVideoSize(element){ 

    var windowWidth = $(window).width(), 
    windowHeight = $(window).height() + 5, 
    videoWidth, 
    videoHeight; 

    console.log(windowHeight); 

    $(element).each(function(){ 
     var videoAspectRatio = $(this).data('height')/$(this).data('width'); 

     $(this).width(windowWidth); 

     if(windowWidth < 1000){ 
      videoHeight = windowHeight; 
      videoWidth = videoHeight/videoAspectRatio; 
      $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth)/2 + 'px'}); 

      $(this).width(videoWidth).height(videoHeight); 
     } 

     $('.homepage-hero-module .video-container video').addClass('fadeIn animated'); 

    }); 
} 

私は基本的にはちょうどwhenIを与えたcoverr指示に従っ：ここに私のHTMLは次のとおりです。

<div class="homepage-hero-module"> 
    <div class="video-container"> 
     <div class="filter"></div> 
     <video autoplay loop class="fillWidth"> 
      <source src="Browsing.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser. 
      <source src="Browsing.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser. 
     </video> 
     <div class="poster hidden"> 
      <img src="Browsing.jpg" alt=""> 
     </div> 
    </div> 
</div> 

ここ

は私のCSSです：

.homepage-hero-module { 
    border-right: none; 
    border-left: none; 
    position: relative; 
} 
.no-video .video-container video, 
.touch .video-container video { 
    display: none; 
} 
.no-video .video-container .poster, 
.touch .video-container .poster { 
    display: block !important; 
} 
.video-container { 
    position: relative; 
    bottom: 0%; 
    left: 0%; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    background: #000; 
} 
.video-container .poster img { 
    width: 100%; 
    bottom: 0; 
    position: absolute; 
} 
.video-container .filter { 
    z-index: 100; 
    position: absolute; 
    background: rgba(0, 0, 0, 0.4); 
    width: 100%; 
} 
.video-container video { 
    position: absolute; 
    z-index: 0; 
    bottom: 0; 
} 
.video-container video.fillWidth { 
    width: 100%; 
} 

そして最後に、私のJS 。誰でもビデオが再生されない理由を見ることができますか？

Answer 1

コードのCodepenを作成しても機能しますが、画像には画像が含まれています。私はあなたが代替画像として<video>要素に画像を配置することを意味していたと思います。

<video autoplay loop class="fillWidth"> 
    <source src="Browsing.mp4" type="video/mp4" /> 
    <source src="Browsing.webm" type="video/webm" /> 
    <img src="Browsing.jpg" alt=""> 
</video>