如何在着陆页中以一定高度嵌入视频，几秒钟后也开始播放 - 就像 airbnb？

Question

我需要创建一个着陆页，其中 50% 的内容都由精彩的视频覆盖。而且视频只需要在1或2秒后开始播放（就像airbnb网站一样）

下面是我目前的代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo video homepage</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<style type="text/css">
#videodiv{
z-index: -1;
height: 50%;
overflow: hidden;
width: 100%;
}
</style>
</head>
<body>
<header id="container">
<div id="videodiv" class="embed-responsive embed-responsive-16by9">
    <video id="myvideo" loop="loopd" preload="auto" class="embed-responsive-item" autoplay="autoplay">
      <source type="video/webm" src="../media/bbb.webm"></source>
      <source type="video/mp4" src="../media/bbb.mp4"></source>
    </video>
  </div>
</header>
</body>
</html>

我按照 Bootstrap 的建议使用了 class="embed-responsive embed-responsive-16by9"。在 Chrome 中查看，它总是全屏显示。在 Safari 中，它似乎可以识别百分比并保持指示的高度。

我该如何解决这些问题？
我的另一个问题是，如果连接速度很慢，我可以想象下载视频需要时间。我想知道在视频下载之前广泛使用什么解决方案？

Answer 1

要在页面加载后几秒开始播放视频，您可以使用 setTimeout：

setTimeout(function(){ $('video').play(); }, 2000);

其中 2000 代表毫秒 = 2 秒。

您是否尝试过使用 display:block 将 #videodiv 定义为块。否则你可以通过 "height:50% !important;" 强制高度。百分比的替代方法是对实际视口高度的引用："height: 50vh;".

如何在着陆页中以一定高度嵌入视频，几秒钟后也开始播放 - 就像 airbnb？

How to embed video at certain height in a landing page, also start after few seconds - like airbnb?

css

html5-video

twitter-bootstrap