ActionScript 3 Full Browser Background Video
An Full Browser Background Video Demonstration
Supports either progressive or streaming video and audio (AAC) files (streaming tested using Red 5 and FMS). The demo consists of 3 classes, the main NpVideoProvider Class handles acquiring video, a NetConnect Class handles all netConnection duties, and an event class handles all the necessary events. Originally I wrote a class to handle testing BandWidth on streaming servers, but I didn’t think people would want that. If I’m wrong, I can add that functionality back in?
Class allows for loading in seperate files. So it would be pretty simple to turn this into a video slideshow. Class also, dispatches progress events along with events for each relevant netStatus event.
Class Features.
- External Video files.
Either .flv, or .mp4 (h264), f4v, m4a (AAC), m4v, files.
Get / Set video looping.
Dispatches Progress events.
Get / Set a load point at which point video plays.
Get / Set video source files.
Play, Stop, Pause Methods.
Get / Set Seek Points.
Get / Set Sound volume.
Get / Set Sound Pan.
Get / Set Video Smoothing.
Get Video MetaData.
Get Video CuePoints.
Get Video XMP Data.
Get Video Image Data.
Get Video Text Data.
Definable Min scale size at which point the videos are clipped.
Supports FullScreen Events.
The demo contains two examples, one similar to what is online and one much more basic version. When I have time I’ll finish off a 3rd demo for using the NpVideoProvider Class as the base for a FLV player.
Updates11 Oct 2008: Renamed a property. Updated help files, updated demo files to more clearly show how to avoid stretching your video files.
08 December 2008: Added in support for f4v files, by adding in callback handlers for XMP, text and Image Data. The demos have been updated to demonstrate pulling in cover art from both a video and AAC audio source using the NpVideoProvider Class. The class is at Revision 1.1 now.
In this demo, I’m also using a tiled Background class, as a pattern overlay. This decreases performance notably. There is an option to turn this off in the demo.
View Example
Here is an example; http://www.noponies.com/dev/as3_fullscreen_bg_vid/
Source Files
Donate if you want these source files
Dependencies
None.
April 21st, 2008 at 11:23 am
nice dali….i saw an example of this the other day on a site and the first guy i thought of was you…how big are those vid files that you are using just out of curiosity? great work….
April 21st, 2008 at 11:54 am
Zara,
They are both about 1meg in size, H264 encoded mp4’s. Cheers.
April 21st, 2008 at 8:51 pm
Really nice stuff, as always! I?Ǭ¥ll donate to get the code when it?Ǭ¥s finished.
April 25th, 2008 at 5:26 am
Hey Dale, this really looks awesome. I have been wondering how to pull this off for a long time. I would like to donate, when do you think it may be ready?
April 25th, 2008 at 3:26 pm
Barrett,
In a few days it should all be done. I’ve extended the class to also work as a basis a generic .flv/.mov player. Once that is all error tested etc, I’ll upload it.
April 26th, 2008 at 12:50 pm
a generic player with controls etc??……awsome dale…surley a bunch of people will be waiting in anticipation to donate….thx for your hard work…
April 28th, 2008 at 6:53 am
hey dale, lovely site with lovely examples – this being one – so nice code!
ive no problem donating if im going to need and use this code – hopefully one day soon
– but hows the donation ware thing going to work cos im not familiar with the process 
April 28th, 2008 at 2:40 pm
Ant,
When its ready, and you donate, you will get access to a secure part of the site, and the files.
May 11th, 2008 at 1:03 pm
Great Work! I’ll donate too when its ready.
May 12th, 2008 at 3:04 am
Be quick, i need it
. Nice work. Waittinngg..
May 16th, 2008 at 8:10 am
Hi, I wish to get the file of this implementation, but it’s ready yet or not, I will donate that’s sure.
Congratulations great work !!!.
May 16th, 2008 at 4:13 pm
hye, excuse me to ask, but i would likre to know if the file is downloadable and if it does work with AS2
Thank you very much
Great work!
May 17th, 2008 at 2:23 pm
The core classes are complete but not the demo implementation, which needs a little more work. Will be ready when its ready, which should be in a few days or so.
May 21st, 2008 at 2:09 am
Dear Noponies,
Wow! The script is amazing. I’m a young graphic designer gone flash developer, but I’m still struggling with as3. I know it is donation ware, but where can I find source code for making video fullscreen like you did?!
May 21st, 2008 at 6:42 pm
Luke,
I just wrote it from scratch.
May 28th, 2008 at 6:47 am
great!
I would be glad to pitch in for this too.
nice work.
pierre
June 10th, 2008 at 12:20 am
Hello,
Just to be sure that I well understand
If I done some money, you will send me the script?
Thanks
June 10th, 2008 at 1:36 pm
Marie,
When its all done, I’ll let you know.
I’m currently adding in support for streams…taking longer than I thought,
June 20th, 2008 at 5:18 am
[...] http://www.blog.noponies.com/archives/85 Escrito por: Pablo Davi e Gravado em: ActionScript 3, Novidades, [...]
June 26th, 2008 at 11:26 am
Dale,
this looks great. I am trying to make a super simplified version for a looped bg video in as3. Are there any resources you found especially useful??
thanks,
michael
June 26th, 2008 at 1:37 pm
Michael,
I just sifted through the Adobe docs, and some articles on DevNet. The most complicated element was getting stream server support.
July 23rd, 2008 at 11:10 pm
Can you easily remove the bottom controls and just ave the video run in a loop?
July 24th, 2008 at 1:10 am
Kris,
Yes, in the files you download, there is a simple version, that does just that.
July 27th, 2008 at 7:01 pm
Awesome, donation coming your way soon.
August 1st, 2008 at 7:30 am
There’s something wrong with the demo.
The videos aren’t playing and the menu at the bottom won’t expand.
August 1st, 2008 at 1:42 pm
jm,
I just tested it, worked fine.
What browser etc are you using?
August 11th, 2008 at 2:22 pm
Hi… I?Ǭ¥ve donated and downloaded this files but i?Ǭ¥m having a problem… Firefox and Ie when showing the page are using about 80% of the computers resources. Do you know what?Ǭ¥s going on?
Yhanks for all and keep up the good work!
August 11th, 2008 at 3:05 pm
Didi,
Its a processor intensive operation running fullscreen video. On my machine it uses about 70% of the cpu. Turning off the overlay, (if you have it on) will lower that CPU useage.
August 11th, 2008 at 3:42 pm
hi…
Another question… I published everything remotely on my server and the video don?Ǭ¥t load! Locally is 100%. Do you know what am i missing?
Thanks
August 11th, 2008 at 7:13 pm
Didi,
Not sure, maybe the swfObject embedding script, or the path to your flv could be wrong etc.
August 20th, 2008 at 5:31 am
Hi Dale,
I use rtmp videos with FMS3 and mp4 with your exemple.
Work like a charm ! but :
How to use scrubber with your exemple and how to add more 2 videos ?
, It’s possible to add graphic buffer ?
Can you add xml list or somthing like this ?
Last request
Thanks
Greats works and thanks for sharing
Donate OK
September 4th, 2008 at 4:00 pm
I’m working on a project that has the mouse movement back and forth controlling the video playback. Is there any way to make the video scrub smoother? Here is the code I have so far:
private function mouseMoveHandler(event:MouseEvent):void
{
//trace((event.stageX)/stage.width);
vid.seekAsPercent((event.stageX)/stage.width);
}
Thanks for your help!
September 4th, 2008 at 9:30 pm
Matt,
I usually use a timer when making controllers for this class. I’ve not actually tried with a mouseMove. Have you tried adding in the event.updateAfterEvent() method to your function?
September 5th, 2008 at 6:45 am
Hello Dale,
I’ve just downloaded the files of this video player, and when I’m trying to play FLV’s is not working properly. I’m just changing the loadFile root, for the appropiate one.
Apart from that, I wanted to know if there is a way where I can randomize the play order of the videos, or loop one after the other (instead of just looping the same video). Or XML support instead of direct inputing.
September 5th, 2008 at 6:51 am
(if you can just link this comment to the previous)
I also wonder why when I’m trying to play the basic fullscreen, the video doesnt play fullscreen. If could make it work full screen with other videos in a randomize order (without controls or anything) i would be great.
Regards
September 5th, 2008 at 1:00 pm
I found you through Google search using Chrome browser. Works lovely in Chrome, by the way!
I will be donating next week. This is what I’ve been hunting for the past few days.
Now, I have a few questions:
1. Can I place my content over the video (CSS), while the video runs in the back
ground? How?
2. Can I set the code to play once and not loop? How?
Thanks!
Hipnotik
September 6th, 2008 at 1:51 pm
Hipnotik,
Yes, you can do all of those things. The class has a setting, for looping. If you don’t want it to loop, you turn it off.
September 6th, 2008 at 1:56 pm
Jaramore7,
It sounds like your FLV has damaged meta data.
Try moving the original FLVS the file comes with to your new directory and seeing if they still play.
You just have to make a XML links to your video class yourself, and pass each file you want to play to the video class from that. This class is supposed to just play video. Not load in or handle XML etc.
September 25th, 2008 at 5:26 am
Hey Dale, thanks for the suggestion. I actually found out the problem was that the flv I was loading in had keyframes every 24 frames vs every frame. Now the video is working perfectly scrubbing back and forth with the mouse move. I was wondering, how do you access the cue points in the flv with this, I didn’t understand the documentation. I’m going to have different text appear at every cue point in the video, with a link.
Thanks for any help!
September 26th, 2008 at 8:25 am
I’m doing a school project that about carbon footprint and I’ll like to have a fullscreen video background for the project. and your example is along the lines of what I’m trying to achieve. How do I get a hold of the class to try it out?
October 8th, 2008 at 5:10 pm
Hi Dale.
First of thank you for the great work.
I am having a problem with my video not getting resized proportionally. I think it maybe is not picking up the dimensions of my flv.
The video playback is fine – only problem is the scaling.
Any suggestions?
Thanks,
Will
October 8th, 2008 at 7:29 pm
Will,
The problem will be related to how you pass the video you are loading in to the NpFSObjectResize class.
THe first thing you need to do, is make sure you can set your videos dimensions correctly before you pass it to the NpFSObjectResize class. Simply set the width and height of your instance of the NpVideoProvider class to match your video. If you don’t know those dimensions, listen for the metaData event, and then set your videos dimensions. The reason for needing to do this, is that by default, Flash will size all new video instances at 320*240. Which is probably not the size or aspect ratio of your video.
The second issue. There was a bug in the NpFSObjectResize class, which I have since corrected that made it behave bad with video. You can simply download the NpFSObjectResize class again, and replace your copy with a newer version.
Hope that helps.
October 9th, 2008 at 3:18 pm
Hi Dale.
I am not quite sure where I need to set the width and height.
Can you tell me exactly where i should be doing this?
Thank you.
October 10th, 2008 at 3:09 am
Before you apply the instance of the NpVideoProvider to the NpFSObjectResize class.
What demo file are you using?
October 10th, 2008 at 6:38 am
I am sorry, but I am not so much of a code-wizard. Yet.
I am using the Actionscript 3 Full Browser Background Video demo, basic version with just the video looping.
October 10th, 2008 at 9:40 pm
Will,
Send me an email from the address you used to get the file and I’ll send you some sample code.
October 11th, 2008 at 1:33 pm
Dale,
I’ve sent you an email.
October 15th, 2008 at 10:02 am
Great stuff!
Is it possible to seemless loop a progressive loaded h264-encoded mp4 (with correct moov atom at the beginning)? I can’t figure out, how to do it without a hickup. (Sorry for my bad english, I am german).
Thank you and best wishes!
_Jerry
November 5th, 2008 at 2:54 pm
Thanks for this great class. Is there a way to fade in a video? if so how do i go about doing that. Thanks
November 6th, 2008 at 3:44 am
I’m trying to use the onCuePoint function in the video class and I can’t seem to get it to work, can you post an example of it on here
November 9th, 2008 at 12:31 pm
Hi Dale.
Nice file!
I have one simple question. You mention in the BasicFullScreen class that if my video is not 4-3 aspect ration i need to change it in the NpFSObjectResize class, but I cannot find the variables in the file, that i have to change. Can you tell me exactly how to set my aspect ratio to 16:9 ? Thanks alot! George.
November 9th, 2008 at 7:55 pm
George,
You need to set your flv’s dimensions before you pass it to the NpFSObjectResize class. Exactly how it occurs in the demo file.
November 9th, 2008 at 8:57 pm
I have already done so, but it does not scale proportionally to the 16:9, instead it scales to 4:3.
And you write in the comments that I must change my aspect ratio in the NpFSObjectResize
November 10th, 2008 at 9:06 am
I got it, it was because my video didn’t align to center. Thx
November 20th, 2008 at 4:53 am
Hi,
thanks for writing this class, it saved me a bunch of time.I’m attempting to use these classes on a new site that i am building. There are four main sections and each section had its own background video. The video gets loaded up when you open a section. The issue I’m having is that when you first load up, the video starts, but if you quickly try to open a new section before the video completes, the next video trys to load up and the whole browser completes. I only use one video object and loadFile to load the video. Any tips on debugging this? Seems like I’m overloading the buffer or something?
December 8th, 2008 at 10:30 am
Hello,
Lovely script. But there seems to be a problem with Firefox 3.0.4 on mac (havent tested it on Windows yet…) The video does not play, if you resize the browser window some weird pattern that flickers…
Also the video control menu i behaving strangely…
If this could be solved I will definately donate to get your script.
Cheers!
December 9th, 2008 at 1:10 am
Anders,
I tested it off my machine here (mac) using Firefox 3.04 and it worked fine. Let me know if it is behaving the same under windows and if so, I’ll have a bug to hunt down.
December 18th, 2008 at 9:44 pm
Nice work! I have only one question… What’s the best encoding format and setting for a full screen video ? Because if it’s too big the flash is getting lag…
Thanks!
December 23rd, 2008 at 9:15 pm
Sebas,
I generally use H264, but a flv will use less CPU, but look worse.
January 30th, 2009 at 4:33 pm
hey
Nice script
I just have a small problem with it..
I’ve done some modifications to your script, so that it now loads a playlist xml-file to load the videos. This works perfect, but when i turn off the looping of the video, and try to make it go on to the next video-file automatically, it throws me an error about something with a parameter onLastSecond not existing in NpVideoProvider. It seem to have something to do with the NpVideoProviderEvent.END… but i can’t figure out what..
Do you have an idea on how to make it automatically go to the next video after the first one has ended??
I would really appreciate any kind of help…
cheers
February 1st, 2009 at 5:50 am
I’ve not come across that param, I’ll look into it.
February 24th, 2009 at 8:19 pm
Awesome work, this is a killer script. I was stoked to donate.
In the basic file there is an image with a cyclops dude in the top right… Anyone know how to get rid of that?
Cheers,
J
February 24th, 2009 at 8:29 pm
my bad.
it was just this code, pulling a frame. very cool [again]. Commented out addChild,
//listener for pulling cover art from video stream, if it has any..
private function handleVideoImageData(event:NpVideoProviderEvent):void {
var loader:Loader = new Loader();
loader.loadBytes(event.object);
//addChild(loader);
}
March 1st, 2009 at 10:41 pm
Hi Dale.
Can you tell me how to make this into a video slideshow?
You say in the description, that it is quite easy.
Thank you.
March 2nd, 2009 at 1:27 am
@Will
Create an array that holds the urls of the videos you want to play in your slideshow, then for each new slide, load one of the video URLS in your array.
March 2nd, 2009 at 8:56 am
I know that would take me a lot of time to make it work.
How much would it cost me, for you to do it? Thanks
March 2nd, 2009 at 7:56 pm
@Will,
Email me with exactly what you want, and how you want it to work etc, and I’ll let you know.
March 11th, 2009 at 7:47 pm
Hi,
Im using hi quality video for my background. It all works fine but the performance is fairly low. I get a framerate of around 15-20fps. I have been looking into flash’s publish setting for hardware acceleration. I have enabled it but it does not seem to make a difference. From what I have read I think hardware acceleration for h264 video is only available when in fullscreen take-over mode. Has anyone else been able to get hardware acceleration to work for this sort of video scaling?
March 12th, 2009 at 1:57 am
Yeah, it will only work for fullscreen take over mode.
I’m working on some other approaches to speed it up, but that will take a while to get released.
20 fps is low, it should be able to handle 30 fps fairly well. What hardware are you playing it back on?
April 6th, 2009 at 8:59 pm
Hi,
I’m looking for a script like yours, i have found most of my answers reading the comments.
But i couldnt find if there is built in controls when using the external api to play and pause the movie from html.
Cheers
April 6th, 2009 at 10:39 pm
I can donate extra for a simple function to control the playback of the video with simple functions such as play pause triggered by javascript functions.
I think it would be useful to many people if its not already included.
April 7th, 2009 at 10:03 am
Was my question deleted?
Im really intrrested in buy this script, but i need to now this before i purchase.
Is it possible to pause the videostream from a HTML link using javascript?
I ill use Lightwindow to display quicktime videos over. So i need to now if its possible to send a variable in and pause the stream while lightwindow is open over.
April 7th, 2009 at 6:02 pm
@ Daniel,
No, there is no API currently to call the classes methods from HTML. Maybe something I could add at some stage.
April 23rd, 2009 at 9:30 pm
Hey Dale,
Great script, I have been working with it for a while now. I am at a loss to get the BasicFullScreen.swf to work in Mac Firefox 3.0.8 it just shows up blank.
What are the required vars to put into the BasicFullScreen.swf embed script? I think it must be missing something on the embed code. I tried to use the embed code from the provided index.html file [for the FullVid.swf file].
That embed works in the above FF, but it shows up black when I try to call the Basic file. It works correctly in other browsers, just not FF.
I also have the developer flash player [no errors tho].
Any assistance would be great, I just need a solid example of the embed script for the BasicFullScreen.swf file[:
Thanks again, great work!
Cheers from vancouver, frost.
April 26th, 2009 at 4:56 am
this is so impressive, yours might be my favorite site online, your sense of form/function is exquisite; and yet, i dont understand a thing of your full browser video class, i guess i thought i could figure it out with how little i know. but it’s encouraging, to keep learning.
April 28th, 2009 at 8:30 pm
@Justin,
Firefox has some issues with SWFObject sometimes. Try using the built into Flash embedding routines that Flash makes for you when you publish your file.
May 22nd, 2009 at 3:25 am
[...] -http://www.blog.noponies.com/archives/85 – noponies full browser movie background. [...]
July 10th, 2009 at 5:47 pm
Is it possible for the video to play straight away. In the demo the movie is paused and you have t click the play button. Thanks.
July 10th, 2009 at 7:40 pm
Read the documentation, thats what its for.
The property you want is playAtStart = true;
August 19th, 2009 at 1:30 am
hi, i’m sort of new to as3. So when I open the sample file and then I preview it, I get a white blank screen. What do I need to do to preview the fullscreen background video? Nothing shows. Thanks
August 19th, 2009 at 2:40 pm
Works fine for me me, all the provided .flas display their content correctly.