| I have just finished creating a simple custom video player for Flasher Magazine. It isn’t as full-featured as some players but I wanted to make it look and feel fairly raw to match the style of the videos. There is a basic click-to-seek functionality rather than a more traditional scrubber. Doing true scrubbing requires more work and in my opinion is not even that useful. You can download the source FLA file to see how it was made and also to use it in your own projects if you want. All I ask is that you change the style so it isn’t an exact duplicate of the one I use for Flasher. |
Lee
Hi Lee, there are few tutorials about customizing uicomponents, i mean the documentation available is very poor, even for the components set we can find on the internet like the liquid components for example…
So i have a question about this source: why didn’t you just take the flvPlayback control and customize it your way? I would find it interesting to see your point of view.
It also seems your crazy about all the freefighting stuff and since i practice some grappling sport in france, i give you a little “hi” from a jujitsu practicer in paris
@gropapa To be honest it would take more time to customize the FLVPlayback component than it would be to just build it yourself. I frankly don’t like the Flash video components and usually prefer to build them myself. That way I have total control. Great to hear that you’re doing BJJ!
Hello,
I’m getting on a own video player on it. I used the Framework (www.openvideoplayer.com). Only one problem I have. The function go-To-secend dosen’t work with .flv-Files because there is no buffer bar displays. In the case .mp4 -Files everything works beautifully. Can you tell me what this is?
As it should be:
http://works.broud.de/v/mp4.php
Without buffer bar:
http://works.broud.de/v/flv.php
Regards
from the old continent
Thanks for this. Flasher is pretty damn cool!
Well Done.
I’m glad I am not the only one who doesn’t like the Flash playback components. I wrote my own player myself for the company I work for, but I love the “thick” progress bar and click-to-seek you have going there. It’s very smooth, but I wonder if that’s purely because you’re using a true stream instead of HTTP Streaming?
I haven’t had the opportunity to code for anything except progressive download ><
My big to-do for my own player is to have an actual volume control rather than a toggle. The Vimeo.com player has a scrumptious volume control.
“@gropapa To be honest it would take more time to customize the FLVPlayback component than it would be to just build it yourself. ”
Personally I find FLVPlayback pretty useful, takes care of all the tricky stuff. I reckon 40 mins to and hour to get it skinned.
Not bad
For those interested in customizing FLVPlayback, here she is, I think its got all the functionality, 38 mins.
http://www.tink.ws/examples/FlashMagazineFLVPlayback.zip
@Tink I get a 404 on that link. I’m anxious to check it out.
@Michael This is using progressive download and not streaming.
no fullscreen?
@Kurak That’s a tough decision. I really want people to view the video at the best quality possible. I hate the way it looks in fullscreen. Maybe I’m too much of a stickler for quality
.
Yikes! The HTML page that holds the Flasher video uses tables! Say it ain’t so, Lee.
I’ve built an iTunes-inspired video player in 3D using Matthieu Badimon’s great FIVe3D classes. Click the “i” button to see the video flip.
http://media.mgnetwork.com/creativeservices/design_tests/five3d/five3d_video.htm
I know Flash Player 10 can handle 3D natively, but that version of the plug-in hasn’t reached critical mass yet. FIVe3D keeps vector art and typography looking good and runs in Flash Player 9.
@Kevin Yeah tables is the easiest way to center something vertically. I know it can be done with CSS but I’m a little lazy. Very nice video player!
Making video players are fun.
I created classes so that I can just worry about the design and not the code
http://www.artbycg.com/temp/largeVideoPlayer/
Only problem I am having is sometimes you have the refresh the page because the video doesn’t load in. Weird.
Anyway, good stuff lee, keep it simple.
Hi Lee,
quite nice Videoplayer you made there. Nevertheless I have a question regarding the code. You are setting up an function called onMetaData() but you never invoke it. Since you gave dur a value in that function I wonder how this would work. That’s all
Once again cheers from my side,
keep up the good work!
Bugger sorry bout that link fixed
@Tink Damn very nice job. Looks exactly the same. Mine wins on file size though (5k versus 69k)
Video Mag! This is g r e a t! Lee – I’m excited about what you are doing. I fell into your community through stumbling around the Web looking for tutorials on Flash. You deliver the content – good pedagogy – no gaps in brain functionality detected. Not even on Codeine. I started using Flash with Flash 4 way back in 1950′s. Luckily, a friend who has a relationship with Adobe (He did some research for them with Acrobat) hooked me up with a development project supported by Adobe late last year. I got the Master Collection here (Freebie) toying around with new features – this is a B L A S T ! I am developing an innovative format for university dissertation publishing. Having fun – getting up to speed. I am interested in developer training workshops. What is your suggestion?
Thanks man!
Marc
I can’t seem to open the original link from Lee’s source above. It links to a flasherPlayer.doc file that asks me to convert it. But I can’t open it at all…
Does anyone have another link, or a .zip file?
Cheers
@ Lee
Cheers, yeah you were always gonna win on filesize as the FLVPlayback has a lot more functionality built into it. For instance the back, play/pause and mute buttons have a disabled state in my example, but it also capable of handling other buttons with very little implementation required.
@ Jeff
Just make sure the extension is ‘fla’
@broud and all:
http://works.broud.de/v/flv.php
anyone knows the name of the song or the band name? i dig it!
Since we’re showing off video players, I have a couple versions of mine — one on my company website at http://www.sostv.com and another with menu functionality (this version without email / link /etc options) at http://www.sostv.com/yearendvideos
Personally, working for a video production company, I find “real-time” scrubbing extremely useful.
@ Tink
When I hover over the link to the file in the Lee’s original post, the extension is .fla, but when you click to downloade, I get a .doc file downloading…
…am I missing something here?
I’ve tried it on 2 different computers now as well.
Are you meant to be downloading a .doc file?
Cheers
Jeff
@ Jeff
When I tried downloading the file on my Mac at work, it defaulted to opening with Microsoft Word. I just changed the default program on the get info tab to be Flash CS3 and it worked.
@ Jeff
Rename the file extension from .doc to .fla and everything will be ok
Right-clicking, saving and then hardtyping it should work fine.
@ Lee
Sorry for the offtop, but Tweensy engine is out, so check it out here: http://www.lostinactionscript.com/blog/index.php/2009/01/05/tweensy-goes-public/
Performance is stunning! Shane’ve made a really GOOD job.
Maybe You will make some tut with it
when i downloaded the file i got something like
flasherPlayer.fla.doc
i just removed the .doc, confirmed use fla as extension and it was fine.
if you get flashPlayer.doc, try chaging the extension to .doc
“Personally, working for a video production company, I find “real-time†scrubbing extremely useful.”
Yeah I had to disable that in the FLVPlayback component. All built into its default settings though.
The new mag looks great! The intro is awesome!
I am a fellow Flash Polymath and long time BJJ practitioner. I just moved to Campbell for a flash engineering position. Any MMA/BJJ gyms around SF or SJ you personally recommend?
When is Flasher going to interview Red and get some free UFC gear?
Whats the video settings of the Mp4 file?
Mine is loading and I get audio but no image – only sound. Do you think this might be my compression settings for the mp4 file?
Just found out that H264 seems to offer up the best results via quick time – using other compression settings results in the loss of image. Hope it helps someone as it took a little while for me to find the right setting on that one.
Hey, nice.
Did you consider RTMP?
I just posted a (hopefully) altered version of your player.
at http://www.strobotronics.com – I am working on the site now (i used css to center the page woot woot – though I notice I forgot the wrapper around the whole thing)
I made a player once from components (which I customized) but it was hard and took a long time (Actionscript and programming concepts are is sinking in, but slowly – I get hung up on syntax and sidetracked by “best practices” before I know what I’m practicing).
But I compressed my video – I found 15 fps looks fine and cuts down on file size and bitrate quite a bit.
Otherwise I’d have to go with Quicktime.
It still doesnt have that crisp all-pro look, but I’m just looking for an internship/job any job and I need to get it out there pronto.
Much Thanks.
PS) How do I stop the stream? In an old streaming movie player I just went to another frame in the timeline….it loaded externally with the “lockroot” being tres importante.
I want to keep the video from looping but I’m tired and lazy.
Thanks Lee (and Tink). I’m trying to take my simple video player to the next level w/ audio controls, timecode display, and a full screen mode.
Thanks!
You are AWESOME Lee!
Hi Lee!
How are you doing?? Just want to say I absolutely LOVE the Flasher Magazine! When is the next issue?? Can’t wait.. Keep it up!
And of course… the video player is awesome as well..
Thanks for helping the community so much!
-PEACE-
Hi Lee – love your work. How do you get the video to stop looping? So that it just stops at the end of the video?
Hi Lee,
Follower of your blog and tutorials and the 1st edition of Flasher Mag was very insightful.
Is there anywhere I can see a demo of that PixelBender transition demoed at Venice from the 3D Carousel like Flickr Photo Viewer you showed off. Can’t make out as much from the video but from hearing all the oohs and aahhs it has really peaked my curiosity.
Hi Lee,
Thanks for the great download.
I have changed the appearance of the controls and I am ready to use your player.
Like Pat I want to know how to stop the video looping.
Also how can I set this up so that a button supplies the name of the video and starts it playing.
So I can use it for multiple videos
Thanks
@Mark @Pat Here’s a hint, look at the NetStream.Play.Stop code. That if statement determines what happens after the video stops playing.
Nice player Lee
Love the video too, please please keep throwing stuff like this together, its simply awesome!!
On the topic of Video Players, I made one quite a while ago with some quite advanced options, taking snapshots of the video etc etc, your opinion would be MUCH appreciated
LINK
PS: Loved your FOTB08 talk, so gutted about Miami09
Hi,
Should the fla provided work out the box? I downloaded and compiled but it just hangs on “Buffering Video”? Am I missing something here? I’m running locally but through browser/web page.
TIA!
FYI… using CS3!
Lee, thanks a lot that should help.
MJ – that is normal it will only work online, as far as I know.
I see your as3Video tutorial. Can you please post a tutorial on making FLV player with prograss bar and full screen ?
Hi,
did you work it out Pat?
I have it working so that it rewinds and stops at the first frame.
Lee had some if statement shorthand going that I did not know how to work with so I put all the standard curly braces back in.
@MJ I have no problem running it offline with video that is on my local machine.
this is my code Pat, maybe you have a better solution?
not sure how code will display in the blog
I am still wanting to get it to load different videos from buttons.
function onStatus(e:Object):void
{
if(e.info.code == “NetStream.Play.Start” ||
e.info.code == “NetStream.Buffer.Full”) {empty.visible = false;
}
else if(e.info.code == “NetStream.Buffer.Empty”) {empty.visible = true;
}
else if(e.info.code == “NetStream.Play.Stop”) {
ns.seek(0)
ns.pause();
empty.visible = false;
}
}
@MJ
I think it has a lot to do with your security settings etc, working offline with a file that is trying to access an online resource.
@Mark
Thanks a lot for that dude, I initially just had ns.pause() but the last frame of my videos weren’t always black so it didn’t look good. But the same thing happened if I went back to 0, the first frames of the videos weren’t always black, which looked bad too.
So what I have done, is added a black box into the second frame of the “empty” movie clip. Now when it finishes it goes to a black frame regardless.
@Lee
I am trying to use this video player in conjunction with a flash gallery of sorts, and I am passing the video URLs to the player from the gallery, and it works quite well. Thanks!
I have noticed however, that after playing a few videos it seems to slow down and perform worse. I have tried removing all the listeners you have added when I close the player, but it still seems to slow down a bit. I’m not sure if I am imagining this.
In any case, do you have any advice as to how about using your player with a gallery like this? The site is http://www.mickconnolly.com.au. Thanks again.
PS. I am still changing the style of the player from yours.
Hi, was wondering if you had any insight into this problem…i’m a flash actionscript programmer at an intermediate level… i used the flvplayer code above (thank you!) but i had one serious problem.. using both mac and pcs, using both firefox and ie (and others)a random error would happen with the progress bar not working (so all that would display is “0:” . The progress bar would not work but the video would still play. (although u couldn’t click ahead) I traced the problem to
function onMetaData(meta:Object)
{
dur = meta.duration;
}
This function never got called so dur was NaN, thus breaking the progress bar. I hard coded dur to my video length and all worked fine on all systems. So.. any idea what would cause this function to not get set? Thanks for the code again and I hope for some enlightenment!
Hi,
I am having trouble with the video stopping and starting.
It seems to take off playing before enough has loaded.
although it could be the computer having issues with playback I don’t think so.
Video is 550×292 f4v at target bitrate 1, max bitrate of 1.5.
Is there a way to force download of a larger amount of the file before playing starts?
I am working on a site, have changed the controls, but not the loader animation. It is still in design/mockup stage, so most of it does not work yet.
If anyone is interested here it is, work section has the first 2 or 3 videos loading
http://www.gasolicious.com/orangeupload/shell3.html
opinions on why it stops to buffer, and what I can do about it appreciated
Thank you so much for sharing your as3 video player. I am seen some of your teaching videos and congratulate you on your gift of explaining things in a very clear and easy to understand way.
THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU
Sorry for the repetitiveness. I wanted to learn this so for a week I tried different code. This is exactly what I needed a clean starting off point!
OK how in the world do you get this to stop playing after video. When the end of my video is reached it just starts over and keeps playing.
I figured it out. I hate being a n00b. Its always a little simple thing.
Hey lee I’ve set autostart to false but for some reason it will preload all over again every time i push play. Even after the movie has preloaded all the way and i hit play again it will show the preload progress bar all over.
THANK YOU for sharing this with everyone. I have downloaded and everything works great. My problem is if I change the MP4 file to another file it acts as if it works because you can hear the video being played but it doesn’t show the video. The only thing I have changed is the video link itself and I can access directly on the web with no problem.
Have you run into this before. Am I just missing something.
Thanks again.
Lee, I figured it out. Bad MP4 encoding.
Thanks again for your example. I’m using it as a generic player for a .net app with a sql backend using xml.
What video encoding tool due you prefer to create your mp4 files?
Thanks
@Mark
I tried using your code above to prevent the player from looping but the never never loads and keeps pausing/muting. I Cannot figure out what is happening HELP!
Hey Lee,
Thanx for all the time you put in helping out us Noobs!
the player is pretty awesome and easy to skin! keep up the good work budd.
1 problem I’m having is stopping autoplay. prob an easy fix but I’m going crazy over here!!!
Thanx again for the hard work Lee..
-matt
Hey Lee,
i was trying to create a ‘click to play’ screen before video starts and one when video ends.
i was trying to uterlise the code used in the ‘buffering layer’ to recreate it but i can’t seem to get the video to start when the layer is clicked, or have it appear at the end of the stream.
i started with the parts Mark / Pat suggested.
else if(e.info.code == “NetStream.Play.Stop”){
ns.seek(0)
ns.pause();
replay.visible = true;
however i can’t seem to get it to play when i click.
any ideas?
my click to play layer is called ‘replay’
then i guess there needs to be a link between that layer and the standard ‘play button’ so that even if they clicked the control bar play button it would remove the ‘click to play screen’ and play the video anyway.
I hope that all makes sense any ideas people? lol
Andy.
Thanks for sharing!
Just out of curiosity, what video bitrate does Flasher mag use for its videos?
What app is used for compression?
They look pretty nice and appear to load in pretty fast.
Thanks again!
Thanks for this! I really appreciate you giving to the community like this. I always try to give back in the same way.
Slightly off topic, but I was just wondering what the compression settings are for you Flasher videos? They look amazing! I have been using AME, 1.5mbps, CBR, 1280×720. Would you mind sharing the settings used for the Flasher vids?
I really like the 640×360 video size.
Many thanks!
Hi, Lee
I just try to test your script with .mov (h264) file and i have bad result: file completely downloads and only after that starts plaing. I setup ns.bufferTime = 20.
Flv files works very well (when 20 seconds downloaded movie starts playing).
Do you have any idea?
Hi Lee,
Would it be possible to provide the fla and AS3 files to drive this video via documentClass? This is one tutorial that is missing- specifically controlling a FLV video via documentClass and AS3.
Thanks.
I come from the internets, and would like to play my flv. Can I have simple instructions to take this FLA and use it to see video? I know I have to make .swf file, but don’t know what to do next. Thanx!
Hi player is cool, but I got the problem:
when i play my flv from net progressbar extend (going far than) loadbar.
Is it problem with flv or server maybe?.
I ve tried many possibilities with flv: sizes, bitrates etc.
I had same problem with using Lee’s old tuts for flv player.
Please help me:)
greets
piotr
i’m Brazil!
i saw in wall of Brimelow the poster of “Viddell vs Silva”
this in video \o/
Viddell rlz!
Hi!
I really need to know how to do an ”autoPlay = false” function on these file.
If anybody can help me?
Keep up the good work!
That player is awesome, so simple and clean – love it!
wow – almost a year and a half since you posted this and this is STILL the best video player out there. nice work. thanks a LOT for sharing this.
hi, just to let you know- it seems that we can’t download .fla source as it is word document instead of flash