## Activities: Videofile

mod_videofile
Maintained by Jonas Nockert
Easy cross-browser compatibility videos using Video.js.

Videofile is a Moodle 2.4+ resource plugin intended to provide teachers with easy handling of cross-browser compatible videos using Video.js. In most cases it should be enough to add .mp4 video files which will then play in an html5 player in modern browsers and in a flash player in older browsers.

Videofile and Video.js also supports WebVTT captions as well as a poster image that displays before the video is started. It works well with responsive themes.

### Contributors

Jonas Nockert (Lead maintainer)
Please login to view contributors details and/or to contact them

• Thu, Jan 30, 2014, 6:24 AM
A Y, there's no way to do it from within Moodle but I think you should be able to by changing the css of the .vjs-captions class.
• Thu, Jan 30, 2014, 9:51 PM
Thanks Jonas! I know I'm going to have to change this at the css level, I'm just really struggling with "where". I tried making changes to the styles.css and video-js.css files, but my changes dont seem to affect anything. Just trying to figure out where the black background with white text is coming from...
• Thu, Feb 20, 2014, 1:31 AM
Great plugin! We've been looking for something like this for awhile.

One question--I would like to change the default poster image to our school logo. That way, if a teacher doesn't add their own, it will use our branding (the moodle logo would confuse some of our teachers/students). Is that possible?

Also, I noticed that if a user has docked blocks on the left of the page, the videoplayer seems to lose the right margin when it loads (that is, it is no longer centered in the content section of the page). This may just be a problem with the theme we're using; just letting you know in case it was happening for others.

Thanks again!
Matt
• Thu, Feb 27, 2014, 10:53 AM
@Matt Long: just go to mod >> videofile >> pix, and save your logo as "moodle-logo.png", replacing the current one.

Alternatively, you can save a different file, your_logo.png, and modify line 164 of mod >> videofile >> renderer.php accordingly.

Best,
Shutiri
• Thu, Feb 27, 2014, 8:57 PM
Thanks Shutiri! That worked perfectly.

Regards,
Matt
• Thu, Apr 10, 2014, 4:37 PM
@Jonas

As far as I can see, this activity is the only way to get a responsive video player within Moodle out-of-the-box. This is really great! Thanks for this very useful plugin.

I wonder, if it's possible to use the responsive player in a normal html-area of any activity independently from a own resource.
• Fri, May 9, 2014, 2:04 AM
I have same request as Balázs. Instead of the drag and drop folder upload UI, or along side it. I simply want a text field where I can enter the URL of my video. I do not want dozens / hundreds of video files in my moodlefiles folder, possibly gigabytes, being served from my web server. I host my video files elsewhere (AWS/S3) where capacity is much higher and throughput is high. I just need to add URL such as: http://domainame/filename where the file extension determines type.
• Mon, May 26, 2014, 6:24 AM
It's a smooth video player, but is there a way to include it into a lesson instead of as a stand-alone activity?
• Sat, Jun 14, 2014, 2:54 PM
How do i make a video with a URL?
• Thu, Jun 19, 2014, 11:52 PM
Hi Jonas, thank you for the great videofile player! It's exactly what we were looking for to help make our courses responsive with video.

I do have one enhancement request or if this is something you'd rather not implement, perhaps some advice on how to implement it ourselves.

If the video is responsive, it ends up being huge on wide screens, and the width/height are ignored for purposes of setting the size of the window. What we would like to see or do, is if the video is responsive, then to have an option to use width/height as max-width and max-height on the videofile div, in the video-js class. This will put an upper-bound on the video on large screens and also allow it to nicely size down and be still responsive on smaller screens.

This is the line of outputted html I think where the max-width and max-height tags would go: (had to remove the <>'s as it looks like the comment box accepts html!
div id="videofile-2" class="video-js vjs-default-skin vjs-paused vjs-controls-enabled vjs-user-inactive" style="width: 959px; height: 539.4375px;"

If I manually modify this line in Chrome and add max-width and max-height, it seems to work.
It looks like this line is generated in render.php, in the get_video_element_html function on line 177. I'm just not sure how to modify the html_writer::start_tag statement to add the style="max-width:$width; max-height =$height;" statements.
• Fri, Jun 20, 2014, 2:06 AM
That sounds like a great idea, @Mathew. No guarantees but I'll try to get that out next week.
• Fri, Jun 20, 2014, 6:13 AM
Great to hear Jonas! Meanwhile I've put in a workaround where I've tweaked the styles.css to be:
.videofile .video-js {
margin: 0 auto;
max-width: 640px;
max-height: 480px;
}

One problem with my hack I've just discovered is that when I full-screen the HTML5 player, it still listens to the max-width and max-height, making it a floating 640x480 window at the top of the screen, rather than a full-screen window.

I guess this is something to test for if you decide to implement my suggestion.
• Wed, Jun 25, 2014, 10:39 PM
Mathew Gancarz: I've now uploaded a new version. Hopefully the max size works like you wanted. Please let me know if you have any problems with it.

Thanks for the suggestion and also many thanks for the heads up with full screen mode : )
• Fri, Jun 27, 2014, 12:13 AM
Thank you Jonah, testing it and so far it works as expected. Thank you for implementing this so quickly, I'm glad you liked the idea!
• Fri, Jul 11, 2014, 2:54 AM
Jonas, Did you ever implement disabling "download file " from right click?