3

我正在尝试在我的应用程序中使用 JW-Player。稍微研究一下这个问题,似乎有几个放弃了生产宝石的努力,最新的没有记录。所以,这就是我要做的事情:

我下载了 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) %>

当我单击“关于”页面链接时,会发生以下情况:

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 文件放入 public 文件夹,以使 flash 模式工作,但这样分离文件似乎很混乱。我最终使它在开发和生产中都起作用的方法是:

  • 将所有 3 个文件放入 vendor/assets/javascripts/jwplayer
  • 将 jwplayer.js 重命名为 jwplayer.js.erb
  • 在 jwplayer.js.erb 中,像这样更新 flash 文件路径配置(html5 文件路径配置的第一行仅供参考)

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

    (请注意,flash 文件路径之前的“e.base+”已被删除 - 这是允许在开发环境中使用相对路径的技巧)

据我了解,JWPlayer 许可允许进行如下修改:“改编出版商应被允许为行使本服务条款下的权利而合理必要地进行改编,例如将产品整合到出版商网站或其他财产中的改编。出版商创建的所有改编作品均严格供其使用,出版商不得分发其创建的任何改编作品。公司保留自行决定禁止使用任何改编作品的权利。

于 2014-03-14T05:05:34.703 回答
2

我刚刚完成了一个由 choix 启动并由mattherick改进的名为 jwplayer-rails 的 gem,它可能适用于旧版本的 rails 它不适用于资产管道,但 mattherick 在修复它方面做得很好,我继续将 JWPlayer 更新到最新版本。

您可以在此处查看存储库。

以下说明就在上面的 repo 中。

要将此 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 在哪里可以找到 jwplayer.flash.swf 和 jwplayer.html5.js。

例子:

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

下载播放器并将其包含在布局中后,您是否重新启动了服务器。这可能是失败的原因之一。

于 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在这里您可以从获取您的许可证密钥部分注册时获得免费的自托管密钥。

于 2013-05-29T15:08:15.340 回答
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})

course.media_file 属性包含文件位置。对于视频文件 project/public/videos/videoclip.webm, media_file 包含字符串“/videos/videoclip.webm”。

希望这会有用。

于 2013-10-16T12:43:38.543 回答