Posting video to my portfolio?!

[SteelCurtn75]

I really need some help. I have three videos made in aftereffects. I planned on using quicktime videos but if something else is better please let me know. I exported from H.264 format but it seems like the videos still take too long to load for my liking. Maybe someone could take a look at see how long it takes you to be able to view it? Here's a link...

http://www.chris-garman.com/digital.html




How can I either export from AE to make the file size smaller? Or compress the Quicktime I have? Or use a different file type? Any tips would be greatly appreciated.

[Eye for Video]

Main problem is that the .mov is not being progressively downloaded by your server. That is, a small amount of the video downloads into a buffer, the video starts and plays, while the rest of the video downloads. Your whole .mov is having to download before play starts.
You'd be much better off to render directly into Flash .flv, and place a video player directly on one of your Web pages instead of just downloading the file (in a new window) as it's now set up. The .flv is much more cross browser friendly and your videos will be available to a much wider audiance.
Also, what's up with the resizing the browser window when your site loads? Maybe that's the plan but I found it be be pretty annoying. When it resizes in FF, the dimensions seem correct but in IE, besides the annoying resizing, the dimensions are not correct and required both horz and vert scroll bars.
Best wishes,
Eye for Video
http://www.cidigitalmedia.com/video.html

[SteelCurtn75]

Awesome, appreciate the feedback...

Could you possibly give me instructions on how to do that with flash?

[Eye for Video]

Do you have Flash and are you willing to do a little design work yourself?
Can you render your AE directly into .flv? Will you be displaying more than one video?
EfV

[SteelCurtn75]

Erm I have flash yes. I used flash encoder to get my quicktime to flv.

I'm just confused on how to get it to play on my website. I'd like my "Launch" button to open up a new window with with the video in it... I took your advice on the window resizing.

[DigitalDoyle]

Steel,

Eye for Video is right about flv. But the FlashPlayer will also play h.264 directly. What version of AE are you using? What are your h.264 settings in AE (what preset are you using, or what custom settings)?

I looked at your page, (and sent you an email). I think either your datarate is way too high, or you've rendered out an h.264 file with the moov atom set at the end. Adobe Media Encoder (used in Premiere and AE, and also standalone) used to render the atom at the end of the file.

That means that the entire file has to download before it starts playing. You need the atom to be at the front of the file so that it buffers in enough when it loads to be able to start pretty much immediately.

Tell us your encoding settings, and exactly how you're exporting from AE and we'll be able to help you get things right.

DigitalDoyle
www.digitaldoyle.com/blog

[Eye for Video]

OK, I’d like to see if I can change your mind about opening a new window for your video. When you do that, your viewer loses the ambiance and continuity of being on YOUR site. If you were advertising a Tombstone movie…well maybe. But you are advertising YOU. None of your other displays open in new windows, so why should your video? Never let you viewers forget that….can I stop now?????
Anyway, humor me if you will. Let’s just take a quick look at what the video would look like if you kept it on YOUR page.
In the <span class="thumb"> of <!-- Project One Table --> try this:
<span class="thumb">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="320" height="240">
<param name="movie" value="tombstone/cidm_simple_vid_player.swf" />
<param name="quality" value="high" />
<param name="autostart" value="false" />
<embed src="tombstone/cidm_simple_vid_player.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="320" height="240" ></embed>
</object>
</span><br />
For this to work, do this…in your root folder create another folder called “tombstone”. Make a copy of the Tombstone movie that you’ve converted to .flv and paste it into the “tombstone” folder. Change the name to “video1.flv”. I’ll attach a simple Flash player set to load the same frame you are using as your teaser image. Put that “cidm_simple_vid_player.swf” into the “tombstone” folder. Then the html code I’ve listed above will find the .swf player, which will begin loading the .flv. Your “Launch” button is not yet hooked up, so click the “Play” button on the player. Then compare presenting your video on YOUR page as opposed to the page show with “Launch”.
The <object> <embed> code is NOT the final way I would recommend you placing a Flash player on your page, just one step in the process.
Digital Doyle, I agree that his bitrate may be a little high... from my calculations it seems around 590kbps. For the screen size of 320 X 240, good quality starts at about 400kbps. If it can be progressively downloaded on a 1.5Mb Internet connection, even 500kbps can sometimes max out the buffer. Anyway, I'd like to see the video placed on a regular page first, and then work out the bugs.
Best wishes,
EfV

[SteelCurtn75]

OK, I’d like to see if I can change your mind about opening a new window for your video. When you do that, your viewer loses the ambiance and continuity of being on YOUR site. If you were advertising a Tombstone movie…well maybe. But you are advertising YOU. None of your other displays open in new windows, so why should your video? Never let you viewers forget that….can I stop now?????
Anyway, humor me if you will. Let’s just take a quick look at what the video would look like if you kept it on YOUR page.
In the <span class="thumb"> of <!-- Project One Table --> try this:
<span class="thumb">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="320" height="240">
<param name="movie" value="tombstone/cidm_simple_vid_player.swf" />
<param name="quality" value="high" />
<param name="autostart" value="false" />
<embed src="tombstone/cidm_simple_vid_player.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="320" height="240" ></embed>
</object>
</span><br />
For this to work, do this…in your root folder create another folder called “tombstone”. Make a copy of the Tombstone movie that you’ve converted to .flv and paste it into the “tombstone” folder. Change the name to “video1.flv”. I’ll attach a simple Flash player set to load the same frame you are using as your teaser image. Put that “cidm_simple_vid_player.swf” into the “tombstone” folder. Then the html code I’ve listed above will find the .swf player, which will begin loading the .flv. Your “Launch” button is not yet hooked up, so click the “Play” button on the player. Then compare presenting your video on YOUR page as opposed to the page show with “Launch”.
The <object> <embed> code is NOT the final way I would recommend you placing a Flash player on your page, just one step in the process.
Digital Doyle, I agree that his bitrate may be a little high... from my calculations it seems around 590kbps. For the screen size of 320 X 240, good quality starts at about 400kbps. If it can be progressively downloaded on a 1.5Mb Internet connection, even 500kbps can sometimes max out the buffer. Anyway, I'd like to see the video placed on a regular page first, and then work out the bugs.
Best wishes,
EfV

I tried that... When I previewed it in Dreamweaver it worked... but now that I uploaded I'm just getting a blank white box...

http://www.chris-garman.com/digital.html

[SteelCurtn75]

Steel,

Eye for Video is right about flv. But the FlashPlayer will also play h.264 directly. What version of AE are you using? What are your h.264 settings in AE (what preset are you using, or what custom settings)?

I looked at your page, (and sent you an email). I think either your datarate is way too high, or you've rendered out an h.264 file with the moov atom set at the end. Adobe Media Encoder (used in Premiere and AE, and also standalone) used to render the atom at the end of the file.

That means that the entire file has to download before it starts playing. You need the atom to be at the front of the file so that it buffers in enough when it loads to be able to start pretty much immediately.

Tell us your encoding settings, and exactly how you're exporting from AE and we'll be able to help you get things right.

DigitalDoyle
www.digitaldoyle.com/blog

I'm using Aftereffects CS3. Here's what I did when I exported...

- Went to Composition > Make Movie
- Left Render Settings
- Under Output Module, under Video Output clicked on Format Options, and changed the Compression Type to H.264
- Checked Audio Output
- Clicked Render

[Eye for Video]

Typically if it works on your local machine but not from the server, it's a pathing problem. You should be able to directly download just the player from this address:
http://www.chris-garman.com/tombstone/cidm_simple_vid_player.swf
It returns file not found...so the file was not uploaded correctly. Remember, you need a "tombstone" folder and then the player and a "video1.flv" inside.
EfV

[SteelCurtn75]

I think I got it working. Can you check out the link again and see if it works for you?

[DigitalDoyle]

Hey! You got it working. Way to go!

I'll have to scrap the long step by step I was writing.:) Saw your forum update come through via email.

If it were me, I'd use a nearly completely transparent video controller and set it to auto hide. More focus on your piece and less distraction that way.

There's also a weird preload thing going on with the frame. I'm viewing on the latest FireFox with XP Pro.

Good job!

[Eye for Video]

Well yes it's working, sort of.... I was expecting to see some of your artwork show up while the video was loading, as it does on a local machine. But that didn't happen. Anyway, the idea I wanted you to look at was how nicely the video looks displayed on one of your own full pages as opposed to a popup. I think the overall impression the viewer gets is better with the video directly on the page.
What do you think...(about the look after the video loads and starts to play) as compared to what you see when you "Lauch" the .mov player?
If you decide to use a player directly on your page, we can use that image you originally used as a thumb in a preloader, so the viewers don't just see an empty player.
EfV

[SteelCurtn75]

I like it in the frame, I'll just need to do some adjusting on layout...



Also that player is pretty ugly lol. Is there any way I could use something like this one...

http://www.video-flash.de/wp-content/uploads/2006/11/flash-video-player3.jpg



What about the file size? Is it taking a long time to load? I'm at school and the internet stinks here so I can't really tell.




Also I'm having trouble getting more than one video to work.

[Eye for Video]

The simple vid player is just a very basic custom Flash player to illustrate what very little AS code is required to get a .flv to play. I offer it up for testing purposes and/or learning experience. You may not want that as your final solution, but the price is right.
I've made one simple adjustment in this version to show you how you can get your art work to display when your page first loads. Open the .fla and look at the layers, there's now a thumbnail (your artwork) behind the video. The thumb I had was not the same size as the video 320 X 240 so I had to stretch it out. But you get the idea. You can use a correct size thumb, behind the video and display something besides an empty player when the page loads. Stick this .swf on your page to get a feel for the look with your artwork showing.
Feel free to customize as you want (controls, etc.), but if you do end up using this player, please leave the CIDM link active.
Best wishes,
EfV

[Eye for Video]

Here's a link to one of the most popular players around:
http://www.longtailvideo.com/players/jw-flv-player/
Highly rated and somewhat customizable.
Or you can create your own, and give it a completely distinctive look. My player illustrates how simple that really is. Here's something a little more elaborate if you ever are in need of a playlist for multiple videos:
http://www.cidigitalmedia.com/video.html
But you can design your own look, all the action is in the AS code, which is invisible to the viewer. The player itself can take on any look you can imagine. For someone in graphic design, you may eventually want to try your own custom designed player.
Best wishes,
EfV