Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions /

Problem with Flowplayer jQuery video player


4 Posts   4115 Views


Community Member, 6 Posts

19 February 2011 at 4:17am


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

// 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});


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

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?




Forum Moderator, 5513 Posts

19 February 2011 at 10:09am

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.


Community Member, 80 Posts

28 April 2011 at 1:44pm

Edited: 28/04/2011 1:45pm

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

<script type="text/javascript">

<script type="text/javascript">
   jQuery(document).ready(function($) {
      // install flowplayer into flowplayer container
      var player = flowplayer("player", {
                        scaling: "fit"
                     canvas: {
                        backgroundColor: '#000000'
      // setup button action. it will fire our overlay
      $("#trigger img[rel]").overlay({
         mask: {
         // use the Apple effect for overlay
         effect: 'apple',
         // when overlay is opened, load our player
         onLoad: function() {
         // when overlay is closed, unload our player
         onClose: function() {
   <script src="/flowplayer/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 -->


Community Member, 6 Posts

12 May 2011 at 1:52am

Thanks for the replies.

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