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   4115 Views

Avatar
smert

Community Member, 6 Posts

19 February 2011 at 4:17am

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

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.

Avatar
Ben_W

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 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

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.