ExpressionEngine - adding Flowplayer video player

Here’s a quick walk-through for adding videos to your ExpressionEngine site using Flowplayer. It assumes you will be uploading video files to your own server and not using videos hosted on 3rd party sites such as Youtube or Video.

About the player

Flowplayer is a versatile and customisable Open Source video player. It supports popular video formats such as FLV, F4V, H.264, and Flash compatible flavours of MP4. It features many configurable options to change both how it looks and how it works, and has several plugins to extend it’s capabilities. There are also commercial options for unbranded versions and large organisations.

Grab the files

Download it at http://flowplayer.org/ (currently at version 3.2.7) and extract the files.

I like to keep all my javascripts tidy in their own folders, so on your server create a folder called /js and inside that a sub-folder called /flowplayer, and upload the files. You should end up with this:

/js/flowplayer/flowplayer-3.2.6.min.js
/js/flowplayer/flowplayer-3.2.7.swf
/js/flowplayer/flowplayer.controls-3.25.swf (not covered in this article)
(Note: the version numbers in the filenames may vary so you may need to change them accordingly)

Set up a Channel custom field

Adding a custom field
In your EE control panel go to Admin>Channel administration>Channels>Custom Channel fields and add a new custom field in the Field Group you want to add videos to.

  1. Choose Field Type “File”
  2. Add a Field Label, we’ll use “my_video_field”
  3. Add a Field Name for the publish page
  4. Leave the File Type as “Any”
  5. Click Submit to save the field

Now go to edit the Channel Preferences you’ll be posting videos to - Admin>Channel administration>Channels>[Channel] Edit preferences>Channel Posting Preferences - and set “Automatically turn URLs and email addresses into links?” to “No”.

Set up your templates

Add the Javascript call to your HEAD tag:

<script type="text/javascript" src="/js/flowplayer/flowplayer-3.2.6.min.js"></script> 

(Note: the path /js/flowplayer/ is where you upload the script files to, also make sure the numbers in the filename matches the file you downloaded)

Now add the HTML and SCRIPT tags that adds the player to an entry page:

{exp:channel:entries channel="channel_name"}
<h1>{title}</h1>

{!-- start player code --}
<a href="{my_video_field}" style="display:block;width:425px;height:300px;" id="player"></a>
<script type="text/javascript">
flowplayer("player", "/js/flowplayer/flowplayer-3.2.7.swf");
</script>
{!-- end player code --}

{/exp:channel:entries} 

Your custom field name goes in the HREF attribute. You can use inline CSS to define the width/height of the video player, or give it a class name and add the styling to your main stylesheet.

Add a video to an entry

Add file in publish form
Video files tend to be large so it’s usually easier to upload files to one of your preset upload destinations by FTP beforehand, you might want to create one for your video files, or just use an existing location. Now Publish a Channel entry that uses your new video field, or edit an existing entry. Click “Add file” on your publish page, choose your video file, and save the entry.

Now go to see the entry on your site and you should see your video playing!

Tips and tricks

Stopping the video from playing automatically
You need to add some configuration properties to the Javascript snippet that sits in your Channel entries tag, this will mean you have to click on the video to start playing it:

<script type="text/javascript">
flowplayer("player", "/js/flowplayer/flowplayer-3.2.7.swf", {
    clip:  {
        autoPlay: false,
        autoBuffering: true
    }
});
</script> 

Multiple videos on one page
Each player uses the “player” ID by default and you can only an ID once on a page else things won’t work. This is easily solved by adding the entry_id parameter like this:

<a href="{my_video_field}" style="display:block;width:425px;height:300px;" id="player{entry_id}"></a>
<script type="text/javascript">
flowplayer("player{entry_id}", "/js/flowplayer/flowplayer-3.2.7.swf");
</script> 

For documentation, further customisation/configuration options, and player plugins visit http://flowplayer.org/

by Rob Allen | Filed in ExpressionEngine