5

我有以下 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​​ 片段，但均未成功。

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

4

3 回答 3

4

我能够让 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。

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

于 2013-07-10T21:26:51.173 回答
0

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

BV.show('assets/yay.jpg');
  } else {
BV.show('assets/test.mp4',{ambient:true});
于 2013-07-02T17:45:37.877 回答
0

其他方式：

将这些（必需的）代码行添加到您的 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>

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

于 2016-08-16T14:53:19.623 回答