VideoEasy + Subtitles

VideoEasy + Subtitles

by Björn Fisseler -
Number of replies: 14
Hi,

I'm trying to modify the VideoEasy template for the mediaelement.js player. My goal is to integrate captions that are provided together with the video url. I read in the VideoEasy documentation that it's possible to define your own custom variables. So I modified the template use a variable called "CC" for the caption file. It currently looks like this:

<video id="@@AUTOID@@" src="@@VIDEOURL@@" width="@@WIDTH@@" height="@@HEIGHT@@">
<track kind="subtitles" src="@@CC@@" />
</video>

Now lets say the video provided as follows: 
<a href="myvideo.mp4">Video 1.1</a>
, thus the VE replaces the <a>-Element with the mediaelement player. Now I want to specify a file with the captions, e.g.: 
<a href="myvideo.mp4?CC=http://fullurl.to/mycaptions.vtt">Video 1.1</a>
This should be translated into something like:
<video src="myvideo.mp4">
    <track kind="subtitles" src="http://fullurl.to/mycaptions.vtt" />
</video>

The problem is that this doesn't work. What am I doing wrong? How can I specify a custom variable in the URL and use it in the VE templates?

Kind regards
Average of ratings: -
In reply to Björn Fisseler

Re: VideoEasy + Subtitles

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

It really should work like that, ie params that are passed in are matched with variables. But right now that is not implemented. I will do it soon I promise.

For VideoEasy currently, you should use the inbuilt variables to build the URL to the  subtitle file. So you would probably put all the subtitle files in the same directory as the videofile. And you would name the subtitle file with the same basename as the video file.

e.g

<video id="@@AUTOID@@" src="@@VIDEOURL@@" width="@@WIDTH@@" height="@@HEIGHT@@">
<track kind="subtitles" src="@@URLSTUB@@.vtt" />
</video>

 Or you could put all the subtitle files in a special directory and put the url to that directory into the template.

e.g

<video id="@@AUTOID@@" src="@@VIDEOURL@@" width="@@WIDTH@@" height="@@HEIGHT@@">
<track kind="subtitles" src="http://www.aserver.com/subtitles/@@FILENAME@@.vtt" />
</video>

Average of ratings: -
In reply to Justin Hunt

Re: VideoEasy + Subtitles

by Björn Fisseler -

Thank you, Justin.

The URLSTUB would be one solution, but I currently prefer your second suggestion.

Regards

Average of ratings: -
In reply to Justin Hunt

Re: VideoEasy + Subtitles

by Ludovic Lebleu -

Hello Justin,


Thank you for this, I'm trying to do the same thing, into a BOOK activity, using Video JS.

I'm using the second option, my code looks like this:


<video id="fv_1441583504636953157" class="video-js vjs-default-skin" controls preload="auto" width="1024" height="576"   data-setup='{"example_option":true}'>

<source src="http://server.org/online/pluginfile.php/14023/mod_book/chapter/1651/HD00201_L01_03.mp4" type="video/mp4" />

<track kind="captions" src="http://www.server.org/online/subtitles/HD00201_L01_03.vtt" label="esp" default="default"></track>

</video>


I'm sure the vtt file is there, and the file is right. BUT the video won't show the captions. 


I even did a HARD URL in the VE settings, under Video JS: 

<video id="@@AUTOID@@" class="video-js vjs-default-skin" controls preload="auto" width="@@WIDTH@@" height="@@HEIGHT@@"   data-setup='{"example_option":true}'><source src="@@VIDEOURL@@" type="@@AUTOMIME@@" /><track kind="captions" src="http://www.server.org/online/subtitles/HD00201_L01_03.vtt" label="esp" default="default"></track></video>


What am I missing?

Thank you!



Average of ratings: -
In reply to Ludovic Lebleu

Re: VideoEasy + Subtitles

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

The code looks fine, though I suppose there could be a typo or something.

The first thing that I would check is if the browser is actually requesting the subtitle file.
On Google chrome that would involve, from the browser console, check the "network" tab and look for the request. 


  • If you don't see a request, then somehow the track tag you added is not being picked up.
  • If you see the request, but it returned an error, then the url is incorrect or there is some permissions problem
  • If the you see the request and the vtt file was retrieved ok, but the subtitles don't show, then probably the vtt file is poorly formatted.
Average of ratings: -
In reply to Justin Hunt

Re: VideoEasy + Subtitles

by Ludovic Lebleu -

Wow, you really know how to narrow it down smile !!

Console shows an error, you're right:


XMLHttpRequest cannot load http:// www.domain.org/online/subtitles/HD00201_L01_03.vtt. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://domain.org' is therefore not allowed access.

view.php?id=13074&chapterid=1651:1


How can I fix that? Is that folder permissions ?


Thank you so much for your help.

Average of ratings: -
In reply to Ludovic Lebleu

Re: VideoEasy + Subtitles

by Ludovic Lebleu -

I tried setting both the folder and the file 0777 and it didn't fix the problem.


What should I do?

Average of ratings: -
In reply to Ludovic Lebleu

Re: VideoEasy + Subtitles

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

It looks like you are calling the video file from one domain, but the subtitles from another. Make sure that both domains are the same. eg www.domain.org is not the same as domain.org. 

So moodle, the video and the subtitle files need to be all using the same domain. Then this error should go away.



Average of ratings: -
In reply to Ludovic Lebleu

Re: VideoEasy + Subtitles

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

It looks like you are calling the video file from one domain, but the subtitles from another. Make sure that both domains are the same. eg www.domain.org is not the same as domain.org. 

So moodle, the video and the subtitle files need to be all using the same domain. Then this error should go away.



Average of ratings: -
In reply to Justin Hunt

Re: VideoEasy + Subtitles

by Ludovic Lebleu -

You completely got it, I couldn't find it on my own, NOT A CHANCE !

Wouldn't even know where to start looking... thank you so much!


Now I'm able to pick the subs from the HARD URL I put on settings.

I tried your code, with the @@FILENAME@@.vtt solution (with the @@FILENAME@@ variable).

The problem is that the filename includes the .mp4 extension, so it doesn't work.

I think this is the last thing I need to make everything work smile

- How can I call the FILENAME without the extension?


Thank you again!


Average of ratings: -
In reply to Ludovic Lebleu

Re: VideoEasy + Subtitles

by Ludovic Lebleu -

No, it actually works with the .mp4.vtt extension... Nevermind smile 

Average of ratings: -
In reply to Ludovic Lebleu

Re: VideoEasy + Subtitles

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Glad you got it. 

We need a FILENAMESTUB variable, don't we? I will add that soon.

Average of ratings: -
In reply to Justin Hunt

Re: VideoEasy + Subtitles

by Ludovic Lebleu -
Hello,


In order to use @@URLSTUB@@, how do you "put all the subtitle files in the same directory as the videofile" ?


By checking on the source code, I get an URL like this: http:// server.org/online/pluginfile.php/14023/mod_book/chapter/1651/HD00201_L01_03.mp4


What is this URL exactly?  How can I FTP the subs files into it?


Thank you!




Average of ratings: -
In reply to Ludovic Lebleu

Re: VideoEasy + Subtitles

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

The @@URLSTUB@@ method won't work very easily with files that are stored in the Moodle files area. For the reason you have spotted. You also need to upload the .vtt file into the same files area. If you can do that it will work. But you can't FTP into it. Thats why having a separate subtitles directory is the simplest way to manage this.

Average of ratings: -
In reply to Björn Fisseler

Re: VideoEasy + Subtitles

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I added the feature the other day that Bjorn wanted. Now parameters to the media url get mapped to variables in the various parts of the template.

e.g

<a href="http://bigvideoboomboom.tv/funny.mp4?color=green">Funny Video</a>

Would map to a variable @@color@@ in the template and could be used to make the player color customizable from each video url.

At the same time I also added  course id and course context id variables. Respectively these are:

@@COURSEID@@

and 

@@COURSECONTEXTID@@


Average of ratings: -