Jump to:

3435 Posts in 1026 Topics by 866 members

Template Questions

SilverStripe Forums » Template Questions » Problem with Flowplayer jQuery video player

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 3839 Views
  • smert
    Avatar
    Community Member
    6 Posts

    Problem with Flowplayer jQuery video player Link to this post

    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

  • Willr
    Avatar
    Forum Moderator
    5490 Posts

    Re: Problem with Flowplayer jQuery video player Link to this post

    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.

  • Ben_W
    Avatar
    Community Member
    80 Posts

    Re: Problem with Flowplayer jQuery video player Link to this post

    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>

  • smert
    Avatar
    Community Member
    6 Posts

    Re: Problem with Flowplayer jQuery video player Link to this post

    Thanks for the replies.

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

    3839 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.