Premium Templates

 WebPlus Templates

Image Galleries

 PrettyPhoto

 Hover Zoom

Image Effects

 Nivo Slider

 Circle Navigation

 Piecemaker 2

 EasySlider

 Image Slider

 Slide Thumbs

 Sliding Boxes

 Featured List

 Before and After

Video Players

 NonverBlaster:hover

 Flowplayer Video

Audio Player

 Mp3 NonverBlaster

Other Effects

 Animated Portfolio New

 Jquery Fade In/Out

 Accordion

 Smooth scrolling

 Unique scrollbar

 Page Peel

 News Ticker

Copyright © Flying Cow Labs All Rights Reserved.

Website crafted using the Serif Software Suite

Home Templates About Newsletter
Home

If you’ve found these tutorials useful please help the world's poorest communities by making a small donation to WaterAid - Even if it’s just a one-off gift of £2 it would be massively appreciated.

A very fast and simple to install flv video player for your Serif Webplus website.

In this tutorial I’ll show you how to install the free single player that comes from Flowplayer.com. It’s free to use on commercial sites, but to remove the Flowplayer logo you will need to purchase the commercial version, all details and prices can be found here

As an added bonus I’ve included a demo and an example file in the download to demonstrate how to create a simple video gallery!

1. Download the zipped file - Includes javascript, swf, a single paged WebPlus file plus an additional multi video player Webplus file so you can understand how it fits together.


2. Using an ftp program such as filezilla add the complete ‘flowplayer’ file to the root of your server, this contains everything needed for video player to work. Your own flv files can be added to the video file to keep things organised.


3. Flowplayer uses it's own JavaScript file ‘flowplayer-3.1.4.js’ to install the player on the page, copy and paste the following code to the head section of your web page or master page.


Copy and paste > Insert > Web Object > HTML > Paste to Head.

    
    
Flowplayer Video Demo

4. Copy the following code and paste it in to the body of your web page. You will need to set the complete ‘href’ path to the video file location for example: http://addons.webplus.net/flowplayer/video/flowplayer-700.flv


Copy and paste > Insert > Web Object > HTML > Paste to Body


Placement of the video player will depend on the placement of the HTML fragment.

    
    

5. Press Alt + S to bring up the pages html source code. Scroll down to the beginning of the head section where it says:


<!--Page Body End-->

<!--Master Page Body End-->


And insert the following code either in the <!--Page Body End--> section or the <!--Master Page Body End--> depending on if you would like a video player on a single page or on all pages (ie the Master page section)


As with the previous code, set the ‘href’ path to the path of the ‘flowplayer-3.1.5.swf’

Flowplayer Video Player Tutorial

    
    

Uploading the page should now display the player and sample video.


View the sample ‘multiple-videos-demo.wpp’ file to see how iframes help display multiple videos on a single page.


Having troubles or wish discuss this tutorial you can visit the forum here