New version of our AS3 open-source VideoPlayer

Post by Phil / Oktober 14th, 2009

Hi there.
After some inquiries we finally added the possibility to customize the Apdev VideoPlayer – only changing colors at this time but it’s a first step in the right direction …

You can now change any color of any object/control that is used within the videoplayer – but check the ApdevVideoPlayerDefaultStyle.as for all the attributes that can be manipulated. And it’s up to you whether you change the attributes using pure ActionScript (1) or our html-version of the videoplayer and pass the values in via flashvars (2). With approach 2 you don’t even have to know ActionScript or open a flash-file – just embed the videoplayer-swf into your website and customize it via flashvars.
For further information, see the upcoming examples.

(1) If you want to use the VideoPlayer in a pure ActionScript project, you can create a new Styles-Object, set all the values you want to change. This object must then be passed into the constructor of the ApdevVideoPlayer and voilà … you got your own custom player.

Create your own Styles-object

package com.apdevblog.examples.style 
{
	import com.apdevblog.ui.video.style.ApdevVideoPlayerDefaultStyle;

	/**
	 * Custom style-sheet for a custom VideoPlayer.
	 */
	public class CustomStyleExample extends ApdevVideoPlayerDefaultStyle 
	{
		/**
		 * constructor.
		 */
		public function CustomStyleExample()
		{
			// player
			bgGradient1 = 0x333333;
			bgGradient2 = 0x000000;
			//
			controlsBgAlpha = 1.0;
			//
			btnGradient1 = 0x333333;
			btnGradient2 = 0x000000;
			btnIcon = 0x66ff00;
			btnRollOverGlowAlpha = 0.2;
			//
			timerUp = 0x66ff00;
			timerDown = 0x999999;
			//
			barBg = 0x333333;
			barBgAlpha = 0.5;
			barLoading = 0x333333;
			barPlaying = 0x66ff00;
			//
			playIcon = 0x000000;
			//
			controlsPaddingLeft = 0;
			controlsPaddingRight = 0;
		}
	}
}

Then pass it into the ApdevVideoplayer-constructor:

// create own style
var style:CustomStyleExample = new CustomStyleExample();
			
// create videoplayer
var video:ApdevVideoPlayer = new ApdevVideoPlayer(320, 240, style);
			
// position videoplayer on stage
video.x = 25;
video.y = 25;
// add videoplayer to stage
addChild(video);

… and you’re all done.

(2) Second alternative: You can grab the html-version of our videoplayer from google code and adjust the .html file – no flash/actionscript needed.

// ...

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
    // <![CDATA[

    var width = 380;
    var height = 240;
    var movie = "htmlvideo.swf";

    // ...

    var flashvars = {};
    
    // video + img info
    flashvars.v = "video01.mp4";
    flashvars.img = "videostill.jpg";
    
    // STYLES
    flashvars.playIcon = "#ff0000";
    flashvars.controlsBg = "#ff00ff";
    flashvars.controlsBgAlpha = 1.0;

    // ...

    swfobject.embedSWF(movie, replaceDiv, width, height, flashVersion, express, flashvars, params, attributes);

  // ]]>
</script>

// ...

Sooo … there is no reason why you shouldn’t be already using our VideoPlayer :D
Check it out.
Or take a look at the docs first and then download the whole package.

Enough for now … but keep the feedback coming, we’re still eager to improve the player over time.

Cheers.

1 Trackback

www.video-flash.de / Flash & Video
Oktober 23rd, 2009 / 09:04

18 Comments

vijNovember 2nd, 2009 / 07:19 / #817

hi,
awesome work
but tell me if i want playlist so hw can i add some vedios with playlist

thank u
PhilNovember 2nd, 2009 / 09:37 / #818

hi vij. this feature is not implemented yet – but i’ll definitely put it on the list for the next update. check back at the end of the week …

phil
DanielNovember 16th, 2009 / 17:26 / #838

Great work!! Saves much time! :]
LudoNovember 19th, 2009 / 16:27 / #842

Hey ! This code is very useful, thanks.
Anyway, i’m wondering i there is a way to play the video full-browser (i mean not full screen).
I tried to find more documentation, but … can’t find anything .

Thanks again.

Ludo
PhilNovember 19th, 2009 / 16:44 / #843

hi ludo.
not at the moment – but i already have an idea how this can be done.
when i have a minute, i’ll try an integrate this into the player.
so check back … maybe after the weekend.

cheers,
phil
AlexNovember 24th, 2009 / 20:40 / #854

Hi, I tried out the videoplayer you have created and I must say it is a nice, clean, and tiny player. I did adjust it visually but technically I am still trying to figure out why the controls are not fading out. I looked at the timer event but I could find an immediate solution. Could you please, whenever it is that you read this, just email or post may be a suggestion how to fix it. The controls do disapper when controlsAutoHide is set and the mouse leaves the player, but when the mouse remains within its boundaries the controls are always there. Cool would be too to implement an Event.MOUSE_LEAVE for the whole swf of the player is embedded….

However, you did a really nice work! Thanks a lot. I will try some more things to correct the auto hide functionality…

Cheers from Bremen
PhilNovember 24th, 2009 / 21:05 / #855

hi alex. you could email me your example and i’ll take a look at it …
udo rudiDezember 24th, 2009 / 09:19 / #877

great work, but why are these stupid ugly green colors on the control ?
I have no time to configure hundreds of style parameters, before I can use the player.
Why not let the colors in default grey like the jerowing player ?
PhilDezember 24th, 2009 / 13:08 / #878

hi udo,
there is a new version available here:
http://apdevblog.com/version-1-0-3-of-the-apdev-videoplayer-released/

i changed the standard colorset of the skinned html videoplayer to a more subtle grey – hope you like it ;)

cheers
phil
udo rudiJanuar 26th, 2010 / 13:26 / #984

hello phil,

thank’s a lot. without the neon green it’s very usefully….
timboMai 31st, 2010 / 23:08 / #1158

Forgive this dumb question, but I am a noob. What IDE did you use to create this? I am trying to build this in Flex Builder, but I am having problems. I have all of Adobes tools, so I can use whatever would be easiest.
PhilJuni 1st, 2010 / 08:46 / #1160

hi timbo,
i used FDT (a eclipse plugin for coding AS3) but flex/flash builder should work fine. just create a new AS-only project and copy our files to your new project folder.

cheers
phil
timboJuni 1st, 2010 / 19:30 / #1163

awesome thanks. In Flex, i think the Main class needs to be in the src folder, is ApdevVideoPlayer.as the Main class?
PhilJuni 1st, 2010 / 23:51 / #1164

mmm, i would just create an empty main class and add a new ApdevVideoPlayer instance to that … should work.
MaxSeptember 10th, 2011 / 11:53 / #1616

Hi Phil,

nice work, thanx.
Is it possible to add an skip-to-start-button to the player?

regards
max
EugeneOktober 5th, 2011 / 11:50 / #1622

If you refresh a site with the player in Internet Explorer, the player becomes very small!!!…(((
EugeneOktober 5th, 2011 / 11:52 / #1623

Please repair this!!!…
FrankJuni 15th, 2012 / 08:51 / #1669

Hi Phil !
Im working on my thesis and would juse your Player.

So I have a question does your Player streaming content?

Best regards
Frank

aron / philipp development blog