我正在尝试我的第一个网络视频项目,并且无处可去,需要一些使用全宽视频标题或背景的帮助。
我找到了一个使用以下视频做我想做的事情的例子,它运行得很好 - 没有缓冲,可接受的质量等。
.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>
答案 0 :(得分:0)
尝试
body {
margin: 0;
padding:0;
}
并从视频类中删除transform: translate(-50%,-50%);
这应该有效
如果您需要任何进一步的帮助,请告诉我
答案 1 :(得分:0)
我不确定你想要什么,但是在适应每个用户的窗户尺寸的同时,无法拉伸或切断部件的视频背景是不可能的。
此解决方案将确保视频达到窗口高度的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>
答案 2 :(得分:0)
如果有人仍在尝试让视频占据整个视口,可以使用以下代码完成此操作 - &gt; (我也很确定这需要你使用标签通过你的.html添加视频,而不是在css属性中添加它作为背景)
将要填充视频的父容器设置为:
product.add({
title: {type: String, required: true},
description: {type: Types.Text, default: 'Your Default Text Here'},
});
将以下属性添加到您的视频中:
position: relative;