3

アプリケーションで JW-Player を使用しようとしています。この問題を少し調べてみると、gem を生成する試みがいくつか放棄されているようで、最新のものは文書化されていません。だから、ここに私がそれについて行く方法があります：

JW-Player バージョン 6 をダウンロードし、次のように /app/assets/javascripts ディレクトリにファイルを解凍してコピーしました。

app/assets/javascripts/jwplayer/jwplayer.js
app/assets/javascripts/jwplayer.html5.js
app/assets/javascripts/jwplayer.flash.swf

私の app/views/layouts/application.html.erb には、次のものがあります。

<head>
    <%= javascript_include_tag "/assets/javascripts/jwplayer/" %>
</head>

app/views/pages/about.html.erb には、次のものがあります。

<%= jw_player("http://xxxxx/video.mp4",
            :width => 200, :height => 110) %>

[About] ページのリンクをクリックすると、次のようになります。

Showing xxxxxxxx/app/views/pages/about.html.erb where line #10 raised:

undefined method `jw_player' for #<#<Class:0x007fe77e37c018>:0x007fe780c1f678>

JW-Playerを初めて利用する方。

4

7 に答える 7

4

JWPlayer 6.6 を実装する際に、jwplayer.flash.swf ファイルをパブリック フォルダーに配置してフラッシュ モードを機能させるという選択を迫られましたが、このようにファイルを分離するのは非常に面倒でした。開発と本番の両方で機能させるために最終的に行ったことは次のとおりです。

  • 3 つのファイルすべてを vendor/assets/javascripts/jwplayer に配置します
  • jwplayer.js の名前を jwplayer.js.erb に変更します

  • jwplayer.js.erb 内で、フラッシュ ファイル パス構成を次のように更新します (html5 ファイル パス構成の 1 行目は参考用です)。

    j={type:"html5",src:e.base+"jwplayer.html5.js"},
b={type:"flash",src:"<%= asset_path('jwplayer/jwplayer.flash.swf') %>"};

    (パスの前の「e.base+」はフラッシュ ファイル パスから削除されていることに注意してください。これは、開発環境で相対パスを使用できるようにするトリックです)

私の理解では、JWPlayer ライセンスでは次のような変更が許可されています。パブリッシャーによって作成されたすべての適応は、厳密に独自の使用を目的としており、パブリッシャーは、作成した適応を配布することを禁止されています.当社は、独自の裁量により、適応の使用を禁止する権利を留保します。

于 2014-03-14T05:05:34.703 に答える
2

choixによって開始され、おそらく古いバージョンの Rails で動作する jwplayer-rails と呼ばれる mattherickによって改善された gem の作業を終えたところです。アセット パイプラインでは機能していませんでしたが、mattherick はそれを修正するのに素晴らしい仕事をしてくれたので、JWPlayer を最新バージョンに更新しました。

ここでレポジトリを見ることができます。

次の手順は、上記のレポから直接引用したものです。

この gem を Rails アプリに追加するには、次の行をアプリケーションの Gemfile に追加します。

gem 'jwplayer-rails', :git => 'git://github.com/dutgriff/jwplayer-rails.git'

それを使用するには、最初にページにアセットを含めます

<%= jwplayer_assets %>

次に、JW Player で div を配置します

<%= jwplayer %>

オプションを jwplayer ヘルパーに渡してカスタマイズできます。

<%= jwplayer({width: 500, height: 200}) %>

カスタマイズの詳細については、こちらを参照してください。

これまでのところうまく機能していますが、問題が見つかった場合は、こちらまたはgithubでお知らせください。

于 2014-04-10T17:52:48.263 に答える
1

これに対する解決策を見つけました。

回避する必要がある主な問題は、jwplayer.js が jwplayer.js のパスに基づいて jwplayer.flash.swf と jwplayer.html5.js を取得しようとしていることです。

jwplayer.js の Chrome 開発者ツールバーで確認できます (プリティ プリント付き):

(h.embed.config = function(b) {
    var e = {fallback: !0,height: 270,primary: "html5",width: 480,base: b.base ? b.base : j.getScriptPath("jwplayer.js"),aspectratio: ""};
    b = j.extend(e, h.defaults, b);
    var e = {type: "html5",src: b.base + "jwplayer.html5.js"}, 
    g = {type: "flash",src: b.base + "jwplayer.flash.swf"};

このbaseプロパティを文書化されていない API として使用して、jwplayer.flash.swf と jwplayer.html5.js が見つかる場所を jwplayer に伝えることができます。

例：

jwplayer("player-id").setup({
    width: 640,
    height: 480,
    file: "www.w3schools.com/html/movie.mp4",
    base: "http://cloudfront.net/assets/vendor/jwplayer/"
};

次に、 を探しますhttp://cloudfront.net/assets/vendor/jwplayer/jwplayer.flash.swf。注: jwplayer にはアセット パイプラインのフィンガープリント ファイル名の概念がないため、md5 を使用する場合と使用しない場合の両方のファイルを同期するようにしてください。

于 2014-07-23T18:46:21.003 に答える
0

これは私のために働いた：

  • jwplayerフォルダーを公開します（ロングテールビデオからダウンロード）

  • アセットパイプライン（HAML）を使用せずに、外部スクリプトのように含めます。

    %script{:src => '/jwplayer/jwplayer.js'}

  • あなたのビデオパーシャル（ERB）

    <script type="text/javascript">
jwplayer.key="Your key here";
$(document).ready(function(){
    jwplayer("video").setup({
        height: 360,
        width: 640,
        playlist: [
        <% videos.each do |v| %>
            {
                image: "<%= v.poster %>",
                sources: [
                    { file: "<%= v.url %>" },
                ]
            },
        <% end %>
        ]
    });
 })
</script>

<video id="video">Video Loading... Ensure JavaScript is enabled...</video>
于 2013-01-11T16:43:50.010 に答える
0

私もJWplayerを選びました。

これが私の手順です。

https://github.com/choix/jwplayer-rails gemを使用しています。

追加した

 gem 'jwplayer-rails', '1.0.1'

私のGemfileに。

上記のページからすべてのことを行いました。show.html.slim ビュー ファイルには、次の行が含まれていました。

   = jwplayer_assets
   br
   br
   = jwplayer({file:@lesson.media_file})

lesson.media_file 属性には、ファイルの場所が含まれています。ビデオ ファイル project/public/videos/ videoclip.webm の場合、media_file には文字列 "/videos/videoclip.webm" が含まれます。

これが役立つことを願っています。

于 2013-10-16T12:43:38.543 に答える
0

プレーヤーをダウンロードしてレイアウトに含めた後、サーバーを再起動しましたか。これが失敗の原因の 1 つになる可能性があります。

于 2013-03-02T18:59:05.933 に答える
0

http://www.longtailvideo.com/jw-player/download/から jwplayer をダウンロードします。

これらのファイルを特定のディレクトリに置きます:-

  • アプリ/アセット/jwplayer/jwplayer.flash.swf
  • ベンダー/資産/javascripts/jwplayer.js
  • ベンダー/資産/javascripts/jwplayer.html5.js

次に、これらの行をapplication.jsに追加します

//= require jwplayer
//= require jwplayer.html5

ビデオを再生しているページで、これらの行を追加します

<script type="text/javascript">jwplayer.key="YOUR_JWPLAYER_KEY";</script>
<div id="video">Loading the player ...</div>
<script type="text/javascript">
jwplayer("video").setup({
    flashplayer: "<%=asset_path('jwplayer.flash.swf')%>",
    file: "<%= file_path %>",
    height: 360,
    width: 640,
    analytics: {
        enabled: false,
       cookies: false
   }
});

http://account.longtailvideo.com/#/homeで、 Get Your License Key部分からサインアップして無料のセルフ ホスト キーを取得できます。

于 2013-05-29T15:08:15.340 に答える