Question

我的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时，它不会渲染图像或视频 - 我有资产/ javascripts中的所有javascript文件。它们似乎正在拉动。
- Application.js不受影响，包括// = require_tree。
- 对于自定义JS（上面显示js代码的那个），我目前将它作为资产/ javascripts中的JS文件。我已经尝试将相关的图像/视频文件放在文件夹中，更改文件的网址路径，并命名为.html.erb并使用ruby片段，但都没有成功。

如何让我的实施工作？你可以看到它在Rails here之外工作。

Answer 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。

我认为这个想法一般来说，你应该将BigVideo与CDN一起使用，而不是从rails app本身提供它 - 类似于为什么在rails中建议将文件上传卸载到S3等等。

Answer 2

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

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

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

...然后最终决定以更好的方式做到这一点，因为这将使事情起作用。

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

3 个答案: