videojs and rails

rubyonrails-talk
1

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&quot; }, width:"640", height:"400" %>

and

<%= videojs_rails sources: { mp4: "assets/video/test-meeting.m4v", webm: "http://another.com/path/to/video.webm&quot; }, 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?

2

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&quot; }, width:"640", height:"400" %>

and

<%= videojs_rails sources: { mp4: "assets/video/test-meeting.m4v", webm: "http://another.com/path/to/video.webm&quot; }, 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?

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

3

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();

4

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

5

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&quot;                 data-setup='{"controls":true}'>                     <source src="http://video-js.zencoder.com/oceans-clip.mp4&quot; type='video/mp4' />                     <source src="http://video-js.zencoder.com/oceans-clip.webm&quot; type='video/webm' />                     <source src="http://video-js.zencoder.com/oceans-clip.ogv&quot; 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?!!!

6

Bad news: that's not javascript :slight_smile:

7

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&quot;          data-setup="{}">

8

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

9

? It appears to already be there...

10

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&quot;          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.

11

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

12

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.

13

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.

14

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&quot;          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]

15

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&quot;         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]

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