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背景视频不能播放

回答

相关问题