Question

我正在建立自己的投资组合网站。我正在使用Ruby Sinatra。我希望我的主页有全屏视频背景。我用Google搜索，我发现没有任何关于我的情况。我花了好几个小时试图让我的视频播放，我已经失去了希望。我愿意接受任何有助于使其成功的解决方案。谢谢！

HTML

<video width='512' height='288' id="splashvid" autoplay loop muted>
 <source src="https://www.dropbox.com/s/2vyfy2ma6xslbyk/sweeping_view.mp4" type="video/mp4">
 <source src="https://www.dropbox.com/s/svw8jyfx6a2k83n/sweeping_view.ogv" type="video/ogg">
 <source src="https://www.dropbox.com/s/r99qulve4g0y4kk/sweeping_view.webm" type="video/webm">
</video>

CSS

video#splashvid {
  background:url('https://www.dropbox.com/s/2vyfy2ma6xslbyk/sweeping_view.mp4') no-repeat;
-webkit-background-size:cover;
overflow: hidden;
}

Answer 1

首先，我不确定这是不是一个好主意，但你可以做到。

相同域名

因此，您的首要问题是您尝试从Dropbox加载视频。根据我在Firefox和Chrome中的观察结果，只有当视频源来自同一个域时，它才有效。（source）

为实现这一目标，我将在您的公共文件夹中创建一个名为video的文件夹，并将其链接为：<source src="/video/sweeping_view.mp4" type="video/mp4">

修复自动循环

现在视频应该在大多数现代浏览器中播放。该循环在我添加preload="none"（source）

的Chrome和Chrome中可靠

<强>全屏

要将视频设为全屏here，请提出一些建议。我用了

video {
    width: 100%    !important;
    height: auto   !important;
}

哪个有效，但效果不是最好。也许找一个js解决方案。

将html置于顶部

现在你可以将其他html元素放在它上面，绝对定位如下：

h1 {
    position: absolute;
    top:50px;
    left: 30px;
}

<强>结果

如何使用Ruby Sinatra播放HTML5视频？

1 个答案: