如何使用 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

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

同域

所以你的第一个问题是你试图从保管箱加载你的视频。根据我在 Firefox 和 Chrome 中的观察，它仅在视频源来自同一域时才有效。 (source)

为了实现这一点，我会在您的 public 文件夹中创建一个名为 video 的文件夹，然后 link 它们像这样：<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;
}

结果

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

How to play HTML5 videos using Ruby Sinatra?

html5-video