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


Reply

4 Posts   3940 Views

Avatar
smert

19 February 2011 at 4:17am Community Member, 6 Posts

Hi,

I am trying to integrate the Flowplayer video player ([url]http://flowplayer.org[/url]) 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

Avatar
Willr

19 February 2011 at 10:09am Forum Moderator, 5511 Posts

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.

Avatar
Ben_W

28 April 2011 at 1:44pm (Last edited: 28 April 2011 1:45pm), Community Member, 80 Posts

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>

Avatar
smert

12 May 2011 at 1:52am Community Member, 6 Posts

Thanks for the replies.

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