Customer Support

Summary

YouTube FLV Player 2008 plays "flv" videos that you've downloaded from the Internet. The controls can be themed, much like the Firefox browser, WinAMP and other popular media tools. Play just one video, or pile them on by dragging more files, folders onto the player. This creates a sequence of videos that you can sit back and enjoy, flipping through them like TV.

Getting Started

Click the Windows "Start" button
Choose "YouTube FLV" folder
Choose "YouTube FLV Player"" application
Click on the YouTube FLV Player screen. The version ships with a theme that shows a film strip with the words "Drag and Drop a video or folder to play."
Use the pop-up menu to select a folder containing at least one video.
Click "OK"
Resize the window by dragging the lower right corner, as with any other window on the desktop. This will shrink or expand the video accordingly.

Other Features

Use the controls to flip through the various videos.

The Play/Pause button does as you expect.
The arrow to the left of the Play/Pause button moves to the previous video
The arrow to the right of the Play/Pause button moves to the next video
The long bar is a "scrubber." Click on the bar and dragging your mouse left or right.
Click and hold on the speaker button. While your mouse is down, move up to increase volume, down to decrease volume. Release the mouse when the volume satisifes you.
The little circle with an "i" stands for "information." Clicking on this will reveal an overlay screen. The screen shows the current file name, its position in the sequence you're playing, and other details. Click the overlay or the "i" button to make the screen go away.

Loading Videos

Drag and drop any FLV file or folder containing FLV files onto the window.
Click on a video while it's playing to add another folder of videos. YouTube FLV will skip over any files that aren't video.
Click on the startup screen to choose a folder of videos.

Creating your own Theme

controls.png

Version 1.x of YouTube FLV Player allows advanced users to create and share their own themes. A theme is defined by one main file, theme.xml, plus a set of images that are currently located in the "i" subdirectory. These images contain decals that YouTubeFLV applies to the controls. The entire Classic theme, for example, is shown above in the controls.png file.

By default, the application installs itself in C:\Program Files\YouTubeFLV. Inside this directory you will see:

theme.xml, an XML text file describing elements of the "theme"
i/controls.png, an image in the "i" subdirectory containing the decals for the video controls and background

Understanding theme.xml

Theme.XML has the following general structure:

<config> ... header information ... <bitmaps> ... a set of bitmap 'cutouts' from image files ... </bitmaps> <controls> ... a set of 'controls' that apply these cutout decals to the player ... </controls> </config>

theme.xml Header

The important element of the header information names the theme:

<theme>... insert your theme name here </theme>

For example, the player ships with a Classic theme:

<theme>Classic</theme>

Another item specifies the base directory, relative to location of theme.xml, for loading images. By default, the theme is stored in

C:\Program Files\YouTube FLV\theme.xml

Now examine the element, which states

This represents a pathname of

C:\Program Files\YouTube FLV\i\

The last slash is up to you. I use it so that I don't have to specify a slash before every bitmap file.

theme.xml Bitmaps

Within an XML heading of are individual XML entries of the form

i<bitmap id="snd" src="controls.png" x="191" y="8" w="20" h="16" />

The required attributes are:

id - Name of the bitmap src - Filename containing a sheet of bitmap images x - x location of upper left corner of bitmap, in pixels, 0 = left edge, n = right y - y location of upper left corner of bitmap, in pixels, 0 = top edge, n = bottom w - width of bitmap, in pixels h - height of bitmap, in pixels

This format tells YouTubeFLV to create a bitmap with a name from the id element, "snd." Think of this bitmap as a decal from when you were a kid, either building a model airplane or attaching decals to your elementary school notebooks.

The bitmap is pulled from a larger sheet of images, as specified in the "src" element. This filename is attached to the pathname we specified earlier. Continuing with our example, this tells YouTubeFLV to look for the file

C:\Program Files\YouTube FLV\i\controls.png

Now comes the fun, perhaps tedious part. YouTubeFLV needs to know the exact pixels where the decal starts, using x,y coordinates. This is the x,y position of the upper left corner of your bitmap decal. x increases to the right, y increases going down.

The "x" represents the number of pixels from the left edge of the image, where the first pixel is "0" and the last pixel is "w-1" where w is the width of the image in "src." The "y" represents the number of pixels from the top of the image in "src." Here, y="0" represents the very top of the image, up to h-1, where "h" is the height of an image.

The next two attributes "w" and "h" tell YouTubeFLV the width and height of the bitmap you wish to pull of the bitmap sheet. Both of these numbers are in pixels. Reading the bitmap XML above, YouTubeFLV would look for a bitmap where

the upper left starts 191 pixels from the left, 8 pixels from the top of C:\Program Files\YouTube FLV\i\controls.png
the bitmap is then a rectangle 20 pixels wide, and 16 pixels high

YouTubeFLV essentially cuts out the bitmap and stores it internally, using the name you gave it, "snd". You will typically need bitmaps for the various states of the controls, one for when a mouse is over it, one for when the mouse is not over it. Other bitmaps are used to "fill" the region of a control. This is how the scrubber works. The track and progress are created by stretching a thin line of graphics all the way across the display area.

Launch Screen

The simplest way to skin the player is to change the initial background image. YouTubeFLV calls this the "help" screen. To change it, use the reserved name "help" as the ID for a bitmap:

This tells YouTubeFLV to use the image "help.jpg" within the directory, or the following for our example:

C:\Program Files\YouTube FLV\i\help.jpg

theme.xml Controls

A theme uses bitmaps to skin the controls of the YouTube FLV player. Each control is specified with a tag in the section of theme.xml:

The attributes of a control are

id - name of the control to skin (see below) x - x location of upper left corner of control, in pixels. 0=left, n=right y - y location of upper left corner of control, in pixels. 0=top, n=bottom w - width of control, in pixels h - height of control, in pixels image - name of the bitmap that will be used when the mouse is not over the control hover - name of the bitmap that will be used when the mouse is hovering over the control

Every control is a rectangle w x h located at (x,y). Any shape is possible, however, by using transparent pixels in the source bitmap. Check out i/controls.png for an example.

Background Fill

Note that controls are treated as rectangles of size w x h, placed at (x,y). The (x,y) location is relative to the upper left corner of the "background" control. The background is a special container that expands and contracts as the user resizes the window. In the initial release, this background must be a fixed height. It also has a minimum width, which is calculated by adding up the widths of all the other controls in the container, plus 4 pixels on either side so that it looks nice on the display.

Let's look at an example. The Classic theme specifies a background:

The height attribute "h" specifies the fixed height of the background. This will be the height of the control bar, placed beneath the video. The "image" attriute specifies the name of a bitmap that is used to fill the control bar area, underneath all the controls. YouTubeFLV repeats the image horizontally and vertically, tiling the entire area as the screen is resized. The width attribute "w" tells YouTubeFLV where to begin tiling in the x direction. I typically use the exact width of the background image.

The "x" and "y" attributes should be set to zero "0" for now. You can change them for yucks. They introduce an offset on the left of (x,y) pixels. Not really useful at the moment.

Experiment with different backgrounds. Tiling is great for textures. You could use a large picture, however. As users expand the window, more of the picture is revealed in the control bar area.

Basic Controls

The basic controls and their id's are

id="play" The play button id="pause" The pause button id="next" The next video button id="prev" The previous video button id="menu" The menu button

The play button is shown whenever the video is paused (think about it). Likewise, the pause button is shown whenever the video is playing. I typically place these at the same x,y location and tune the graphics so that it appears as a single, unified button.

The next button advances to the next video in a sequence. The previous button goes in the opposite direction.

The menu button activates the overlay. Press it again to deactive it.

Volume Scrubber

A "scrubber" is a media industry term for something that you move back and forth, changing some attribute of a video. The web calls these scroll bars or sliders. The volume srubber is represented by a track that is drawn above the sound or mute button. A small knob is moved or scrubbed vertically. Moving it up raises the sound, moving it down lowers the sound. When the knob is left at the bottom of the track, sound is muted.

The volume scrubber is activated by pressing and holding either the mute or sound button. These buttons have the following ids:

id="sound" An indicator that the video is playing with sound id="mute" An indicator that the video is muted

The video scrubber is a fixed height (about 80 pixels), and is filled with a special bitmap "volume_fill":

The knob of the scrubber, which moves up and down to raise and lower the sound, is a second bitmap "volume_knob":

YouTubeFLV paints the knob using the volume_knob bitmap, centering it horizontally within the track that is as wide as the width of volume_fill. In our example here, the track will be 15 pixels wide. The knob is also 15 pixels wide. Therefore, the knob and track will start at the same x position.

The track is then centered above the "sound" and "mute" buttons. In our example, the sound control is specified as:

The control itself is 20 pixels wide by 16 pixels high. The track is 15 pixels. The track is centered by placing its starting x value at 348. YouTubeFLV adjust the starting Y position of the volume scrubber to leave a small, 2-pixel gap between the top of the sound/mute buttons and the bottom of the volume track.

Video Scrubber

The video scrubber moves backward and forward in time within the video. As before, a "scrubber" is media industry term for, essentially, a scrollbar. The act of moving the scrubber back and forth is called "seeking," for seeking a position in the video to watch. The YouTube FLV video scrubber has four parts:

a track
a percent loaded indicator
a percent seeked indicator
a knob

These items are painted on the screen in the order seen here. First, YouTube FLV paints the track. Next, it paints the loaded indicator. Third, it paints the seek indicator. Finally, it paints the knob. This occurs several times a second as the video advances or the user scrubs the video.

Variable width controls

YouTubeFLV treats the track, load indicator, and seek indicator as horizontal rectangles. These rectangles are tiled with graphic bitmaps. The rectangles start at the (x,y) position of their respective control. The rectangles expand up to (x+w,y), where the x+w position represents "100%" of its value. The load bar is at 100% when all the video has been loaded from the filesystem. The seek indicator is at 100% when you're at the end of the video, 50% when at the middle, and 0% when you start. The track is just like the load and seek bars, but is always stuck at 100%.

The ids are as follows:

id="seek_track" The track indicator id="load_bar" The percent loaded indicator id="seek_bar" The percent seeked indicator

Each of these controls requires the following attributes:

w="..." The 100% width of the control h="..." The fixed height of the control x="..." The x position of the upper left of the control, in pixels y="..." The y position of the upper left of the control, in pixels image="..." The name of the bitmap used to fill the control, from 0-100%

Our sample includes the following:

Note how all three of these controls start at the same (x,y) and share a common width and height. This gives us the appearance of a single bar, one that changes color as bits are loaded or played. Also, each control is skinned with a single strip of color, which includes gradient effects for an intersting texture when repeated. You'll notice this as three little vertical strips of grey and black in i/controls.png

Scrubber Knob

The scrubber knob is a control that starts at (x,y) and moves horizontally to (x1,y). These coordinates represent the upper left corner of the scrubber knob image. Whenever you begin scrubbing video, the mouse drags the knob in the x direction over the interval [x,x1]. When you place the knob down at position x2, where x <= x2 <= x1, YouTube calculates the desired seek percentage as:

seek percentage = x2 / (x1 - x);

Thus, when x2 is at x, the seek percentage is 0. When x2 is halfway between x and x1, the seek percentage is 0.5 or 50%. Finally, when x2 is at x1, the seek percentage is x2. YouTube ensures that the knob will not move outside the [x,x1] boundaries.

The seek percentage represents how far you want to go into the video. YouTube FLV then attempts to move the playhead as close to this as possible. However, its not always exact. The FLV format only allows people to seek to certain positions, depending on how the video was encoded on a server. YouTube and others do a great job, so you can seek almost anywhere. Others may have only one or two places, or sometimes none at all. Your mileage may vary.

The knob is specified with a where

id = "scrubber"

This control requires the following attributes:

w="..." The width of the knob h="..." The height of the knob x="..." The x position of the upper left of the knob, in pixels x1="..." The x1 position of the upper left of the knob, in pixels y="..." The y position of the upper left of the control, in pixels image="..." The name of the bitmap used for the knob hover="..." The name of the bitmap used when the mouse is over the knob

Our sample uses the following XML:

This creates a scrubber that starts at (108,9) and glides to (328,9) over the x interval of [108,328]. The scrubber is 10x15 pixels. By default, it is filled with the bitmap "scrub". When them mouse is over the scrubber knob, it is filled with the bitmap "scrubO". These bitmaps were defined earlier as:

<bitmap id="scrub" src="controls.png" x="241" y="25" w="10" h="14" /> >bitmap id="scrubO" src="controls.png" x="253" y="25" w="10" h="15" /<