Flash AS2 Pro Video Player – taterboy
March 7th, 2009 | Filed under: ActionScript 2, Flash, Free Components/Classes, Tips, Video
There are a some really nice video/swf players out there already, here is mine. It was first built in 2005, thus the out-dated design, but has been upgraded with some nice features over the years.
Some of the features include dynamic colors on the LED display that can be easily updated to match a site color scheme. Dynamic video size, AutoLoad, Jpeg placeholder, cookie support, and can run standalone or loaded into your own Flash app.
Another interesting feature is a loading system that tries to figure out the client’s download speed and buffer the correct amount. This works pretty well in most cases but some web servers can be unreliable when it comes to streaming video with a consistent data rate. So buffer times will very with each download.
Included are FLAs to skin the GUI and update the display logos. This is the pro version we were planning on selling, but were too busy with other projects and never got around to it.
Just a heads up, I have another video app that will be released shortly. It is very similar to my Scrollbar class, in that you do not skin it, the code wraps around artwork that you create to control flvs and audio files. That way you can go crazy with the UI design and the layout of each control. It is written in AS2 and will be coming soon, so check back.
Below is a demo and the contents of the included readme.txt file.
--------------------------------------------------------------------------------------
HD-Video Player 2.0
Created: 3/2006
Build Date: 3/7/2009
This full featured flv / swf video player was built to be super easy to incorporate into your existing site or Flash applications. Controls include fast forward, rewind, pause / play, volume, and scrubbing playhead.
Extra features:
1. Custom Colors, adjust the player colors to make it look even more at home on your site.
2. Place Holder Images, the player can auto load and play or show a jpg placeholder until the user clicks the play button, saving bandwidth.
3. Cookies, You can set cookies so that video automatically play the first time a user comes to your site, but each time after, the video will wait for user interaction.
4. Custom skins and logos. You can easily change the color of the LED display of the current skin, but if you need more of a custom look, you can modify the video_bkg.fla to create your own video skin. You can also change the logos that appear while loading and play by modifying the logo.fla and logo_play.fla.
5. Stop video from javascript. Flash video can get stuck in the player plugin, window.document.HD_Player.SetVariable("javaCall.val",1); ,replace "HD_Player" with Player id.
Quick and Easy Start:
If you have an flv file, just re-name it "video.flv" and place it in the same directory as the hd_player.swf . Run the hd_player.html file and you are watching video. Or you can copy this code to your own html file and again you are watching video.
<!-- <object width="326" height="275" id="HD_Player" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="HD_Player.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="HD_Player.swf" quality="high" bgcolor="#ffffff" width="326" height="275" name="HD_Player" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object> -->
Default 320 x 240:
OK, if your video is not supposed to be viewed at 320 x 240. Just modify the width and height attributes of the object code to the size your video plus 6 pixels for the width and 35 pixels for the height. This will allow your viewers to see the nifty controls and border.
*Hint: width = video width + 6 and height = video height + 35 to allow room for the border and controller.
Variables (for HTML object/embed):
1. acolor =[ rgb hex value] : sets the display of the interface to the desired color (ie. "F1E346" , "69C1FF", "28E4C3", "F1AE3B", "A4D67C"). Lighter colors seem to look the best. Default : grayish-green color.
2. stopl = true : if you want the video to be paused after it is loaded set stopl to true. Default: auto play.
3. vid = [path to video]the url or path to the flv or swf you would like to view in the HD Video Player. Default: "video.flv".
4. ljpg = [path to jpeg]a jpeg place holder for your video file. If you would like the viewer to see until the play button is clicked. If the ljp variable is used there is no need to use the stopl variable.
5. cookie = true : if the video is loaded more then once, the video will pause an not auto play. default is false. If ljpg and cookie are both set, then the jpg will load instead of the video after the video has automatically played through at least once.
(for loading into Flash)
6. vw = actual video width (DO NOT add 6 here). Default : 320.
7. vh = actual video height (DO NOT add 35 here). Default: 240.
*Hint: vw and vh variables are only used for video being displayed inside another flash application.
*Hint: Variables can be used in the html object tag or in the parent clip of of the HD Video Player in your flash application.
HTML Code Example:
Where ever you have "HD_Player.swf" add a ? and variables you would like to add like so.
"HD_Player.swf?vid=video1.flv&acolor= 28E4C3&ljpg=video1.jpg"
The above example will designate a new flash video file other then the default "video.flv", change the color of the interface to a nice shade of teal, and load a jpg preview until the user clicks the play button.
You can also flashVars. Check out "HD_Player_js.html for flashVars and AC_RunActiveContent sample.
Flash Application Example:
vid = "video1.flv";
vw = 320;
vh = 240;
acolor = "28E4C3";
ljpg = "video1.jpg";
videoLoader.loadMovie("HD_Player.swf");
The above example code is place on the main timeline or the parent movie clip containing the MovieClip the video player will be loaded into. It designates a new video file, changes the height and width, interface color, and pulls in a temporary jpeg until the viewer clicks the play button.
Functions:
to control the video player from a flash application you can control the video using the following functions.
plyVid(1); = play video
plyVid(0); = pause video.
Example:
If the HD_Player.swf was loaded into a MovieClip instance called "videoLoader", we would call videoLoader.plyVid(1); to play the movie and videoLoaderplyVid(0); to pause.
License:
The HD_Player is free to use personally or commercially as an interactive flv/swf player. Feel free to use it in a website or Application needing an flv / swf player. It is not be be bundled or sold. It is not to be branded other then the color features that are available or the media that is to be displayed inside the player. It is not warranted or supported and is to be considered "As Is".
If you would like to share your successes using the HD Video Player, visit the contact page at www.taterboy.com.
©2009 Hdinteractive, Inc and Taterboy, Inc. All rights reserved.
--------------------------------------------------------------------------------- |
Demo:
|
RSS feed for comments on this post. TrackBack URL
Great tutorial, I only draw but will pass your post address to my programmer. He will love it. Thanks for sharing.
Regards,
Matt Kolorowanki,
Illustrator
Comment by Kolorowanki — June 29, 2009 @ 1:38 pm
I have launched my new advanced hd flv player with lots of new features. Just visit and review my player.
Comment by Flv Player — September 11, 2009 @ 6:18 am
Thanks a lot !!!! Your explain is very nice!!!
Comment by Robero C. — September 29, 2009 @ 3:28 am
Hi, i have downloaded the source, but its empty.
Comment by Sreelash — November 20, 2009 @ 12:40 am
I just tried it and it seems to be working now, possibly a server glitch or you are behind a corporate firewall that is pulling everything out. Some firewalls are set to discard zips with javascript files in them.
Here is what you should be getting.
AC_RunActiveContent.js
video_bkg.swf
HD_Player_js_resize.html
HD_Player_js.html
HD_Player_pro.swf
index.html
logo_play.fla
logo_play.swf
logo.fla
logo.swf
README.txt
video_bkg.fla
Comment by taterboy — November 20, 2009 @ 5:36 am