在Rails应用程序中使用bigvideo.js渲染背景 [英] Rendering a background using bigvideo.js within a Rails application

问题描述

$ b

 < script src =
 
 modernizr.js>< /脚本> 
< 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代码的那个），我现在将它作为assets / javascripts中的JS文件。我已经尝试将相关的图像/视频文件放入文件夹中，将路径更改为文件的网址，并将其命名为.html.erb并使用ruby代码片段，但都没有成功。

我如何使我的实施工作？您可以在Rails 此处之外看到它的工作方式。

解决方案

div>

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

I have the following implementation of bigvideo.js functioning perfectly outside of my Rails project.

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

However, when I try to translate this to Rails, it will not render either the image or the video.
- I have all javascript files in assets/javascripts. They appear to be pulling correctly.
- Application.js is untouched and includes //= require_tree .
- For the custom JS (the one where the js code is displayed above) I currently have it as a JS file in assets/javascripts. I've tried putting the relevant image/video files in the folder with it, changing the paths to web addresses for the files, and naming it .html.erb and using ruby snippets, all with no success.

How can I make my implementation work? You can see it working outside of Rails here.

解决方案

I was able to get BigVideo to work with rails. I'm not sure if this is the most ideal fix, but if you give the full url for the video (via something like <%= request.protocol + request.host_with_port + asset_path('main-video.mp4') %>) it will load on the page.

So the code I ended up using in the end was:

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

I've set up an example app that you can take a look at. It's located here (note: I tried to remain somewhat faithful to your onepager example, but it's not exactly the same):

http://bigvideo.herokuapp.com/

You can also see the code I used to create it here:

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

I also did some fun stuff like put the video in its own directory (assets/videos), and added the precompiled paths to application.rb as well.

I think the idea is in general, you should use BigVideo with a CDN and not serve it up from the rails app itself -- similar to why it's suggested in rails to offload file uploading to things like S3, etc.

这篇关于在Rails应用程序中使用bigvideo.js渲染背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！