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” }, width:“640”, height:“400”
%>
and
<%= videojs_rails sources: { mp4: “assets/video/test-meeting.m4v”},
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?
On May 22, 2014, at 10:39 PM, Pierre-Andre M. wrote:
//= require video-js << is set in application.js
and
I installed the gem however the libraries are not showing.
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.
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
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();
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
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>
Video.JS Example
I then referenced the file using a tag in my /view like this:
<% javascript_include_tag “play_time” %>
Nothing renders?!!!
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
On Wed, May 28, 2014 at 12:22 PM, Pierre-Andre M. [email protected]
wrote:
<body>
<source
src=“http://video-js.zencoder.com/oceans-clip.ogv” type=‘video/ogg’ />
Bad news: that’s not javascript 
–
Hassan S. ------------------------ [email protected]
twitter: @hassan
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
On Wed, May 28, 2014 at 1:01 PM, Pierre-Andre M. [email protected]
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…
–
Hassan S. ------------------------ [email protected]
twitter: @hassan
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:
Video.js | HTML5 Video Player
<source src="/assets/test-meeting.m4v" type='video/mp4' />
<% javascript_include_tag “play_time” %>
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…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.
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
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.
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:
Video.js | HTML5 Video Player
<source src="/assets/test-meeting.m4v" type='video/mp4' />
<% javascript_include_tag “play_time” %>
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]
On Jun 6, 2014, at 2:13 PM, Pierre-Andre M. wrote:
}
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