Atutor.no

Flowplayer is a great player for Flash video files (.flv) which we have used quite a lot the last six months, and will use a lot more in the coming months. As of ATutor 1.6.1 the media tag has improved so much that I wanted to add Flowplayer as an integrated part of the ATutor content creation process.

I've decided not to create this as a patch or module, as there are many different ways you can make use of Flowplayer in ATutor, and because we will probably improve on this integration in the future as well.

I am however describing it all in detail here, so you should be able to set this up yourself quite easily!

The first thing you have to do is download Flowplayer (this tutorial tested with version 2.2.1 of Flowplayer, but any version should work).

I unzipped and uploaded the whole folder at root level on my server, so it will always be there regardless of me upgrading ATutor or not.

The second thing you will have to do is refer to the flowplayer.min.js file in your theme's header. I'm using the Redux theme, so I edit the atutor/themes/Atutor-redux/include/header.inc.php file, and add the following within head:

Note that the default path for this file in Flowplayer is /flowplayer/examples/js/flowplayer.min.js, I just moved it down a few directories.

Now, save this, and we are ready to continue. This time we first have to edit atutor/include/lib/output.inc.php to make ATutor insert the appropriate flowplayer code when wrapping a .flv file in the media tag. At around line 650, right after the 6 lines of code for the .mid format, and before the comment that reads // Executing the replace, add:

(don't paste in the php start and end tag)

around 20 lines further down the code you will have to add the line

so the end result is:

This ensures that you can have more that one Flowplayer video in any content page, as they all get an unique ID.

This should add Flowplayer to ATutor, and you can test it by uploading a demo.flv file in your file manager and manually wrap it in in the media tag!

However, it's better that ATutor wraps the file in the media tag for you, and to make that happen, edit the include/html/filemanager_display.inc.php file. At around line 350 here you will see:

which basically tells the filemanager to wrap the extensions listed in the media tag. Here we have to add .flv as one of these extensions, so simply add || ext == "flv" here. The end result should be something like:

Assuming that you have done this, uploaded a .flv file called ubuntucast.flv to your course file manageer and clicked "insert", you would see this in your content editor:

[media]ubuntucast.flv[/media]

Assuming you wish this to display in 550 x 400 pixels rather than the default 425 x 350, you would edit this into the media tag, like:

[media|550|400]ubuntucast.flv[/media]

..and the video would show up like this in the content:

Note that this file is 22 Mb, so let me know if you cannot see it. Also note that in this example I have removed the embedCode: \"can not be embedded\", from output.inc.php, just to demonstrate how you can use Flowplayer to embed videos in other pages! (Hat tip: check the bottom right icon).

Or, check it out in an ATutor content page!

Further configuration of Flowplayer

Flowplayer is highly configurable, for instance you edit the look and feel by simply configuring which parameters to add in output.inc.php. Above I chose to have the controls over the video to start, and auto hide them by adding controlsOverVideo: 'ease' to the file. In addition there are tons of other options, including integration with streaming server and using playlists etc.

Enjoy!

Edit by Håvard Pedersen jan 09: Added support for playing flv files from external domains.