Question

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

Answer 1

在实现JWPlayer 6.6时，我们站在选择将jwplayer.flash.swf文件放入公共文件夹之前，使闪存模式正常工作，但将文件分开就好了。我最终做的是让它在开发和生产方面都有用：

将所有3个文件放入vendor / assets / javascripts / jwplayer
将jwplayer.js重命名为jwplayer.js.erb
在jwplayer.js.erb中，像这样更新flash文件路径配置（带有html5文件路径配置的第1行仅供参考）
```
j={type:"html5",src:e.base+"jwplayer.html5.js"},
b={type:"flash",src:"<%= asset_path('jwplayer/jwplayer.flash.swf') %>"};
```
（注意＆＃34; e.base +＆＃34;在删除路径之前的flash文件路径 - 这是允许在开发环境中工作相对路径的技巧）

据我了解，JWPlayer许可证允许这样的修改：＆＃34;改编出于行使其在本服务条款下的权利的目的，允许出版商进行合理必要的修改，例如将产品集成到出版商网站或其他财产中的修改。 Publisher创建的所有Adaptations都严格用于自己的使用，并禁止发布者分发它创建的任何适应。公司保留自行决定禁止使用任何适应的权利。＆＃34;

Answer 2

我刚刚完成了由choix启动的一个gem，并由mattherick改进了一个名为jwplayer-rails的东西，可能适用于旧版本的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。

Answer 3

我找到了解决方案。

你需要解决的主要问题是jwplayer.js想要根据jwplayer.js的路径获取jwplayer.flash.swf和jwplayer.html5.js。

您可以在Chrome开发者工具栏中看到jwplayer.js（带漂亮的打印件）：

(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和不使用md5同步文件。

Answer 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>

Answer 5

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

Answer 6

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

下载jwplayer

将这些文件放入特定目录： -

应用程序/资产/ jwplayer / jwplayer.flash.swf
供应商/资产/ Javascript角/ jwplayer.js
供应商/资产/ Javascript角/ 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您可以从获取许可密钥部分获取免费自托管密钥。

Answer 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”。

希望这会有用。

JW-Player和Rails 3.2

7 个答案: