Question

我正在使用此jquery片段来确保我的html5背景视频保持居中，全屏并正确对齐。 `

$(document).ready(function() {

var $win = $(window),
    $video = $('#full-video'),
    $videoWrapper = $video.parent();

function scaleVideo() {
    var isWider = ( $video.width() > $videoWrapper.width() ) ? true : false,
        isTaller = ( $video.height() > $win.height() ) ? true : false,
        widthDifference = $video.width() - $videoWrapper.width(),
        heightDifference = $video.height() - $videoWrapper.height();

    ( isWider ) ? $video.css('left',-parseInt(widthDifference / 2)) : $video.css('left', '0');
    ( isTaller ) ? $video.css('top', -parseInt(heightDifference / 2)) : $video.css('top', '0');
}

scaleVideo();
$win.resize(function() {
    scaleVideo();
});
});

`

起初它根本没有做任何事情所以我添加了$（文件）.ready（函数（）在它周围。现在它工作除了某些原因，当我重新加载页面时有空格（〜 20px）显示在视频的右侧。如果我完全调整浏览器窗口的大小，它会消失，但如果我重新加载/刷新页面，则会再次出现。

这里是指向其中的链接：http://wabi-sabi.cc

这是html：

<body> <div class="slide-wrapper"> <div class="full-video-wrapper"> <video id="full-video" muted preload autoplay loop> <source src="videos/wabisabiwebvideo.webm" type="video/webm"> <source src="videos/wabisabiwebvideo.mp4" type="video/mp4"> </video> </div> </div> </body>

这就是css：

.slide-wrapper {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.full-video-wrapper {
background: white;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
overflow: hidden;
}

#full-video {
display: block;
position: absolute;
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

感谢您的帮助！

Answer 1

好吧，想通了。这很简单，真的，我只是Javascript的新手

而不是使用 $(document).ready(function() { ... });

我使用了window.onload = function() { ... }

我正在让脚本在页面正确加载之前跳过枪。现在我有一个很棒的背景视频，在窗口调整大小时保持居中和对齐！

希望其他人学习javascript也可以从中学习。

我的jquery脚本正在为html5视频添加空格

1 个答案: