JW-Player and Rails 3.2

问题

I'm trying to use JW-Player in my application. Researching the issue a bit, there seems to be several abandoned efforts to produce a gem, and the latest is undocumented. So, here's how I'm going about it:

I downloaded the JW-Player version 6, unzipped and copied the files in my /app/assets/javascripts directory as follows:

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

In my app/views/layouts/application.html.erb, I have the following:

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

and in app/views/pages/about.html.erb, I have the following:

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

Here's what happens when I click on the About page link:

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

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

First time user of JW-Player.

回答1:

When implementing JWPlayer 6.6, we stood before the choice of putting the jwplayer.flash.swf file into the public folder, to make the flash mode work, but it seemed very messy to have the files separated like that. What I did in the end to make it work both on development and production was:

Put all 3 files to vendor/assets/javascripts/jwplayer
Rename jwplayer.js to jwplayer.js.erb
Inside jwplayer.js.erb, update the flash file path config like this (the 1st line with the html5 file path config is just for reference)
```
j={type:"html5",src:e.base+"jwplayer.html5.js"},
b={type:"flash",src:"<%= asset_path('jwplayer/jwplayer.flash.swf') %>"};
```
(note that the "e.base+" before the path was removed for the flash file path - that's the trick that allowed working relative paths in the development environemtn)

In my understanding, the JWPlayer license allows modifications like this: "Adaptations Publisher shall be permitted to make Adaptations reasonably necessary for the purpose of exercising its rights under these Terms of Service, such as Adaptations to integrate the Products into Publisher’s websites or other properties. All Adaptations created by Publisher are strictly for its own Use and Publisher is prohibited from Distributing any Adaptation it creates. The Company reserves the right to prohibit the Use of any Adaptation in its sole discretion."

回答2:

I have just finished working on a gem started by choix and improved by mattherick called jwplayer-rails that probably worked in older version of rails. It wasn't working with the assets pipeline but mattherick did a great job at fixing that up and I went on to update JWPlayer to the newest version.

You can see the repository here.

The following instructions are right out of the repo above.

To add this gem to your rails app just add this line to your application's Gemfile:

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

To use it first include assets on the page

<%= jwplayer_assets %>

Then place a div with JW Player

<%= jwplayer %>

You can pass options to jwplayer helper to customize it:

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

More information for customization could be found here.

It works great for me so far but if you find an issue let me know on here or github.

回答3:

I've found a solution to this.

The main issue you need to work-around is that jwplayer.js wants to fetch jwplayer.flash.swf and jwplayer.html5.js based on the path of jwplayer.js.

You can see that in Chrome Developer Toolbar for jwplayer.js (with pretty print):

(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"};

You can use that base property as an undocumented api to tell jwplayer where the jwplayer.flash.swf and jwplayer.html5.js can be found.

Example:

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

Then it will look for http://cloudfront.net/assets/vendor/jwplayer/jwplayer.flash.swf. Note: jwplayer has no notion of the asset pipeline fingerprint filenames, so make sure you sync both the file with md5 and without.

回答4:

This worked for me:

Place jwplayer folder in public (Downloaded from longtail video)
Include it like an external script, without using asset pipeline (HAML).
```
%script{:src => '/jwplayer/jwplayer.js'}
```

In your video partial (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:

Did you restart the server after downloading the player and including it in your layouts. This could be one reason of failure.

回答6:

Download jwplayer from http://www.longtailvideo.com/jw-player/download/

Put these files to the particular directory:-

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

Then add these line in application.js

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

On the page where you are playing video, add these lines

<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 from where you can get your free self hosted key in signing up from Get Your License Key portion.

回答7:

I also chose JWplayer.

Here are my steps.

I'm using https://github.com/choix/jwplayer-rails gem.

Added

 gem 'jwplayer-rails', '1.0.1'

to my Gemfile.

Did all things from above page; in a show.html.slim view file included these lines:

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

lesson.media_file attribute contains file location. For a video file project/public/videos/videoclip.webm, media_file contains string "/videos/videoclip.webm".

Hope this will be useful.

来源：https://stackoverflow.com/questions/13825970/jw-player-and-rails-3-2

标签

ruby-on-rails

media-player

jwplayer