How to add FlowPlayer to your workspace?

 

Install FlowPlayer on workspace Use Embed player

 

Install FlowPlayer on workspace

Make sure you have the latest player downloaded from the FlowPlayer website, if not please do so. Once you have the latest player there is a few things you need to prepare before installing the player into your workspace.

 

1. Create a FOLDER to separate and organize the Player from your normal pages & files; label that folder with a name that makes it easy for you to remember. We will be using the label "PLAYER" for this guide.

    

2. Create a FOLDER to separate and organize your videos from your normal pages & files; label the folder with a name that makes it easy for you to remember. We will be using the label "VIDEOS" for this guide.

    

 

Ok, so we create the folders now we are ready to upload the files.

 

1. Upload the following files to the PLAYER folder: flowplayer-3.1.1.swf, flowplayer-controls-3.1.1.swf, and flowplayer-3.1.1.min.js.

    

2. Upload any .flv movies files you have into the VIDEOS folder

 

Now you need to setup the javascript so that it will work; if you are a premium user you can use your Custom CSS/Javascript Field.

 

If you have the Custom CSS/Javascript Field in your settings copy and paste the following code into it.

If you don't have the custom CSS/Javascript option under your settings, copy the code and input it into a HTML/Javascript Plugin; make sure that you check off the box to allow javascripts. If your a base (free) user you will have to put the following code on all pages you want to have videos on. You must be an administrator to do the following.

 

code example 1:

<script src="/f/1243364750/flowplayer-3.1.1.min.js"></script>

 

 

Now for the player you need to copy the following code into a HTML/Javascript Plugin and you need to make sure that you check off the box to allow javascripts (only can be done by administrator). To embed multiple videos on one page you will need to change the id as it can only be used once per video. e.g:  id="player1" for video 1 and id="player2" for video 2. If you want the video to auto-load set the autoBuffering to true.

 

code example 2:

<a href="/f/VIDEONAME.flv" style="display:block;width:425px;height:300px;" id="player#">

</a>

<script language="JavaScript">

    flowplayer("player#", "/f/flowplayer-3.1.1.swf",  {

          clip: {

                    autoPlay: false,

                    autoBuffering: false

                  }

});

</script>

 

 

Your video should now show up, to add additional videos your workspace or page you can just add code example 2 into a HTML/Javascript. This player has endless options for customization; some guide for the customization can be found here.

 

Use Embed player

For those that don't want to install the player or want to have users use the player without having administrative access you can use the embed code. All you need to do is change the URL for the video then copy the code and place it into the HTML/Javascript plugin. By using this code you do not need to check off the "Allow Javascript" checkbox.

 

<object width="460" height="320" data="http://flowplayer.org/swf/flowplayer-3.1.1.swf?0.14816550157391917" type="application/x-shockwave-flash">

<param name="movie" value="http://flowplayer.org/swf/flowplayer-3.1.1.swf?0.14816550157391917" />

<param name="allowfullscreen" value="true" />

<param name="allowscriptaccess" value="always" />

<param name="flashvars" value='config={"plugins":{"pseudo":{"url":"flowplayer.pseudostreaming-3.1.2.swf"},"controls":{"backgroundColor":"#000000","backgroundGradient":"low"}},"clip":{"provider":"pseudo","url":"http://workspacename.pbworks.com/f/VIDEONAME.flv"}}' />

</object>