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.

 

Andrei Potorac

on 21/12/09

 

jj01, we have play/pause functionality now, so we cannot do it like that unless you want to remove that functionality.

 

jj01

on 21/12/09

 

I thought that might be an issue. Would you be able to implement this for me for an additional fee?

 

Andrei Potorac

on 21/12/09

 

Sure, but we would remove the functionality of pause/play. After you purchase the component, please get in touch for a quote.

 

Andrei Neamtu

on 21/12/09

 

New small FIX:
- the code is organized to the new Flabell standard, having a "Sample" class instead of Main.


- rtmp streams are working now


- if an item is image type now it has an attribute "timeToStay" and the list has the "loop" property set to true then the player will count how much time to stay on it before going to the next one.

 

jsantucci

on 31/1/10

 

The Dynamic Flash Video Gallery works great on my local drive but when I transfer it to my host (yahoo) it stops working.

Is there a setting that needs to be changed? Or a file path?

 

Andrei Potorac

on 1/2/10

Please make sure you upload the content from the deploy folder, that came with your source files.

If you changed paths, please check the FAQ section in our forum, where we wrote about pathToFiles.

 

Andrei Potorac

on 3/2/10

 

We just updated the source files, as the preview.swf was wrong. Please download them again if your preview doesn't work online.

Sorry for any inconvenience, and thank you John for reporting the bug! :-)

 

jony227

on 8/2/10

 

I am having the issue where the video has to load completely before it begins playing. I am using mp4 videos, but you mentioned something about making sure they are encoded properly... can you elaborate on that?

 

Andrei Potorac

on 8/2/10

Some software doesn't encode videos properly. We use Sorenson Squeeze for encoding our videos. Any h264 videos work in Flash Player 9+, including mp4.

Have you tried re-encoding the video as another format?

 

Andrei Neamtu

on 11/3/10

 

NEW UPDATE:

Controller total resizeable:
- control progress bar height
- depending on the controller's height the controls autoresize
- control the distance between controls
- control margins of the controller: sides and under
- dimensions of the thumbs
- dimension of the center play button

Customizable colors:
- stroke and fill of the controls bacground
- stroke and fill of the controls sign

You can enable or disable the center play button:

                <disableCenterPlayBt>false</disableCenterPlayBt>
                

Now you can also have a download button for the current playing video or image if you activate it from the xml file:

                <disableDownloadBt>true</disableDownloadBt>
                

For each thumb you cad define in the xml if it will start first with the HD video or the normal video:

                <item startWithHD = "true"
                

Each thumb can also act only as an image(if you don't define the "videoPath" attribute) and you can define how much time the player should stay on the image:

                <item startWithHD = "true" videoPath = "videos/video1.flv"  timeToStay = "3"
                

 

Paulo Volkova

on 3/4/10

 

How to fix resolution video? For example: I want videos playing 640x480 but the player 900x700. I don't want resizing videos to 900x700.

 

Andrei Neamtu

on 4/4/10

Paulo,

Resize the player to 640x480. Inside the "index.html" change the stage dimensions(to resize the SWF):

                
		// stage dimensions
		var stageW = 950;//"100%";
		var stageH = 600;//"100%";

                

or the flashvars(to resize the player inside the swf):

                
// if commented / delete these lines, the component will take the stage dimensions defined 
// above in "JAVASCRIPT SECTIONS" section or those defined in the settings xml	
		flashvars.componentWidth = stageW;
		flashvars.componentHeight = stageH;

                

 

Paulo Volkova

on 5/4/10

 

Andrei.Neamtu, thanks for the explanation, but i want a player with 900x700 px, playing videos inside the player at 640x480 px and viewing photos at 900x700 px. I don't wanna resizing the videos (from digital camera) because lost quality.

 

Andrei Potorac

on 6/4/10

Paulo, we can easily adjust this property for you, after you purchase the file, but note in fullscreen the video still resizes. Would you like to keep the resizing in fullscreen?

987654...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].