Question

我正在尝试我的第一个网络视频项目，并且无处可去，需要一些使用全宽视频标题或背景的帮助。

我找到了一个使用以下视频做我想做的事情的例子，它运行得很好 - 没有缓冲，可接受的质量等。

.mp4文件使用640x360格式@ 23 fps（613kbps），这在我查看的任何显示器上都能正常工作 - 整个画面从上到下，从一侧到另一侧可见。

我所做的研究表明，使用的最佳视频格式是720 x 24fps，我尝试过（实际尺寸为1280x720），但发现它只能在低于最大化浏览器分辨率的情况下运行良好，在这种情况下，它看起来很棒，否则，在向下滚动之前，底部的一小部分，可能是框架的底部18％，是不可见的，这是不可接受的。我需要视频和640x360一起工作，整个图像可见。此外，使用720格式进行缓冲，而640x360则没有缓冲。

我正在使用Sony Vegas进行视频编辑，而且没有640x360格式的选项。最接近的是640x480但产生相同的结果 - 高，底部不可见。

有一个网站成功使用1280x720格式（http://mazwai.com/#/），但我不知道如何。

有人能指出我正确的方向吗？

谢谢。

这是当前的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>

<script>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
</script>

<style>
body{ margin:0px; background:#000; max-width:1000; }
#bg_container{ height:800px; overflow:auto; }
#bg{ width:100%; }
</style>

</head>

<body>

<div id="bg_container">
  <video id="bg" src="www.parishpc.com/images/720.mp4" autoplay loop muted">    </video>
</div>

</body>
</html>

这段代码工作得更好 - 只有底部的5％不可见：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>

<style>

body, html { margin: auto;
background:#fff;
height: 100%;
}

header {
height:100%;
width:100%;
overflow:hidden;
position:relative;
}

.video {
    position:fixed;
    top: 50%; left: 50%;
    z-index:1;
    min-width: 100%;
    min-height: 100%;
    width:auto;
    height:auto;
    transform: translate(-50%,-50%);
}
</style>

</head>

<body>
    <header>
        <video autoplay loop class="video">
            <source src="www.parishpc.com/images/720.mp4" type="video/mp4">
        </video>
    </header>        
</body>
</html>

Answer 1

尝试

body {
   margin: 0;
   padding:0;
}

并从视频类中删除transform: translate(-50%,-50%);

这应该有效

如果您需要任何进一步的帮助，请告诉我

Answer 2

我不确定你想要什么，但是在适应每个用户的窗户尺寸的同时，无法拉伸或切断部件的视频背景是不可能的。

此解决方案将确保视频达到窗口高度的100％。如果他们想要看到切掉的部分，他们必须调整窗口的大小以适应宽度。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Video test</title>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            height: 100%;
            width: auto;
        }

        .video {
            height: 100%;
        }

    </style>

</head>

<body>
    <div id="container">
        <video autoplay loop class="video">
            <source src="http://www.parishpc.com/images/720.mp4" type="video/mp4">
        </video>
    </div>
</body>

</html>

Answer 3

如果有人仍在尝试让视频占据整个视口，可以使用以下代码完成此操作 - ＆gt; （我也很确定这需要你使用标签通过你的.html添加视频，而不是在css属性中添加它作为背景）

将要填充视频的父容器设置为：

product.add({

  title: {type: String, required: true},

   description: {type: Types.Text, default: 'Your Default Text Here'},


 });

将以下属性添加到您的视频中：

position: relative;

全宽视频背景

3 个答案: