HTML5 Video Players

HTML5 Video Players

by Justin Hunt -
Number of replies: 16
Picture of Particularly helpful Moodlers Picture of Plugin developers

I have  seen a bit of complaint about Moodle's flowplayer implementations inability to handle MP4 and people struggling to find a solution that fits them. I noted also this tracker issue about  Flowplayer and handling HTML5 video. 

https://tracker.moodle.org/browse/MDL-38158

I humbly suggest that annointing one of the many html5 video players out there as Moodle's chosen, is not the correct approach. The landscape is changing very fast, and people's requirements/preferences are quite different. 

And my own experience with Flowplayer is that the myriad of configuration options it provides is fantastic, but having to write an interface to that in Moodle inevitably leads to dumbing it down and removing options. And having to write an interface to the configurations for each slick new html5 video player is unrealistic, leading to basically pushing one. And relying on 3rd party plugins for the rest. 

Anyway I propose a different approach, we might call a thin layer. We simple parse the media link on the page as we do now, and pass that off to a set of templates for each HTML5 player we support. 

I have written a proof of concept filter that makes a template for each HTML5 video player. The user can select the HTML5 player they want and use it out of the box. Much as they do now. But the templates are also editable by the user. So they can alter it as per the documentation for that particular HTML5 player, to do things like add poster images, change css styles, set to preload, even add event handlers. 

I guess the drawback is that the user needs to have some knowledge of javascript and friends, if they want to alter the default behaviour. But they will always have the nice Moodle forums, and at least they don't have to install or write yet another plugin.

It is called "videoeasy" because, well you know,  "videodifficult" was taken. 

Anyway you can try it out at http://videoeasy.listenninja.com

And it is on GitHub at: https://github.com/justinhunt/moodle-filter_videoeasy

Comments welcome. 

Average of ratings: -
In reply to Justin Hunt

Re: HTML5 Video Players

by Robert Archibald -

Hi Justin,

This is definitely a must for Moodle. I use the swf plugin with the strobe player. I notice you only have flowplayer and jwplayer being utilized. Do you intend to incorporate strobe player as well?


Average of ratings: -
In reply to Robert Archibald

Re: HTML5 Video Players

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

Actually there are currently, Video.js, Sublime Video, JW Player, Flowplayer and MediaElement.js implemented. 

The idea is that it should be simply a case of making up a template in one of the free spaces, to support an additional player. So we are flexible to changes and to customizing the players to just how we want them, as well as being ready for future new players.

Hopefully that will work with Strobe player. It is supposed to. I  will have a try shortly. 

Average of ratings: -
In reply to Justin Hunt

Re: HTML5 Video Players

by Robert Archibald -

Hi Justin,

Sorry I didn't notice that. Yes you are quite right it does state that strobe is supported in the readme file. I will give it a go later this evening. It's looking promising.

Cheers

Rob

Average of ratings: -
In reply to Robert Archibald

Re: HTML5 Video Players

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

Well you/I would have to make a template for Strobe. Thats pretty easy, but the documentation is offline, and looks like it has been for some time. So I am unable to at this stage.

Average of ratings: -
In reply to Justin Hunt

Re: HTML5 Video Players

by Matt Bury -
Picture of Plugin developers

Hi Justin,

This sounds like a great idea.

BTW, info and demos for the OSMF (includes Strobe) is here: http://blogs.adobe.com/osmf/

I've copied some strobe demos onto my server here: http://matbury.com/strobe/ (This is probably the quickest way to find practical examples of HTML + JS code).

Have you had a look at the JW Player plugin for Wordpress? It uses some of the features you've mentioned: https://wordpress.org/plugins/jw-player-plugin-for-wordpress/ Perhaps you can find some useful ideas in there?

In the spirit of sharing smile

Average of ratings: -
In reply to Matt Bury

Re: HTML5 Video Players

by Colin Fraser -
Picture of Documentation writers Picture of Testers

Hi guys, I can't contribute too much here, but the problem I am getting is that it takes far to long to start to play videos when they open in popups or are embedded, whatever. The issue for me then would be is there a method of download/cache/play available, much like YouTube does? That would not be ideal, but it allows the impatient the chance of seeing the video start and run, as long as the download rate is higher than the play rate. And I have difficulty describing my usual audience, 13-16 yr olds,  as being patient.   

Average of ratings: -
In reply to Colin Fraser

Re: HTML5 Video Players

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

 This seems to be more of an issue with MP4, and it might be that if encoded differently you get better results. Is that an option? FWIW the webm format seems better in this regard. You could go hard code html5, and encode it all in webm.



Average of ratings: -
In reply to Colin Fraser

Re: HTML5 Video Players

by Matt Bury -
Picture of Plugin developers

Hi Colin,

I think what you're referring to is progressive download: http://en.wikipedia.org/wiki/Progressive_download which all the popular media players (mentioned here at least) and HTML5 compliant browsers are capable of doing.

The most frequent reason for videos not playing before they've finished downloading is in the way the video files themselves are encoded. Media players require metadata about the video file, sometimes called the MOOV Atom, so that they know how to play it. If the metadata is encoded into the end of the file, which used to be a common practice, then users have to wait. If it's encoded at the beginning, it can start playing immediately.

Media editing/encoding apps often have an option called something like "optimise for the web" or "enable progressive download" for video files. Checking that should make it work. If it doesn't have the option, then consider using a different app.

I don't know of any media player that can perform progressive download playback on inappropriately encoded video.

I hope this helps! smile

BTW, here's a good free and open source video encoder: https://handbrake.fr/

Average of ratings: Useful (1)
In reply to Matt Bury

Re: HTML5 Video Players

by Colin Fraser -
Picture of Documentation writers Picture of Testers

Thanks Matt, that is valuable information, really appreciated. The issue is that many schools I work in do not allow access to YouTube, so any videos there that may be useful are out of reach of students in class. Catch-22 all over...  so I have been using ClipConverter, and the best format with regard to quality is MP4, so I have found. I do not understand why, but the videos do not seem to apply the progressive download principles. If I set it to force download, the network admins are usually complaining that someone is hogging the bandwidth..smile Can't win either way, but there just has to be a better way of doing this. Derek Chirnside is also questioning this, and may have a lot more to contribute than I would. 

Average of ratings: -
In reply to Colin Fraser

Re: HTML5 Video Players

by Matt Bury -
Picture of Plugin developers

Hi Colin,

Would Vimeo be a viable alternative? Only caveat is that their policy states that all videos that you upload have to be either by you or you must have been involved in their creation in some way.

Another way would be to create a bucket server account on AWS (cheap file storage and serving: http://aws.amazon.com/) and feed the video URLs into media players in Moodle. You'll also need an appropriately configured crossdomain.xml file at the AWS end (easy to do).

Here's Youtube's very permissive crossdomain file: http://youtube.com/crossdomain.xml

Specs are here: http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html

If you specificy your Moodle domain name only, then Flash media players from other domains won't be able to "leech" your videos. However, HTML5 players can still do it.


Average of ratings: -
In reply to Matt Bury

Re: HTML5 Video Players

by Colin Fraser -
Picture of Documentation writers Picture of Testers

Story:

I was showing a video from Mathbff, from YouTube, on resolving quadratic equations. Nancy was doing her thing and the Maths Senior came into the room. The first thing he said was "Wow, she is writing backwards!"  Duh! I thought, but he was clearly impressed. When I later told him we could do the same thing, and how we could do it, his comment was "We do not have the time, nor the resources, nor the technical skills to do that.". So much for Vimeo..smile 

I have never given crossdomain a thought, actually, so that might be useful, but if it involves uploading the xml file to our Moodle server, it is hosted, so that is just not going to fly, I am afraid... I will follow that up, so thanks for the tip Matt... 




Average of ratings: -
In reply to Colin Fraser

Re: HTML5 Video Players

by Matt Bury -
Picture of Plugin developers

Re: "I have never given crossdomain a thought, actually, so that might be useful, but if it involves uploading the xml file to our Moodle server, it is hosted, so that is just not going to fly, I am afraid..." -- The crossdomain.xml file foes on the server where the files are hosted, i.e. the bucket server or CDN, where you would have access to upload files, along with video files, playlists, images, etc..

Average of ratings: -
In reply to Matt Bury

Re: HTML5 Video Players

by Robert Archibald -

Hi Matt,

Do you think this could be incorporated with the swf plugin ie the alternative content?

Cheers

Rob

Average of ratings: -
In reply to Justin Hunt

Re: HTML5 Video Players

by Robert Archibald -

I like the idea of the filters and would like to try mediaElement.js. Does anyone know how to install the mediaElement.js on moodle? 

Thanks in advance.

Rob

Average of ratings: -
In reply to Robert Archibald

Re: HTML5 Video Players

by Robert Archibald -

Please disregard my previous question.

I have installed the filter and see that there is no need to install mediaElement.js. 

Thanks

Rob

Average of ratings: -