HTML5背景視頻不能播放

我正在使用視頻封面 - 這只是一個我正在播放的HTML視頻。問題是它不是在播放mp4，而是使用默認圖像。我在與索引相同的目錄中有mp4和webm。這裏是我的html：HTML5背景視頻不能播放

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

$(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'); 

    }); 
}

我基本上只是跟着coverr給whenI下載的視頻文件中的說明。任何人都可以看到爲什麼視頻不會播放？

來源

2016-12-16 Gaz Smith

有沒有錯誤？您的網頁上是否包含jQuery腳本？ –

嘗試在普通視頻元素中播放，首先刪除所有CSS和JS。 – CBroe

你有本地文件夾上的** Browsing.mp4 **嗎？你給jquery圖書館添加了一個電話嗎？ –

我創建了一個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>

來源

2016-12-16 12:18:26

感謝您的隊友，但即使當我使用您的代碼，我只是看到兔子jpg，如果我檢查它只是指jpeg而不是mp4 –

它需要一分鐘，但視頻開始播放。 Codepen使用您描述的相同設置，因此視頻仍然在圖像後面。你需要使用我上面顯示的代碼。 –

HTML5背景視頻不能播放

回答

相關問題