flv
We have used Flowplayer as our preferred movie player in ATutor for a long time now, and I have written a post about how you can integrate it in you install.
That was for version 2.2.1 of Flowplayer, but we're now at version 3 (3.0.7 at the time of writing). Flowplayer is now more elegant, and you have to integrate it in a different way.
Again, first thing is to download the player.
Then, copy the js file you need to your server, and add a reference to it in you theme file (/your_theme_path/header.tmpl.php):
<script type="text/javascript" src="/flowplayer307/flowplayer-3.0.6.min.js"></script>
This file will be in the example folder when you download it, and yes the version number for the js is 3.0.6 even though the player is at 3.0.7.
Third, edit your include/lib/output.inc.php. Around line 650, add the following to get ATutor to output the right code when it finds a .flv file inside the media tag:
<?php
// .flv - uses Flowplayer 3.0 from flowplayer.org (playing file via full URL)
preg_match_all("#\[media[0-9a-z\|]*\]http://([\w\./-]+)\.flv\[/media\]#i",$text,$media_matches[11],PREG_SET_ORDER);
$media_replace[11] ="<a class=\"flowplayerholder\"
style=\"display:block;width:##WIDTH##px;height:##HEIGHT##px;\"
href=\"http://##MEDIA1##.flv\">
</a>";
// .flv - uses Flowplayer 3.0 from flowplayer.org (playing file from AT_content_dir)
preg_match_all("#\[media[0-9a-z\|]*\]([\w\./-]+)\.flv\[/media\]#i",$text,$media_matches[12],PREG_SET_ORDER);
$media_replace[12] ="<a class=\"flowplayerholder\"
style=\"display:block;width:##WIDTH##px;height:##HEIGHT##px;\"
href=\"".AT_BASE_HREF."get.php/##MEDIA1##.flv\">
</a>"; ;
?>(not including the php start and stop tags!)
That's it for the output.inc.php, no more changes needed! Note that the earlier inline javascript Flowplayer needed now is gone, and all it inserts is a slighty styled link.
You do however need to change one more file to compensate for this, and that is your theme's footer.tmlp.php. Add this at the top of it:
<script language="JavaScript">
window.onload = function() {
// for Flowplayer
$f("a.flowplayerholder", "/flowplayer307/flowplayer-3.0.7.swf", {
clip: { autoPlay: false, autoBuffering: true },
plugins: {
controls: {
all: false,
play: true,
scrubber: true,
fullscreen:true
}
}
});
}
</script>For those of you familiar with the magic that is jQuery you will recognize the syntax. This basically says that the Flowplayer (flowplayer-3.0.7.swf) should load whenever the page finds an a-element with the class "flowplayerholder", and it passes some instructions that you can change to your liking by looking at the Flowplayer documentation.
To make ATutor insert .flv files in the media tag I suggest you read about the changes done in include/html/filemanager_display.inc.php that I described in my original post.
To have a look at the new player, have a look-see here!
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:
<script type="text/javascript" src="/flowplayer/flashembed.min.js"></script> 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:
<?php
// .flv - uses Flowplayer from flowplayer.org (EXTERNAL)
preg_match_all("#\[media[0-9a-z\|]*\]http://([\w\./-]+)\.flv\[/media\]#i",$text,$media_matches[11],PREG_SET_ORDER);
$media_replace[11] ="<div id=\"flowplayerholder_##MEDIA1##\">Flash Player needed!</div>
<script type=\"text/javascript\">
// <![CDATA[
new flashembed(\"flowplayerholder_##MEDIA1##\", { src: \"http://www2.helsekompetanse.no/flowplayer/FlowPlayerLight.swf\", width: ##WIDTH##, height: ##HEIGHT## }, { config: { videoFile: \"http://##MEDIA1##.flv\", embedCode: \"can not be embedded\", initialScale: 'scale', controlsOverVideo: 'ease', loop: false, autoPlay: false } });
// ]]></script>";
// .flv - uses Flowplayer from flowplayer.org (INTERNAL)
preg_match_all("#\[media[0-9a-z\|]*\]([\w\./-]+)\.flv\[/media\]#i",$text,$media_matches[12],PREG_SET_ORDER);
$media_replace[12] ="<div id=\"flowplayerholder_##MEDIA1##\">Flash Player needed!</div>
<script type=\"text/javascript\">
// <![CDATA[
new flashembed(\"flowplayerholder_##MEDIA1##\", { src: \"http://www2.helsekompetanse.no/flowplayer/FlowPlayerLight.swf\", width: ##WIDTH##, height: ##HEIGHT## }, { config: { videoFile: \"".AT_BASE_HREF."get.php/##MEDIA1##.flv\", embedCode: \"can not be embedded\", initialScale: 'scale', controlsOverVideo: 'ease', loop: false, autoPlay: false } });
// ]]></script>";
?>(don't paste in the php start and end tag)
around 20 lines further down the code you will have to add the line
<?php
$media_input = str_replace("flowplayerholder_##MEDIA1##","flowplayerholder_".str_replace(":/","",$media[1]),$media_input);
?>so the end result is:
<?php
//replace media tags with embedded media for each media tag
$media_input = $media_replace[$i];
$media_input = str_replace("##WIDTH##","$width",$media_input);
$media_input = str_replace("##HEIGHT##","$height",$media_input);
$media_input = str_replace("flowplayerholder_##MEDIA1##","flowplayerholder_".str_replace(":/","",$media[1]),$media_input);
$media_input = str_replace("##MEDIA1##","$media[1]",$media_input);
$media_input = str_replace("##MEDIA2##","$media[2]",$media_input);
$text = str_replace($media[0],$media_input,$text);
?>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:
<?php
else if (ext == "mpg" || ext == "avi" || ext == "wmv" || ext == "mov" || ext == "swf" || ext == "mp3" || ext == "wav" || ext == "ogg" || ext == "mid") ;
?>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:
<?php
else if (ext == "mpg" || ext == "avi" || ext == "wmv" || ext == "mov" || ext == "swf" || ext == "mp3" || ext == "wav" || ext == "ogg" || ext == "mid" || ext == "flv") ;
?>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.
