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].
Premium membership
10 Gold Tickets Pack
Get a support ticket
121384 users
Products RSS Feed
Follow us on twitter
support@flabell.com
Paulo Volkova
on 19/4/10
on 20/4/10
Arturo Colon
on 20/4/10
Im trying to include the component in my project. I want to use it as an external SWF which i would load into my container.
Im getting this error if I just load it as it is:
TypeError: Error #1009: Cannot access a property or method of a null object reference. at Sample()I tried following your video tutorial and nothing workings. This are the errors:1172: Definition com.vuzum.videoplayer:VideoPlayer could not be found. 1120: Access of undefined property mcVideoPlayer.Any idea?
on 21/4/10
ern137
on 12/5/10
on 13/5/10
on 13/5/10
on 14/5/10
http://www.aventuraworldwide.com/2010s...
That's where the video should be.
ern137
on 14/5/10
ern137
on 14/5/10
<item startWithHD = "true" videoPath = "videos/dilealamor.flv" videoHDPath = "videos/dilealamor.flv" streamer = "" previewPath = "images/previews/dilealamor.jpg" thumbPath = "images/thumbs/dilealamor.jpg" />if you notice that the streamer doesnt have a link, should i put a link there?
on 17/5/10
Laurence Johnston
on 17/5/10
on 18/5/10
shelbob
on 19/5/10
on 19/5/10
shelbob
on 19/5/10
on 19/5/10
shelbob
on 19/5/10
shelbob
on 19/5/10
on 19/5/10
This means also the js folder with the content inside it.