Rendering a background using bigvideo.js within a Rails application

Question

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.

Answer 1

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.