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:

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

I have tracked the error down to this line:

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

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

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>