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.

NonverBlaster:hover Video Player Tutorial

A very simple, sleek .flv and .mov video player for your Serif Webplus website. This is completely free, has no commercial licensing requirements, so there’s no need to pay anything to remove the makers logo!

NonverBlaster:hover has been developed by Nonverbla you can visit his blog here

NonverBlaster:hover will also play mp3 files and my tutorial can be found here

1. Download the handy zipped file - Includes javascript, swf, for both the video player and mp3 player, plus single paged WebPlus files so you can see how they fit together in a Webplus site.


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


3. Include the following script in the head of the master page or the page you wish to use the video player.


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

    
    
    
NonverBlaster:hover 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/nonver/media/toptips-x4.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.

    
To watch this video, you need the latest Flash-Player and active javascript in your browser.

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


Configuring the player


Add your own video teaser image


Create an image 500 x 281 pixels and put it in the ‘media’ file. Then link to it in the line of code in the body’s html: flashvars.teaserURL = "nonver/media/teaser-image.jpg";


Change the colour of the controls in the section of the code in the body:


flashvars.controlColor = "ffffff";

Change the hex value (ffffff) to the desired colour.


Change the Background of the control in this section of the code:

flashvars.controlBackColor = "0x000000";

Change the hex value (000000) to the desired colour.


Other adjustments are possible in this area of the code and are mainly self explanatory.



For more settings and configurations visit the makers site here for demos etc.




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