5

Rails プロジェクトの外部で完全に機能する bigvideo.js の次の実装があります。

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

実装を機能させるにはどうすればよいですか? Rails の外部で動作する様子は、こちらで確認できます。

4

3 に答える 3

4

BigVideo を rails で動作させることができました。これが最も理想的な修正であるかどうかはわかりませんが、動画の完全な 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>

サンプルアプリを用意しましたので、ご覧ください。それはここにあります（注：私はあなたの1ページの例にある程度忠実であるように努めましたが、まったく同じではありません）：

http://bigvideo.herokuapp.com/

作成に使用したコードもここで確認できます。

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

また、ビデオを独自のディレクトリ (assets/videos) に配置し、プリコンパイルされたパスも追加するなど、いくつかの楽しいことを行いましたapplication.rb。

一般的には、BigVideo を CDN で使用し、Rails アプリ自体から提供するのではなく、S3 などにファイルのアップロードをオフロードすることが Rails で提案されているのと同様に考えるべきだと思います。

于 2013-07-10T21:26:51.173 に答える
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>

そして、上に含まれるスコットのコード

<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 に答える
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 に答える