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 26/6/09

 

Note: This file contains a single video, used multiple times for limiting the download size. Enjoy!

 

devario johnson

on 28/6/09

 

Hi guys, thanks again for an awesome file. however, on your demo, it seems like the entire thing had to load before it even played. And i do mean the ENTIRE thing loaded before it played. Also, I clicked on other videos and the same one kept playing.

Is there a way we can have a "next" / "previous" button that is obvious. Say on the right and left of the thumbnails or in the very least mouse listener event that moves the thumbs along on mouse movement.

Thanks guys, great work again.

 

Andrei Potorac

on 28/6/09

 

Devario, thanks for the feedback. We'll look into it, while we fix it you can download the files though, as updates are free as always. :)

 

Andrew Jackson

on 29/6/09

 

Poor player guys. You have to wait to load the entire video...

 

Andrei Potorac

on 29/6/09

 

That's a bug we're addressing right now. Is that the only complaint? :)

 

Andrei Potorac

on 29/6/09

 

Ok, we simply replaced the video because the encoding wasn't good. Now this video works as it should. You don't need to download the files again, simply use your own video, encoded properly. Everything is fully functional now.

Other feedback, let us know. ;)

 

Josh Teale

on 29/6/09

 

Which property changes the yellow colour in your demo? I saw on the blog pictures that it was possible, but I haven't been able to get it to work. Same with the overall background colour of all the buttons. I went through each property and none of them control those two options. Some of them don't seem to do anything such as the "volume scrub" or the "controls background"

 

Andrei Neamtu

on 29/6/09

 

Hello Josh,

Indeed "volume scrub" or the "controls background" don't work right now. The first was supposed to change the color of the volume scrub bar and the second one for the controls Background.
You can download a new version from the website where we worked more on all colors customization and in the future the controller will also be resize able.

Thank you for your observation. It was taken in consideration.

 

Josh Teale

on 30/6/09

 

Great, that works well. The only problem I'm having now is that the video selection area doensn't change. I assume those colours would change with some of the other attributes, but nothing works. Any ideas?

 

jorge hernandez

on 4/7/09

 

Hey gus, can this play youtube videos?

9...321

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