JW-Player 和 Rails 3.2答案

【问题标题】：JW-Player and Rails 3.2JW-Player 和 Rails 3.2
【发布时间】：2012-12-11 18:07:11
【问题描述】：

我正在尝试在我的应用程序中使用 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。

【问题讨论】：

标签： ruby-on-rails media-player jwplayer

【解决方案1】：

在实现 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 许可证允许进行如下修改： “改编出版商应被允许为行使其在本服务条款下的权利而进行合理必要的改编，例如将产品整合到出版商的网站或其他财产中的改编。出版商创建的所有改编作品都严格供其自己使用，出版商不得分发其创建的任何改编作品。公司保留自行决定禁止使用任何改编作品的权利。”

【讨论】：

【解决方案2】：

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

你可以看到仓库here。

以下说明直接来自上面的回购。

要将此 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}) %>

更多定制信息请见here。

到目前为止，它对我来说非常有用，但如果您发现问题，请在此处或 github 告诉我。

【讨论】：

【解决方案3】：

我已经找到了解决办法。

您需要解决的主要问题是 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 同步和不同步。

【讨论】：

注意：此解决方案不适用于 Rails 4，因为 Rails 4 删除了生成非 md5 资产的“双重编译”（yetimedia.tumblr.com/post/33320732456/…）。我将尝试猴子修补 jwplayer 以使用 html5Path 和 flashPath 配置变量。我会尝试写一篇关于它的博客文章。

【解决方案4】：

这对我有用：

将 jwplayer 文件夹放在 public 中（从长尾视频下载）
像外部脚本一样包含它，而不使用资产管道 (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>

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

从http://www.longtailvideo.com/jw-player/download/下载jwplayer

把这些文件放到特定目录下：-

app/assets/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 部分注册时，您可以获得免费的自托管密钥。

【讨论】：

这不适用于非 HTML5 浏览器，例如IE8，因为需要 jwplayer.html5 会导致 JS 错误。您需要删除jwplayer.html5 的要求。与flashplayer 设置选项类似，有一个html5player 选项，您可以在其中指定jwplayer.html5.js 的资产路径。有关 jwplayer 选项，请参阅 this link。

【解决方案7】：

我也选择了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”。

希望这会有用。

【讨论】：