HomeMy WorkMy SkillsAbout MeThe Latest

Flash Video Player Web Part

While looking for a way to host Flash Video files that wasn't YouTube (or other, ad-supported video hosting services), I found and excellent, lightweight, open-source solution in Flowplayer.

Flowplayer is a fully configurable Javascript/Flash player that wraps around any valid Flash Video file  (FLV, F4V) and whilst it's highly customisable for developers, I wanted to enable my site publishers to be able to simply upload a flash video and drop a player onto their web pages - as such I created the Flash Video Player web part for Kentico CMS.

fvp_preview.jpg


Installation and Configuration


1. Download the Flash Video Player web part for free from the Kentico Marketplace;

2. Once you've downloaded the web part archive file, move/copy it to the ~/CMSSiteUtils/Import folder under the root of your Kentico site;

3. Login into CMS Site Manager and from the Sites tab, choose the Import Site or objects option;

4. The flashvideoplayer.zip file should now appear in the Import Packages list (see screenshot). Select it, ensure that the Preselect all items option is checked, then click Next. Click Next through the import options until the import process is finished;

5. Once the import process is finished, you can add the Flash Video Player web part to any of your pages as per any other Kentico web part. It will appear in the 'Media' folder of the web part selection dialog (see screenshot);

6. Once you've added the web part to a page, the web part properties dialog will appear. The Flash Video Player web part supports all standard Kentico web part properties, though there are a few additional properties that you need to complete under the Flash Video Player General Properties section (see screenshot):

Flash Video URL: Enter the URL to the Flash Video File that you wish to display within the player. Valid file formats are FLV and F4V. You can either upload a Flash Video file to your site in Kentico CMS and copy/paste the Live URL as given in the Properties > General tab of the file in Edit Mode, or paste the URL of an externally hosted Flash Video;

Link URL: Optional. If you enter a URL here, the user will be redirected to this URL when they click on the video in the player. If left blank, this function will be disabled;

Player Width: The desired width of the player window in pixels;

Player Height: The desired height of the player window in pixels;

Start Playback Automatically: Indicates whether the video should start playing immediately upon loading. If not ticked, the user will need to press play before the video plays;

Buffer Automatically: Indicates whether the video should be loaded into the player's memory straight away (before playback begins). When this is true and 'Start Playback Automatically' is not selected, the video will automatically stop at first frame;

You can also configure the appearance of the Flash Video Player under the Flash Video Player Control Properties section (see screenshot):

Automatically Hide Controls: Indicates whether the player controls should be automatically hidden, and if so, under what circumstances. If 'Never' is selected, the player controls will always be displayed. If 'Always' is selected, the player controls will be hidden after two seconds. The controls will not appear again until the user moves their mouse in the player window. If 'When in Fullscreen Mode' is selected, the player controls will be hidden after two seconds, but only when in fullscreen mode. The controls will not appear again until the user moves their mouse in the player window, or until the user exits fullscreen mode;

Show Play/Pause Button: Indicates whether or not the Play/Pause button should be displayed on the player control bar;

Show Stop Button: Indicates whether or not the Stop button should be displayed on the player control bar;

Show Volume Controls: Indicates whether or not the Volume Controls should be displayed on the player control bar;

Show Mute Button: Indicates whether or not the Mute button should be displayed on the player control bar;

Show Elapsed Time: Indicates whether or not the Stop Elapsed Play Time should be displayed on the player control bar;

Show Time Scrubber: Indicates whether or not the Time Scrubber should be displayed on the player control bar. The Time Scrubber is the bar that you use to jump (or 'Scrub') between various parts of the video;

Show Fullscreen Button: Indicates whether or not the Fullscreen button should be displayed on the player control bar. 


Notes and Issues

The Flash Video Player will not display in Design mode, only Preview and Live. This is because the player window obscures the web part configuration menu when it displays in Design Mode.

The Flash Video Player web part implements Flowplayer v3.1.5 under the GPL 3 license. For further information, please see the Flowplayer web site.

 

25/09/09 17:44