Question

我找到了一个名为coverr.co的网站，为免费的html5背景视频提供预制代码。我似乎无法通过复制和粘贴他们提供的内容来使代码工作。有什么我做错了吗？

可能是我的目录全部搞砸了吗？几个小时以来我一直在乱用这段代码，我似乎无法让视频在后台运行。

<style type="text/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-conatiner .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 video {
 position: absolute;
 z-index: 0;
 bottom: 0;
}

.video-container video.fillWidth {
width: 100%;
}

   </style>


<script type="text/javascript">
    //jQuery is required to run this code
$( 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');

});
}

</script>




<body>

<div class="homepage-hero-module">
<div class="video-container">
    <div class="filter"></div>
    <video autoplay loop class="fillWidth">
        <source src="../MP4/BnW.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
        <source src="../WEBM/BnW.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="../img/BnW.jpg" alt="">
    </div>
</div>

Answer 1

我认为你是对的。目录结构可能搞砸了，确保这样做的最佳方法是检查浏览器的Console或Network标签，以防在获取资源时出现任何错误。

Here's你的代码的jsFiddle脚本完美运行。除了我已将视频和图片代码的src更改为在线媒体资源外，没有什么可以添加的。

HTML 5背景视频代码似乎不起作用

1 个答案: