December last year Adobe released their new flash player 9.0.115 codenamed “MovieStar” the codename just hit exactly what is supposed to be, Adobe just gave Flash the possibility to playback mp4 files, this is really really great, if anyone of you know what the H264 codec does/is, then you will jump around like I did as I heard the news.
H264 is a standard codec capable of creating good video quality at substantially lower bit rates eg. half or less the bitrate then mpeg2 or H.263. an additional goal was to provide enough flexibility to allow the standard to be applied to a various broad of applications and systems.
read more about H.264 at WIKIPEDIA
Ok the grey theory is over now, let’s start rocking 
We need to ensure that we’re ready for H.264, I’ve created a small checklist that you need to ensure that every point is checked:
1. You need to ensure that you have the latest flash player installed therefore jump over to this site to check if you have version 9.0.115 or higher: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15507
2. Update your Flash IDE version to the latest one, at this time it’s 9.0.2, you can update your Flash 9 by selecting HELP on the menu and click on UPDATE, the Adobe Update Application will fire up and search for any updates available on all the Adobe Products installed on your machine, if this method fails for any reason, you can also download the update from this location: http://www.adobe.com/support/flash/downloads.html
3. Lastly you need to have some H.264 content, how do you get it? Well you can shoot your own footage and convert the footage with Quicktime Player Pro or any of the Video Products of Adobe, Premiere & After Effects have already presets done, ready for you to start encoding High quality. In case you don’t have any of the options above I’m providing a sample
H.264 encoded file.
If you accomplished everything written above, the it’s time to get started, fire up your newly updated Flash CS3 and start with a new Actionscript 3.0 document with a size of 1280x720px, yeh this is quite big I know, but if you familiar with the HD standards, the you’ll notice that this the second highest resolution available before getting to full HD resolution which is 1920×1080 px.
Flash is capable to handle any dimensions set, but for the sake of the normal screen size we really can’t provide a 1920px wide video for everyone to watch, unless everyone got a 30″ screen for Christmas..
Now we have this huge stage in front of us, maybe it doesn’t fit completely in our screen, so let’s move over to the zoom dropdown and select “Show All”.
Now that we see the whole stage, move over to the components dropdown and drag & drop an instance of the FLVPlayback component to the stage. While selected move over to the properties panel and give it the exact same size as the stage and position it at the top left corner by inputting at the X & Y coordinates a 0.
At this point your stage should look like this:
While still having the component selected open up the Component Inspector tab by pressing SHIFT+F7 or if you using the default workspace on Flash 9 you can also select the component and click on the parameters tab at the same place where the properties panel is.
On the parameters tab or the component inspector you can setup a whole bunch of parameters, you can play around with them a bit later if you never seen them, our important property is the the source.
Now there is a small error on the Flash Update, the component is ready for H264 files, doesn’t matter if they have a file extension of
the dialog box will never display any of the files above because it’s searching by default for .flv files, don’t fear this is not a big issue, just go to your filename on the dialog box and enter * (yes an asterisk) and voila you’ll see all the mp4′s and mov’s on that specific folder apart from all the other files you have in there like me:
so go on and choose your mp4 file, press OK and WAIT before you also confirm the the last dialog box ensure that you UNCHECK the option “Download FLV for cue points and dimensions”, remember what I told you before? Flash Update has a little issue checking the filenames so I assume that the dialog box is only searching for FLV’s and it will only accept FLV’s metadata, if you unchecked it then you are ready to go on.
Now you are ready to deploy, if you want you can just press CTRL+ENTER to test our your movie, and you’ll see that the file is playing.
Last but not least most people get confused by the fullscreen button not working, the button works but the object settings in the HTML are not allowing to take over the whole screen, Adobe was so nice to create a preset for such cases and you can access it by moving on to FILE -> PUBLISH SETTINGS -> move on to the HTML Tab and select “Flash only – Allow Full Screen”
Go on press the publish button and open the generated HTML, try out the full screen button.. isn’t it a beauty?
Ok guys, that’s it for now, now you know how to playback the highquality videos in Flash.
Have fun with it
Tiago
Thanks for this great tutorial! This wil make me shoot more 720p movies with my Canon HV20
See you in Amsterdam…
Hi Marc
Thanks for the compliments. Hope to see you there
Great tutorial especially for a newbie like me. Only hitch was the * part because I’m on a Mac but I just had to type in the path and file name instead.
Mark
Mark, yeh.. I constantly forget the mac users
Sorry for that
I will try to keep that in mind for future tutorials
Is there a way to get flash to play the video as it downloads, Like it does with flv? It seems to wait for the entire video to load before it will play, this can be a nuisance for longer videos. Or is this something that needs to be setup during the encode process?
Jamie
Not without FMS3, the flv you upload on your normal webserver also doesn’t stream directly.. it plays when there is enough data (due to the filesize of flv’s) that can be pretty quick. when using h.264 you aim for higher bandwidth then usual, so the buffering times is also much longer, but you definately don’t need to wait for the complete clip to be downloaded. I’ve tested this with an Apple Trailer (HD 1080p) and it took me 5seconds before it started to play.
your instructions also work for AS2. Thanks.
As Jamie said above, any video I have encoded in Quicktime has to download completely before it will begin playing. If I encode using ffmpegX, then the file will begin playing immediately – before it is fully loaded. I have tried every possible setting and I don’t see why one encoder makes a version of H264 that works properly and Quicktime makes a version that has to fully load before playing. I’ve also tried encoding with Handbrake and that also requires full load before playing. Any help?
to proagg…
Thanks for pointing that out
to Oliver…
I think that the issue is dependent on the encoding profile used, I haven’t faced any problems while encoding with QTPro or Premiere CS3.
If you post the 2 files I could have a look at them (the header) and find out what makes them work differently.
Anybody figure out the proper way to encode to allow the video to play as it downloads? I am still having trouble
Update: for those having trouble with playing will downloading, check this out:
Jamie..
Thanks for the link to scotts blog. BUT..
If you encode your video using the “standard” encoders like I mentioned before (QT Pro, Premiere, After Effects)
They will all create proper files for MP4 streaming.
If the moov atom is not at the beginning of the file, then the software you using is not working with the standardizations. Nothing against those tools really!!
There are a few of them which are really really helpful, you just need to know how to set them up correctly, and to be sure that they do the correct job.
I hope Adobe improves this. The player (Netstream layers) just need to start supporting http 1.1’s range-requests, this will allow random seeking within even very large files (without having to download), and, lends itself to asking the web server for the tail of the file (the moov atoms) when they aren’t detected in the head. For reference, VLC player already supports/does this over http, and pre-fetches the tail moov atoms when they dont exist at the head of a mp4..
This Doesnt Work…
give this error:
VideoError: 1005: Invalid xml: URL: “WF109H.mp4″ No root node found; if url is for an flv it must have .flv extension and take no parameters
at fl.video::SMILManager/http://www.adobe.com/2007/flash/flvplayback/internal::xmlLoadEventHandler()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/flash.net:URLLoader::onComplete()
First time I tired it, everything work. Tried it again a week later and I get the same error a R Jardim above. It’s not my file but something with the root node???
RJardim, Jim
Have you ensured you both have the 2 updates (flash player and flash cs3)?
I did the updates and it got rid of the error message. I then got the player, but it was unresponsive in Firefox. I switched over to IE and it works. I have the latest flash player in firefox, so not sure what’s up there but will go figure that out next. ( I think I did your test last week on my workstation, and it worked.) I tried this last one on my laptop, so that was probably the difference, not being updated.
Tiago. Do you have any info on how to get cue points or markers to work in the h.264 files? Will they work with action script 3?
thanks
i am able to get mp4s playing in the video component that way bu ti am having issues loading them dynamically it keeps adding the following to the url string:
“&FLVPlaybackVersion=2.1″
Error opening URL ‘http://www.my.mp4&FLVPlaybackVersion=2.1‘
I have all of the updates to flash and it will play fine with just one mp4 set in the component but once i set it with AS it buggs out.
Any thoughts?
-j
hi,
i’m french and i ve search so much for a tutorial like this “in french” but noway to get it.
THANK YOU for this very good tutorial, you have help me so much !!!
BUT i got a problem, i follow all the instructions and everything works except the audio…..!!!! why???
My file is a .mov encode with h 264 ( and i’ve tried with a .mp4 encode h264 but flash seems to froze when i do that ).
Does anybody knows more about that?
Thank you and sorry if i ve done english mistakes…
by by Anthony
RE sorry
Sorry about the last message; i’ve found what was wrong… the way of encoding..
Thanks again for this tutorial.
Anthony
Thank you so much for this helpful tutorial!
My flash movie works, but there’s no sound coming out of the swf file. However, the .mov (H.264) works/sounds just fine. Do you know what could cause this?
Thanks in advance
I’m having the same “no sound” issue… I’d love to hear if anyone has an answer for this.
Nevermind… I changed my QT export settings from PCM to AAC in the sounds options and it works fine now. Thanks!
Another question about h264… is it still possible to use cuepoints to trigger events? Or is that only possible with VP6?
Jim
No you can’t add cue points to H.264 files currently. you would need to create a function that checks the current time and calls up the actions based on a list you created.
Jamie
I’m currently looking into that
Anthony
Glad you found out on your own
Nguyet
As Chip4122 mentioned below if you encoding with QT you NEED to select AAC as an audio codec ( which is the standard codec for h.264 by the way)
Chip4122
Sadly not (yet) you need to create a function that handles the cuepoint feature eg. (a function that checks the current playheadtime and calls up the needed information (slides, text, urls)
Thanks for the great tutorial – works fine for me, but (sorry if this is a real newbie question) how do I set a buffer time for the video now that the option isn’t in the component inspector as if was in action script 2?
Thanks,
David
It’s not working for me…
I have updated flash CS3 and have the latest player and it does not work. I got the “Failed to load”
Any ideas why?
Here is a movie that shows an H.264 movie being played in a Flash Player:
http://www.dvcreators.net/dvccast-screencast-flowplayer-1/
This information was very helpful in solving this issue and I found it odd that there was not more help like this. There were plenty of articles about the fact it was possible but no help, so a big thank you for posting it.
I am able to play the QT.mov back through the flash player on my Mac, but another cannot on a PC. What would be the reason for this? I even tried it out on a PC myself with no luck. It’s almost like it can’t find the QT.mov. The published version works fine locally for me as well as when I tested it on my site. Do I have something configured or published incorrect?
do you have to set a mime type to get the video to work on the server?
it works local but when i upload it no workie
Hello,
Great tutorial, have been looking for this everywhere! But can you just confirm how different it would be for mac users and the part about the *?
I am just wondering how on a mac I would select my .mov files to play in flash
Cheers
Sham
Sham, This is in response to your post:
Try this: Create a blank text document, in Text Edit say, and give it the same name as your QT movie, then save it. After that use Finder and manually change the .txt extension to .flv. It will ask you if you are sure, say yes. Then when you pick the “dummy”.flv movie in Flash, you just change the “.flv” extension to “.mov” and you’re good to go.
Hope that helps.
Just wondering how important HD video really is when the average size computer screen is not that big anyway. So how would shooting in 1920 x 1080 benefit online video?
Any feedback would be awsome
Cheers
Sham
Just wondering how important HD video really is when the average size computer screen is not that big anyway. So how would shooting in 1920 x 1080 benefit online video?
Any feedback would be awsome
Cheers
Sham
Having trouble selecting the .mov files to play in flash. I have flash cs3 and I have some h264 .mov files but it won’t let me import it as a file in the parametres source.
Any advice?
Sham
I did not think this work with AS2 (FLVPlayback requires AS3 error) – I got error when I tried
Hi, I have a problem to playback live stream encoded in H.264 by using the Adobe Media Encoder 2.5. Can you give me any idea what might be the problem? Also, is it true that if I am using web cam to do video chat without using the encoder, I cannot stream in H.264 format?
Thanks for your help in advance!
First off – GREAT post. I was beating my head against the table trying to figure this out.
BUT, I now have the same problem reported by n8.
It works local, but when I publish on my site it doesn’t work.
I just now sent my ISP (dreamhost) a support ticket asking them if they’ve added the new f4v MIME type.
has anyone besides n8 and me have this problem (works local but not on the web server)?
btw, I used FME 2.5 to create my f4v.
Thanks!
Chuck
What about support for other formats they say now works with FMS3 – like 3gp, 3g2, etc I have not been able to run these (fine with .mp4, .mov & ,flv)
Thanks
thanks for everyone’s help here!!!! found a better solution though for encoding files to h.264 so they will progressive download and best of all its FREE!!! its called MPEG STREAMCLIP and can be found here…….
http://www.squared5.com/
works on pc and mac
hope this helps someone as i’ve spent 3 weeks trying to get my head round this one!!! check out our website in a week or so as everything will be streaming full res or HD from now on!!! my test file can be found here http://www.preamptive.com/showreel2.html
Thanks man
This site was the only one I could find that helped me play a type of file other than FLV with the FLVPlayback component.
However, I looked at Adobe’s documentation, and they brag about adding support to a wider array of file formats, including audio and pictures: http://www.adobe.com/devnet/flash/articles/flvplayback_fplayer9u3_print.html
But when I tried to set as source some jpg or mp3 files, the player wouldn’t load them. Any idea why, and how to make them work also?
Getting this error in the debug when trying to view.
1005: Invalid xml: URL: “WF109H.mp4″ No root node found; if file is an flv it must have .flv extension
I have gone over the tutorial several time confirming everything is right. Any ideas?
thanks
B
additional info the .fla file that it creates is only 384kb I am assuming that it looks for the actual MP4 file to play it right? If so that file is in the same directory as the .fla with the .swf’s
B
Doens’t work on mac, can’t choose an * for file name. Working with Flash CS3
hey. this is referring back to the que point question. to quote from another post “No you can’t add cue points to H.264 files currently. you would need to create a function that checks the current time and calls up the actions based on a list you created.”
so i was wondering if anybody had any luck making such a function
Works on PC, not on Mac.
Strange… This tutorial works brilliantly on my PC (Flash CS3 Pro), but not on my Mac (Flash CS3 Pro, yep same thing). On Mac I will get on preview the Error1005 as referred in posts above, but on my PC this all works just without any problems. Everything has been updated according to Adobe Updater. And also Flash manually to newest version.
So what’s wrong with the Mac’s Flash CS3 Pro?
Even more strangely I can get it working on the Mac with few tweaks…
1) I downloaded files from Layers Magazine tutorial (click for files)
2) I change in their .fla the video’s source file’s name in Component Inspector to my .mov/.mp4 and published the project
3) I opened the resulting .swf or .html page and everything worked. It seems to be here utilizing Flash Player 10.
If I previewed this tweaked project file it gave error 1005. Seems to be using CS3:s internal Flash player which seems outdated.
But if I tried the whole project from scratch (not the downloaded .fla) and just skipped the previews, nothing worked. Too strange.
Any help is appreciated. I’d really wish to get this working properly on my Mac, as I do all the video editing on it. Laptops are nice on the road.
Great tutorial, my HD videos now look amazing! I have one question though… I tried to use the auto scale feature by setting the HTML publishing options to 100 percent but when I open it on the browser it doesn’t play smoothly, especially if it’s some processor heavy scenes (like fast pans or zooms). It plays fine if I press the full screen button (and with better quality) but it sort of stutters and creates jagged lines when it’s scaling automatically to the screen size. I compared the system resources usage and it seems to be “chewing” a lot on the processing when in auto scale… Is it normal? Shouldn’t it be about the same? What i’m trying to achieve is something like http://www.1stavemachine.com website. Please help out a fellow countrymen mate! Obrigado!!!
Have you guys been able to use the seek() or seekSeconds() functions with this? While I can get it to play, and look great. seek() and seekSeconds() do not work, they simply restart the video from the first frame. If I trace the playheadTime right before i run seek() it shows the correct time, and then restarts the player. It works fine with FLV files however. Any ideas?
@Timo Hey Timo… wondered if you ever found the work around for the Error 1005 problem on you Mac. I’ve got the same issue on a mac and pulling hair out.