Dynamic Flash Video Gallery

Dynamic Flash Video Gallery

This flash video player has an integrated thumbnail playlist and comes with a lot of features which can easily be changed using the XML file (size, colors and other options). It has support for RTMP, HD videos, sharing and fullscreen display.

The video player supports H264 files, as well as RTMP and can play mov, mp4, flv files.

Features:

- video / image gallery thumbnail playlist with scrollbar
- play/pause
- timer/total time
- draggable volume bar
- draggable progress bar
- share (embed code) or downdload button
- HD toggle - on/off
- fullscreen
- auto-hide playlist and controls when there is no mouse interaction and on leaving the swf

Note: The videos used in this file are for display purposes only.

 

Jeffrey Mulier

on 26/11/10

 

videoplayer width = "" height = ""

if i change this, nothing happens. the player stays big on the screen

 

Corneliu Chitanu

on 29/11/10

Hi,

To change the size of the component edit the index.html, or the file where you're embedding the component and change the values of these variables:

                
var stageW = 550;
var stageH = 300;

                

We're not using the width and height attributes (defined in the playersettings.xml) in this component.

 

Andrei Neamtu

on 14/1/11

 

Very good news:
We made the product cheaper: just 20$.
New updates are coming:
- more customizations
- multifunctionality: simple video mode, gallery mode
Keep in touch for the new updates coming.

 

SlimsDaBank

on 22/2/11

 

I'm thinking about purchasing this product and checked out the preview player and I noticed that when you hover over the videos it does not show a name or description to what the video is. Is there an option to change that?

 

Corneliu Chitanu

on 23/2/11

Hello,

Thank you for the interest in our video player, but, we're sorry, there is no option that will enable some description for the videos.

We can do this as a custom work, if you're interested. It can't be that big of a thing. Just send us an email at [email protected] We'll do any customization you need.

 

tunedinlive

on 31/10/11

 

what is the rtmp syntax for the player here is the rtmp address

rtmp://xx.xx.x.x:1935/livetest

 

tunedinlive

on 31/10/11

 

I have been unable to connect to a rtmp stream here is the playlist:

                
<!-- if the videoPath misses then the item is considered the type of "image" else "video" -->
	<item startWithHD = "true" videoPath = "" videoHDPath = "videos/video1.flv" streamer = "rtmp://xx.x.28.121:1935/livetest" previewPath = "images/previews/preview01.jpg" thumbPath = "images/thumbs/thumb01.jpg" />
	<item startWithHD = "false" videoPath = "" 				  videoHDPath = "" 					streamer = "" previewPath = "images/previews/preview02.jpg" thumbPath = "images/thumbs/thumb02.jpg" timeToStay = "3"/>
	<item startWithHD = "false" videoPath = "videos/video1.flv" videoHDPath = "" 					streamer = ""

                

 

tunedinlive

on 31/10/11

 

streamer = "rtmp://xx.x.28.121:1935/livetest"
I am unable to connect to this stream please advise

 

Corneliu Chitanu

on 1/11/11

Hello,

You need to set the streaming application path at the "streamer" flashvar:

streamer="rtmp://domain.com/app/"

and the videoPath attribute with the names/path to the stream:

videoPath = "mp4:videoStreamName"

That's if your video is encoded with mp4 format. Set the appropriate format for your videos though. This should do it.

 

tunedinlive

on 1/11/11

 

Thank you for your help I have tried your instuction still getting a connection error here is what i have now please advise

                
	<!-- if the videoPath misses then the item is considered the type of "image" else "video" -->
	<item startWithHD = "true" videoPath = "flv:livetest" videoHDPath = "" streamer = "rtmp://xx.x.28.122:1935/live/" previewPath = "images/previews/preview01.jpg" thumbPath = "images/thumbs/thumb01.jpg" />
	<item startWithHD = "false" videoPath = "" 				  videoHDPath = "" 					streamer = "" previewPath = "images/previews/preview02.jpg" thumbPath = "images/thumbs/thumb02.jpg" timeToStay = "3"/>

                

 

Corneliu Chitanu

on 2/11/11

Hi,

I'm sorry, I forgot to specify that you don't need a format prefix when you're using the flv format. So the videoPath attribute it should set like this:

videoPath="livetest"

or

videoPath="livetest.flv"

However, we tested your server (we got the whole IP from the email you sent in the previous days) and the stream does not work. What kind of server are you using? Are you sure there isn't a problem with the server or the stream? We also tested your stream using other players and it did not work.

 

tunedinlive

on 2/11/11

it is a live FMS stream and and i have to be encoding, for you to see it, i encode it h264 with wirecast i have tried it all the ways you have suggested, if you give me a time, you can
check the live test feed i will start a live encode

 

Corneliu Chitanu

on 4/11/11

Could you give us access to the admin area of the FMS? We'll check the app the server is using and the stream. If you can do this, please send the data at [email protected] Thank you for your patience.

987...1

Post a comment

Please login to join the discussions. Don't have an account? Register (it takes 30 seconds)

There are currently no frequent asked questions. As soon as we receive your feedback, we'll update this section permanently.

There are no video tutorials for this flash component yet.

Dynamic Flash Video Gallery - change log

2010.03.12 - version 2.0

* new XML functionality and bug fixes

- controller totally resizeable (controls and list auto resize depending on the height of the controller)
- control the margin of the controller on sides and under it
- control the distance between the controls, list and progress bar

- enable / disable center play button and control its dimension
- enable / disable a download button instead of the share button

- control colors of the button (stroke and fill of the background, stroke and fill of the sign)

- define if each item should start or not with the HD video
- if the item is an image, you can now define how much time should the player show it





 2009.06.26 - version 1.0

* First release!

Dynamic Flash Video Gallery - tips and tricks

Introduction: 

     This flash video player has an integrated thumbnail playlist and comes with a lot of features which can easily be changed using the XML file (size, colors and other options). It has support for RTMP, HD videos, sharing and fullscreen display.

     This Dynamic Flash Video Gallery contains a handful of features and settings. It is easy to use the file in your own Flash projects or as an independent Flash Component on your html based website.

     If you want to use the video player in a Flash file, importing it is as easy as moving some actionscript files around and dragging the movieclip containing the poll in your Flash file.

     Skinning is very simple as well. To edit the file you don't need any Flash experience, because all the settings are loaded from an external XML file, which you can edit with any text editor. You can change the colors of the elements, the size of the elements, the size of the player and much more.

     The media files are also loaded from an external XML file, so you can add unlimited content.

     The code is very well commented, written following the best OOP practices, and the downloaded file comes with all the assets used to create the Dynamic Flash Video Gallery such as the fonts, the .AI source files, and the fla source file.

Features:

1. Gallery thumbnail playlist with scrollbar.
2. Play / Pause.
3. Timer / Total time.
4. Draggable volume bar.
5. Draggable progress bar.
6. Share (embed code).
7. HD toggle - on/off.
8. Fullscreen.
9. Auto-hide playlist and controls when there is no mouse interaction and on leaving the swf.

Folder structure:

     Please navigate to the deploy folder, inside the project folder. This folder contains all the files you need to upload to your server to have the Dynamic Flash Video Gallery work.

     videogallery/xml/playersettings.xml

     XML configuration file - This is where you make all changes to the look and feel of your Dynamic Flash Video Gallery.

     videogallery/xml/playlist.xml

     Media XML configuration file - This is where you make all changes to the player's content.

     js/swfobject.js

     Deconcept SWFObject is a small JavaScript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible.

     js/expressInstall.swf

     SWFObject has full support for the Adobe Flash Player Express Install feature. Using expressinstall, your users never have to leave your site to upgrade their Flash Player.

     preview.swf

     This is the component swf file which is embedded in your website.

     index.html

     HTML document used to embed the swf file. Please check the source code to see how the variables are passed to the swf file, using any text editor such as Notepad or Textedit.

 playersettings.xml structure: 

     Below you can see what each of the attributes in the XML file means:

<videoplayer 
width = "730" 
height = "410">

     Here you can define the player width and height.

 <autoPlay>true</autoPlay>

     Set the autoplay to true or false. If true, the video will automatically start.

<bufferTime>3</bufferTime>

     Here you can set the buffer time. The higher the number, the longer the user has to wait for the video to buffer before being able to play.

<initVolumePercent>50</initVolumePercent>

      Sets the initial volume value.

<controllerHeight>160</controllerHeight>

     Don't change this. This is the controller height, which will be implemented at the next update, so that the controller can be resizeable.

<controllerUnder>false</controllerUnder>

      You can put the controller under the video, or keep it over it as it is in the preview above.

   <controllerAutohideTime>4</controllerAutohideTime>

     Sets the autohide time, for when the user does not move his mouse, or when he rolls out of the stage.

<disableCenterPlayBt>true</disableCenterPlayBt>

     You can enable/disable the middle button.

<colors>
 	<!-- background of the player, usually black -->
 	<background>0x000000</background>
 		
	 <!-- for play and volume bar -->
	 <backBarsColor></backBarsColor>
	 	
	 <!-- for play and volume progress -->
	 <progressBarsColor></progressBarsColor>
	 	
	 <!-- for play download bar -->
	 <downloadBarColor></downloadBarColor>
	 	
	 <!-- for play bar scrub -->
	 <playScrubColor></playScrubColor>
	 <playScrubStrokeColor></playScrubStrokeColor>
	 	
	 <!-- for volume bar scrub -->
	 <volumeScrubColor></volumeScrubColor>	 		 	
	 	
	 <!-- for the sign of controls -->
	 <controlsSignColor></controlsSignColor>
	 	
	 <!-- for the background of the controls -->
	 <controlsBackColor></controlsBackColor>
	 <controlsBackStrokeColor></controlsBackStrokeColor>	
</colors>

     Self-explanatory attributes. Basically you add the colors for everything here. If a color is missing, it means that the player is using the default color.

playlist.xml structure:

     This xml contains the media content. It also has a node for the thumbnail settings:

<playlist 
itemsWidth = "114" 
itemsHeight = "79" 
itemsMargin = "2" 
distBetween = "5" 
selectedItem = "1"
scrollerScrubColor = "">     

     This is where you define the thumbnail width, height, stroke, distance between thumbs and also the selected item. The last attribute is to set the color of the scrub(now is yellow as in the FLA cause the color is not set).

<!-- if the videoPath misses then the item is considered the type of "image" else "video" -->
<item 
videoPath="videogallery/videos/video1.flv" 
videoHDPath="" 
streamer = "" 
previewPath = "videogallery/images/previews/preview01.jpg" 
thumbPath = "videogallery/images/thumbs/thumb01.jpg"/>

     The videoPath represents the path of the normal video. If you want to add an HD version of the same video, fill the videoHDPath as well.

     The streamer is used for RTMP. Here you can define a path such as "rtmp://server.com/videos/". This is just an example, you should know this if you have FMS installed. Do not change this attribute if you don't use a FMS or any other type of RTMP server.

      The preview path is the path to the big image, where the thumb path is the path to the small image. Note if you don't pass any video, the images will display as a slideshow.  

Flashvars:

     In the html file you can set some variables for the player like dimensions (width and height), the path to the files if you choose to put them in another location rather than the same folder of course, and the media content xml file.                        
     

// PLAYER DIMENSIONS inside the SWF
flashvars.componentWidth = stageW;
flashvars.componentHeight = stageH;	

            
// PATH TO FILES
flashvars.pathToFiles = "videogallery/";
            
// player settings
flashvars.settingsXmlPath = "xml/playersettings.xml";
                	
// playlist xml path
flashvars.plalistXmlPath = "xml/playlist.xml";

Support:

     If you need any help using the product, please contact us at [email protected].