Railsアプリケーション内でbigvideo.jsを使用して背景をレンダリングする

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に変換しようとすると、画像またはビデオのいずれもレンダリングされません。
- すべてのjavascriptファイルがassets/javascriptにあります。彼らは正しく引っ張っているようです。
- Application.jsは変更されておらず、// = require_treeを含みます。
- 上記のjsコードが表示されているカスタムJSの場合、私は現在、assets/javascriptのJSファイルとして持っています。私は関連する画像/ビデオファイルをフォルダに入れて、ファイルのWebアドレスへのパスを変更し、.html.erbという名前を付けてルビースニペットを使用してみましたが、すべて成功しませんでした。

どうすれば実装できますか？あなたはそれがRails hereの外で働いているのを見ることができます。

Answer 1

以下のようなjsファイルにそれらを含める場合には適切にレンダリングされます。私はこれが最も理想的な修正であるかどうかはわかりませんが、ビデオのURLを（<%= 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を使って、レールアプリからそれを提供してはいけないと思っています - S3などのようなものへのファイルのアップロードをオフロードするためにレールに示唆された理由と同様です。

Answer 2

適切にあなたのファイルを作業jsのは、あなたがapp/assets/imagesディレクトリにそれらを入れて、私はBigVideoがレールで動作するように取得することができた

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> 

し、コードスコットは

0上記に含ま

...そして、最終的にはもっと良い方法をとることになります。これは非常に少なくても機能するからです。