videojs and rails

[Pierre-Andre M.]

I am trying to get videojs to play a local video file within rails.
I am using the video.js library
I have tried 2 different gems (github: seanbehan/videojs and
alexesDev/videojs)
I have tried in line javascript
I have tried precompiling the video as an asset by placing in
assets/video/test-meeting.m4v

config.serve_static_assets = true << is set in production.rb
*= require video-js << is set in application.css
//= require video-js << is set in application.js


When trying seanbehans gem:

in my view file I have tried the following

<%= videojs_rails sources: { mp4:
"file:///app/assets/video/test-meeting.m4v", webm:
"http://another.com/path/to/video.webm" }, width:"640", height:"400" %>

and

<%= videojs_rails sources: { mp4: "assets/video/test-meeting.m4v", webm:
"http://another.com/path/to/video.webm" }, width:"640", height:"400" %>

When I go to the page nothing renders, just a black box.

However when I use a link to a videofile on the web it works.

with alexesDev gem:

I installed the gem however the libraries are not showing.
when I use:

<%= video_player src: { mp4: '/assets/video/test-meeting.m4v' },
controls: true %>

I get "undefined method `video_player'"

when I use js in line with html and place the library in
assets/javascripts I get a blank black box as well.

Can anyone help?

--
Posted via http://www.ruby-forum.com/.

[Walter Lee Davis]

I haven't tried either of those gems, but I have used VideoJS long-hand in both static HTML pages and Rails. It works pretty well, as long as all of the resources can be found and linked to one another.

I would start in baby steps here. First, put all the assets in the public folder, and hand-code a video tag on your page. Don't include VideoJS yet, simply see if you can get a video to display on your page. You may need to fiddle with different browsers and formats at this point -- Safari will play MPEG4 video, Chrome wants WebM, Firefox wants OGG or WebM. All of them will benefit from a JPEG poster frame.

There's nothing Rails is doing or not doing at this level that will change that. The video tag is designed to paper over these browser differences, and all that VideoJS does is provide a Flash fallback if someone visits with an elderly IE browser. But you have to start with a properly constructed video tag that plays in some browsers before you can layer on the VideoJS to clean up all differences.

<video id="video_player" controls width="720" height="240" poster="/poster.jpg">
<source src="/video.m4v" type="video/mp4"/>
<source src="/video.webm" type="video/webm"/>
</video>

Fiddle with this basic shell until you can see something on the screen (all that you will need to change are the actual paths to the sources). Once you have it working in some browsers, follow the instructions on the VideoJS documentation site to add the JavaScript and Flash assets to your server and reference them in your page.

Walter

> --
> Posted via http://www.ruby-forum.com/.
>

> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/2b7c3bf332211a1958e5ce3f72957034%40ruby-forum.com.
> For more options, visit https://groups.google.com/d/optout.

[Pierre-Andre M.]

Thanks so much for that feedback. The ONLY reason why I needed to use
videojs is so that I can start and end at a specific time within a
video. Does the built in rails paradigm have this option?

example code:

var endtime = 10505.89+10;
myPlayer= document.getElementById('example_video_1');
myPlayer.addEventListener('loadeddata', function(){
example_video_1.currentTime = 10505.89;
example_video_1.play();
myPlayer.addEventListener('timeupdate', function(){
if (example_video_1.currentTime >= endtime) {
example_video_1.pause();

[Walter Lee Davis]

Anything like that is going to happen in JavaScript, and while Rails has JS helpers all over the place, there's nothing in there that is specific to VideoJS. You should be able to add this script to your page after you get the video to play at all. Just pop it in a script tag underneath the video tag, and make sure that you change the ID of the video (or the reference in the script) so they match. Exactly.

Walter

> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/1f51f8e53b9c657fbda4cf01ff3eeaa4%40ruby-forum.com.

[Pierre-Andre M.]

I tried copy/pasting a sample video.js script straight from tutorial in
a js file titled play_time.js in /assets/javascript that looks like
this:

<!doctype html>
<head>
<title>Video.JS Example</title>
<link href="//vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.1/video.js"></script>
</head>
<body>
<div style="width:700px;margin:0px auto;">
<video id="example_video_1" class="video-js
vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"controls":true}'>
<source
src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source
src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source
src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>
</body>

I then referenced the file using a tag in my /view like this:

<% javascript_include_tag "play_time" %>

Nothing renders?!!!

[Hassan Schroeder]

Bad news: that's not javascript :-)

--
Hassan Schroeder ------------------------ hassan.s...@gmail.com
http://about.me/hassanschroeder
twitter: @hassan

[Pierre-Andre M.]

Understood...

Here is some pure js that I substituted into the file as well and it
does not render either.

var endtime = 10505.89+10;
myPlayer= document.getElementById('example_video_1');
myPlayer.addEventListener('loadeddata', function(){
example_video_1.currentTime = 10505.89;
example_video_1.play();
myPlayer.addEventListener('timeupdate', function(){
if (example_video_1.currentTime >= endtime) {
example_video_1.pause();
}

}, false);

}, false);


My question is, how do I get that elementID through my view back to
this js file?

The video ID is instantiated when I call the video tag in my view

<video id="example_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"

data-setup="{}">

[Walter Lee Davis]

You've already done what you need to do -- you have a matching ID in the view and the JS ('example_video_1'). The only thing you need to ensure now is that you either have an unobtrusive listener function set to encapsulate the VideoJS script, or you load the VideoJS script after the video is on the page, so put that code at the bottom of the page.

An unobtrusive listener would look like this:

document.addEventListener('load', function(){
// your video_js code here
});

That would wait until the entire page had loaded, then fire the script to decorate the video with the alternate playback controls. It's often a better idea to just put the script at the bottom of the page, since that gets around any sort of issues with callbacks and observers not firing for any reason, or stalling the loading of CSS and leading to UX issues.

Walter

> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/2b4ac0090800a8b4a3dbf8b2182f3878%40ruby-forum.com.

[Hassan Schroeder]

On Wed, May 28, 2014 at 1:01 PM, Pierre-Andre M. <li...@ruby-forum.com> wrote:

> myPlayer= document.getElementById('example_video_1');

> My question is, how do I get that elementID through my view back to
> this js file?

> <video id="example_video_1" ...

? It appears to already be there...

[Pierre-Andre M.]

Walter...thanks for your responses!

Do I not already have that here:

myPlayer.addEventListener('loadeddata', function(){...


??

For the record the javascript that i have written there works great
within its own flatfile. I just can't get it to render within rails so
I know the code works...


here is my view:

<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="video-js.css" rel="stylesheet" type="text/css">

</head>
<body>

<video id="example_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">

<source src="/assets/test-meeting.m4v" type='video/mp4' />
</video>

</body>

<% javascript_include_tag "play_time" %>
</html>

and here is my play_time.js:

var endtime = 10505.89+10;
myPlayer= document.getElementById('example_video_1');
myPlayer.addEventListener('loadeddata', function(){
example_video_1.currentTime = 10505.89;
example_video_1.play();
myPlayer.addEventListener('timeupdate', function(){
if (example_video_1.currentTime >= endtime) {
example_video_1.pause();
}

}, false);

}, false);

The video does show up and I can make it play, but this js is supposed
to make it play from that specific time.

[Walter Lee Davis]

Do you have this on a public server somewhere, so we can see it in a browser (and more properly, in a JavaScript debugger)? You have all the piece in place, getting them to work together is an implementation detail and a debugging exercise. You are very close.

Walter

> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/e5f7e39d0b8cb50ca6c75a3acacf4fb5%40ruby-forum.com.

[Pierre-Andre M.]

Walter...I tried my best to get this to some public location to no
avail.

at this point I changed everything to myPlayer

var endtime = 10505.89+10;
myPlayer= document.getElementById('example_video_1');
myPlayer.addEventListener('loadeddata', function(){

myPlayer.currenttime = 10505.89;
myPlayer.play();
myPlayer.addEventListener('timeupdate', function(){
if (myPlayer.currentTime >= endtime) {
myPlayer.pause();
}

}, false);

}, false);

When I use the debugger in Google Chrome I'm no longer getting any
errors...however the script doesn't seem to be executing. In the
javascript console within the browser the only thing I've been able to
get working FOR SURE is myPlayer.play() and myPlayer.pause

When I try myPlayer.currenttime=20 it returns the value "20" but still
wont play at that time. I've been going around in circles on this for
days. very frustrated since it works great outside of rails.

[Pierre-Andre M.]

Wow...I was very close. my issue was currentTime vs currenttime. A
Captial-T was the answer to all my woes.

The lower-case t created a new function (currenttime) that it seemed to
have no idea what to do with other than put the value in it that I
passed.

Any who on to the next challenge.

[Pierre-Andre M.]

Believe it or not I'm still fighting with this thing in the rails
context.

This js works PERFECTLY within its own flat file outside of rails.
However when I try and incorporate it into rails the video starts right
from the beginning, I know someone must have solved this one at some
point:

<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>

<link href="/assets/video-js.css" rel="stylesheet" type="text/css">

</head>
<body>

<video id="example_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">

<source src="/assets/test-meeting.m4v" type='video/mp4' />
</video>

<% javascript_include_tag "play_time" %>

</body>


</html>


Here is play_time.js

var endtime = 10505.89+10;
myPlayer= document.getElementById('example_video_1');
myPlayer.addEventListener('loadeddata', function(){

example_video_1.currentTime = 10505.89;
example_video_1.play();
myPlayer.addEventListener('timeupdate', function(){

if (example_video_1.currentTime >= endtime) {
example_video_1.pause();
}

}, false);

}, false);

Any suggestions? When I use Developer Tools I get:

0: "Video Error"
1: Object
length: 2
__proto__: Array[0]

[Walter Lee Davis]

By any chance, do you have require tree in your application.js file? Your JavaScript may be getting included twice, and in that case, the error may be coming from the first copy of it (compiled into your application.js file). That's worth checking. If the addEventListener function isn't included last, as you do, then the element it is trying to observe doesn't exist yet, and can't be found. I'm not sure what would happen if you included it twice, but this error might be one possible outcome of that.

Walter

> --
> Posted via http://www.ruby-forum.com/.
>

> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/53747ca04a43efe7e3d4643748a9e27b%40ruby-forum.com.