Hi,

I am trying to integrate the Flowplayer video player (http://flowplayer.org) into a page template. The video player is initiated using a jQuery function:

<script> 
// wait for the DOM to load using jQuery
$(function() {
	// setup player normally
	$f("player1", "flowplayer-3.2.5.swf", {
		// clip properties common to all playlist entries
		clip: {
			baseUrl: '',
			subTitle: '',
			time: ''
		},
		
		// show playlist buttons in controlbar
		plugins: {
			controls: {
				playlist: true
			}
		}
	});
	$f("player1").playlist("div.clips:first", {loop:true});

});
</script>

If I put this code into my template, I get an error when I try to run ?flush=1:

Parse error: syntax error, unexpected T_STRING, expecting ')' in <path to temp file>

I have tracked the error down to this line:

$f("player1").playlist("div.clips:first", {loop:true});

However I cannot get the player to initiate. I have hard-coded a link to the jQuery library in the head section of my template. I have also tried surrounding the code with

(function($) {
//code as before
})(jQuery);

I'm not 100% on jQuery and am completely new to SilverStripe so can somebody tell me what I need to do to get this working please?

Thanks,

Iain

It could be the fact that '$' is used in SilverStripe templates and so it thinks this is a SilverStripe variable. Try using the 'jQuery' string rather than $ to avoid conflicts. Also might be wise to store you javascript as an external file and simply link to it from your template.

The below is what I had for one of my site using flowplayer, you need jquery.tools.min.js, flowerplayer-3.2.4.min.js and overlay-apple.css from flowplayer site. remember to use noConflict().

<script type="text/javascript">
jQuery.noConflict();
</script>

<script type="text/javascript">
jQuery(document).ready(function($) {

// install flowplayer into flowplayer container
var player = flowplayer("player", {
src:"/flowplayer/flowplayer-3.2.5.swf",
width:640,
height:360
},
{
clip:{
scaling: "fit"
},
canvas: {
backgroundColor: '#000000'
}
});

// setup button action. it will fire our overlay
$("#trigger img[rel]").overlay({
mask: {
color:'#333333',
loadSpeed:1000,
opacity:0.8
},
// use the Apple effect for overlay
effect: 'apple',

// when overlay is opened, load our player
onLoad: function() {
player.load();
},

// when overlay is closed, unload our player
onClose: function() {
player.unload();
}
});
});
</script>

<script src="/flowplayer/js/jquery.tools.min.js"></script>
<script type="text/javascript" src="/flowplayer/js/flowplayer-3.2.4.min.js"></script>
<link href="/flowplayer/css/overlay-apple.css" rel="stylesheet" type="text/css" media="screen" />

In the template, add the following:

<div id="home_video" class="apple_overlay black">
<!-- flowplayer container -->
<a id="player" href="/$VideoFile.Filename">

<!-- some initial content so that player is not loaded upon page load -->
&nbsp;
</a>
</div>

Thanks for the replies.

I ended up taking the Flowplayer initialisation code and linking/running it from an external script file.