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

Question

我正在建立自己的投资组合网站。我正在使用 Ruby Sinatra。我希望我的主页具有全屏视频背景。我用谷歌搜索，我没有发现任何关于我的情况。我花了几个小时试图让我的视频播放，但我已经失去了希望。我对任何可能有助于成功的解决方案持开放态度。谢谢！

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">

修复自动循环

现在视频应该可以在大多数现代浏览器中播放。 该循环在我添加的 Firefox 和 Chrome 中可靠运行 preload="none" (source)

全屏

要获得全屏视频here 有一些想法。我用过

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

这种方法有效，但效果不佳。也许寻找一个js解决方案。

将html放在顶部

现在你可以将你的其他 html 元素放在它上面，像这样使用绝对定位：

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

结果