seanbehan / videojs_rails

Video JS for Rails 3.1 Asset Pipeline

VideoJS for Rails Asset Pipeline

Supports Rails 3.x and 4.x

Installation

Add to your Gemfile

gem 'videojs_rails'

And run bundle to install the library.

bundle

Add the resources to your application.js file

# app/assets/javascripts/application.js
//= require video

And that resource to application.css file

/*
*= require_self
*= require video-js
*/

And to production.rb add this line

config.assets.precompile += %w( video-js.swf vjs.eot vjs.svg vjs.ttf vjs.woff )

In Rails > 4.1 Add this line to config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( video-js.swf vjs.eot vjs.svg vjs.ttf vjs.woff )

Usage

<%= videojs_rails sources: { mp4: "http://domain.com/path/to/video.mp4", webm: "http://another.com/path/to/video.webm"}, setup: "{}", controls: false, width:"400" %>

If you want add a callback if user don't support JavaScript use block with displayed html code:

<%= videojs_rails sources: { mp4: "http://domain.com/path/to/video.mp4", webm: "http://another.com/path/to/video.webm" }, width:"400" do %>
	Please enable <b>JavaScript</b> to see this content.
<%- end %>

Captions

This is currently an experimental function.

<%= videojs_rails sources: { mp4: "http://domain.com/path/to/video.mp4" }, width:"400", captions: { en: { src: "http://domain.com/path/to/captions.vvt", label: "English" }, default_caption_language: :en } %>

Turbolinks

Some of you might want to use VideoJS with Turbolinks. andrkrn provided CoffeeScript that he use:

change = ->
    for player in document.getElementsByClassName 'video-js'
        video = videojs('example_video')

before_change = ->
    for player in document.getElementsByClassName 'video-js'
        video = videojs('example_video')
        video.dispose()

$(document).on('page:before-unload', before_change)
$(document).on('page:change', change)

Resources

http://videojs.com/ http://videojs.com/#getting-started

Updating this gem to the latest video.js release

Clone this repository

git clone https://github.com/seanbehan/videojs_rails.git

Clone video.js repository

git clone https://github.com/videojs/video.js.git

Run the rake videojs:update task with the tag

TAG=v4.12.5
rake videojs:update

Note: The build will fail if you don't have grunt installed. To install it:

cd ../video.js
npm install -g grunt

Make sure everything is added to git

git add .
git ci -m "Update to $TAG"

Push to rubygems

• $VIDEO_JS_RAILS_HOME/vendor/assets/javascripts/video.js.erb
• $VIDEO_JS_RAILS_HOME/vendor/assets/stylesheets/video-js.css.erb

Alternatively, you can set the Flash player SWF file in your web view with the videojs.options.flash.swf command:

<script>
  videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>

As the instructions here suggests: https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md#self-hosted

videojs_rails's Issues

License?

I'm doing a license audit for another project and I saw this repository doesn't have one included. Would you mind including a license in this gem?

Thanks!

Not able to add controls and unset preload

I am trying -

<%= videojs_rails sources: { mp4: "url", webm: "url", ogg: "url" },
                                     controls: true,
                                     "data-setup"  => '{ "controls": true, "autoplay": false, "preload":  false }',
                                     poster: image_path("url") %>

Options taken from video js readme

I tried different possible combinations but it doesn't seem to work. I hope its possible to configure these values.

Please update videojs version to 3.0b or at least 2.0.3

Please update videojs version to 3.0b or at least 2.0.3

Not working with turbolinks

allow option for preload

currently this is set to 'auto'

vjs.woff will not be served

I just did a fresh install of this gem on a rails4 project and I'm getting this error on my view:

Asset filtered out and will not be served: add `Rails.application.config.assets.precompile += %w( vjs.woff )` to `config/initializers/assets.rb` and restart your server

Please publish a new version to rubygems.

It's been a couple of years.

Type on styling?

Hi,

I feel like this has a typo which is making some of my styling break

https://github.com/seanbehan/videojs_rails/blob/master/lib/videojs_rails/view_helpers.rb#L18

shouldn't it be

options[:class] = [options[:class], "video-js vjs-default-skin"].join(' ')

not

options[:class] = [options[:class], "vide-js vjs-default-skin"].join(' ')

(video-js not vide-js)

thanks

No video showing

Hello. I have implemented the gem as you said. But when I tried to view one theirs no video that is showing just a sound. But it is working in full screen.

Incorrect attribute example in README

In Usage paragraph some of the attributes are incorrectly wrapped into video sources hash.

how to install videojs-youtube plugin correctly?

1. I downloaded Youtube.js into app/assets/javascripts folder.
2. add //= require Youtube in app/assets/javascripts/application.js file right after //= require video

however, it keeps telling me Uncaught TypeError: videojs.getComponent is not a function unless I put a video.js in app/assets/javascripts folder. Isn't this video.js duplicated??

VideoJS 4.5.0 is available

It seems to be a stable, non code breaking release so if you would be so kind as to update the gem to it I'm sure a lot of people would be happy (myself included).

Release post:
http://blog.videojs.com/post/80918861872/video-js-version-4-5-0-released-nothing-to-see-here

Thanks for your hard work making this

Is this repo abandoned?

Hi @seanbehan

Just wondering if this repo is abandoned, or if you're willing to take PRs to get a license figured out as well as getting the version up to date?

Or if you'd be open to maintainer help so we can get this up to date and an updated version pushed to rubygems?

thanks!

<div class="video-js-box"> will distort some css rules

I am having some problems with videojs_rails adding the

surrounding the video. That means that there isn't a one to one correspondance between what the old video tag would output:

<video id="video" class="video-js vjs-default-skin" controls preload="none" width="700" height="400" poster="" data-setup="{}">
  <source src="http://cdn.example.com/test.mp4" type="video/mp4" />


</video>

And what videojs_rails will output:

<div class="video-js-box">
  <video id="" class=" video-js vjs-default-skin" controls preload="auto" width="700" height="400" poster="" data-setup="{}">
    <source src="http://cdn.example.com/test.mp4" type='video/mp4' />
    <source src="" type='video/webm' />
    <source src="" type='video/ogg' />
  </video>
</div>

Which causes some css rules to not apply. If it were only my own css rules, I could just change them, but there are some computed css rules which are causing the problem. The rules that would try to center the big initial play button in the video frame.

:controls => true renders meaningless

As by the usage example in the README, controls => false|true has absolutely no impact on controls.

Version used: 4.6.1.

Please update version of gem on rubygems.org

https://rubygems.org/gems/videojs_rails

Current version:

videojs_rails 4.6.1

Plugins?

Can I add some of the available plugins for video.js (https://github.com/videojs/video.js/wiki/Plugins) in my rails project? If so, how to do that?

Please update your readme

Hi there,

It's a great idea for a gem, but I'm struggling to get it working. Any chance of adding basic usage instructions to the readme?

From looking at the code, I think I should be doing this....

= videojs_rails(:source => video_url)

But it doesn't work :-(
All the HTML is there, but the video doesn't play. I know the URL is ok, because it appears underneath as a working download link.

Many thanks,
Graeme