在 Rails 应用程序中使用 bigvideo.js 渲染背景答案

【问题标题】：Rendering a background using bigvideo.js within a Rails application在 Rails 应用程序中使用 bigvideo.js 渲染背景
【发布时间】：2013-07-02 17:37:05
【问题描述】：

我的以下 bigvideo.js 实现在我的 Rails 项目之外完美运行。

<script src="modernizr.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui-1.8.22.custom.min.js"></script>
<script src="jquery.imagesloaded.min.js"></script>
<script src="http://vjs.zencdn.net/3.0/video.js"></script>
<!-- BigVideo -->
<script src="bigvideo.js"></script>

<script>
var BV = new $.BigVideo();
BV.init();
if (Modernizr.touch) {
BV.show('yay.jpg');
 } else {
BV.show('test.mp4',{ambient:true});
 }
</script>

但是，当我尝试将其翻译到 Rails 时，它不会呈现图像或视频。
- 我在 assets/javascripts 中有所有 javascript 文件。他们似乎正确地拉动。
- Application.js 保持不变，包括 //= require_tree 。
- 对于自定义 JS（上面显示 js 代码的那个），我目前将其作为 JS 文件保存在 assets/javascripts 中。我尝试将相关的图像/视频文件放在文件夹中，更改文件的网址路径，并将其命名为 .html.erb 并使用 ruby sn-ps，但均未成功。

我怎样才能使我的实施工作？你可以看到它在 Rails 之外工作here。

【问题讨论】：

yay.jpg 和 test.mp4 在哪里？
如前所述，我尝试将文件放在同一目录（assets/javascripts）中，我尝试上传这些文件，然后通过 url 引用它们，我尝试将它们放在在相关的 rails assets 文件夹中并使用 ruby sn-ps 来引用它们。没有一个成功。

标签： javascript html ruby-on-rails ruby-on-rails-3 video

【解决方案1】：

我能够让 BigVideo 与 rails 一起工作。我不确定这是否是最理想的解决方案，但如果您提供视频的完整网址（通过 <%= request.protocol + request.host_with_port + asset_path('main-video.mp4') %> 之类的方式），它将加载到页面上。

所以我最终使用的代码是：

<script>
  $(function() {
        var BV = new $.BigVideo();
  BV.init();
  BV.show("<%= request.protocol + request.host_with_port + asset_path('main-video.mp4') %>",{ambient:true});
  });
</script>

我已经设置了一个示例应用程序，您可以查看一下。它位于此处（注意：我试图在某种程度上忠实于您的 onepager 示例，但并不完全相同）：

http://bigvideo.herokuapp.com/

你也可以在这里看到我用来创建它的代码：

https://github.com/scouttyg/bigvideo-example

我还做了一些有趣的事情，例如将视频放在自己的目录（资产/视频）中，并将预编译路径添加到 application.rb。

我认为这个想法是一般的，您应该使用带有 CDN 的 BigVideo，而不是从 rails 应用程序本身提供它 - 类似于为什么在 rails 中建议将文件上传卸载到 S3 等。

【讨论】：

请问您使用什么视频编辑器来组合剪辑？我正在创建与您的示例类似的东西，但是每次我合并剪辑时，bigvideo 都会在纠正自身之前将视频的开头呈现为非常像素化。
我没有创建视频，我在这里使用了来自您 onepager 的源代码中的视频：itsplatonic.com/OnePager（第 79 行）。很遗憾，帮不了你！
哈哈。希望我可以删除该评论...不过感谢您的帮助。

【解决方案2】：

如果 js 正常工作，您的文件将正确呈现，以防您将它们放入 app/assets/images 目录并将它们包含到 js 中，如下所示

BV.show('assets/yay.jpg');
  } else {
BV.show('assets/test.mp4',{ambient:true});

【讨论】：

不幸的是，实现也没有显示。
JS 在 Rails 之外工作。在 Rails 中，我能够验证的只是文件似乎正确提取（使用 chrome 上的“查看源代码”）。
如果不能渲染 js 本身而是 js.erb，或者 js 在 html.erb 里面，那就试试<%= asset_path 'yay.jpg' %>
其他观察是您的 js 没有 $(function() {[your js]}); 包装器...（根据此处的初始设置 sn-p dfcb.github.io/BigVideo.js）
鉴于指向网络托管文件（而不是本地文件）不起作用，我不认为资产路径是问题，而是资产/javascripts 轨道内的配置。我确实尝试插入包装器。不确定它会有什么功能（它没有在运行良好的非rails版本中使用）。

【解决方案3】：

另一种方式：

将这些（必需的）代码行添加到您的 application.html.erb 文件中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.11.3/video.js">  </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/BigVideo.js/1.1.5/lib/bigvideo.js"></script>

然后是 Scott 上面包含的代码

<script>
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show("<%= request.protocol + request.host_with_port + asset_path('main-video.mp4') %>",{ambient:true});
});
</script>

...然后最终决定以更好的方式来做这件事，因为这至少会让事情顺利进行。

【讨论】：