Recommended settings for EX-1 Web Video Delivery

[Jon Lindsay]

I've pulled this piece together to show the compression/encoding settings I use for EX-1 web video (after 2 years of hard slog getting the optimum setting with various clients)

Encoding and compressing HD footage for the web- recommended settings - Spacedust Films

Hope it's helpful

Jon

[Craig Seeman]

Nice basic overview.
Do you have the link to the survey data that states the average internet connection is 2Mbps?
Interesting comments on Flash 8 vs Flash 9. One advantage of Flash 9 (H.264 video AAC audio) is that one often doesn't need to buy any Flash exporter at all. Flash 9 is often also called Quicktime 7.

You can hand someone an H.264/AAC file and it can be used in Flash, Silverlight, Quicktime. Flash 9 software is extension agnostic.

Here's Flash 9 H.264 info from Adobe
Flash Player:9:Update:H.264 - Adobe Labs
and here's the bit about extension agnostic
Flash Player:9:Update:H.264 - Adobe Labs

Flash Player will also support files derived from the standard MPEG-4 container format such as MP4, M4A, MOV, MP4V, 3GP, 3G2 if they contain H.264 video and/or HE-AAC encoded audio.

Flash 8 On2VP6 (Flix) is good but you can't beat not having to pay for the export software if you already have means to export H.264 AAC.

[Leonard Levy]

This is interesting to me as I now have a website created in an old Dreamweaver MX2004 (MAC) , and the video samples all use a Quicktime plug in , into which I put H.264 QT .mov files created in Compressor.
After reading this I scoured the web and found that all you have to do with those H.264 .mov files is change the file name to .flv, and they will play in Flash 9.

Furthermore what I read is that Flash 9 has is much universal on the web now.

So my question is, how do get a Flash 9 plugin for Dreamweaver MX2004? Is that possible? Can I just use the old Flash plug-in that came with Dreamweaver?( I've never even tried it - if its there at all actually.)

Lenny Levy

[Craig Seeman]

You don't even need to change the extension.

Please read this again:

Flash Player will also support files derived from the standard MPEG-4 container format such as MP4, M4A, MOV, MP4V, 3GP, 3G2 if they contain H.264 video and/or HE-AAC encoded audio.

ALL the above extensions work. Even MOV.

You did need to build a player for it. That's the way Flash works. There are free players available.

I like this because they have cut and paste code and a "wizard" for customization of that code.
LongTail Video | Home of the JW Player

There's also this
Flowplayer - Flash Video Player for the Web
Whose instructions are a bit harder to follow.

You can certainly import the H.264 and build a player in Adobe's Flash.

[Leonard Levy]

OK this may be stupid, but are those players that work with my browser for playing flash that I find on the web, or are they code ( plug ins?) that I can put in the HTML of my web page so it will play on someone else's web page when they click on my address?

I guess i am confused by the term "Flash player".

Lenny

[Craig Seeman]

It's code (JW Player and Flower Player) that you use to build a player in your web page.

Adobe Flash Player is a plugin that you have in your browser to play Flash files.

[Leonard Levy]

Craig, I'm trying to figure this out, but as with many things I find on the web, there seems ot be some basic information that is completely left out of the tutorials.
I downloaded the player from Longtail and placed the player in the same folder I have all my other web files in - so its the folder that is my practise for placing things on my server.

I follow there instructions and can embed the player in my page, but it is a player without any video in it. I don't see any way to link or otherwise get video ( whether its named .mov or .flv) into the player.


Obviously I'm missing something major here

[Craig Seeman]

And longtail is the EASY one!

s1.addParam('flashvars','file=video.flv');

video.flv is your video file. It doesn't have to be flv especially if it's an H.264 file.
This assumes the vide file is in the same directory as the web page. That's the easiest way to do it.

If it's in a folder called media it would be
s1.addParam('flashvars','file=media/video.flv');

<script type='text/javascript' src='swfobject.js'></script>
You've got to put the file
swfobject.js
in the same director as the web page as well. That's the javascript.

var s1 = new SWFObject('player.swf','player','400','300','9');
player.swf
which is the "Shockwave Flash" player also goes in the same directory as the web page.
The other part describes the frame size of the player.

[Craig Seeman]

Here's an example of a player I did with a skin. Note that the file is actually a Quicktime MOV file which now plays in Flash if it's H.264.
______

<script type="text/javascript" src="swfobject.js"></script>
*
<div id="player">This text will be replaced</div>
*
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','400','284','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=FrankMorrisMix_FL9_480x270.mov&image=FrankMorrisSmall.png&frontcolor= ffffff&lightcolor=cc9900&skin=bekle.swf');
so.write('player');
</script>

[Craig Seeman]

Here's the primitive web page. The video was shot with EX1 (of course). I compressed it to H.264 .mov in Telestream Episode.

I used a "skin" which is actually very similar to Vimeo's.
It's called "Bekle"

The page with the Flash video player.
Elect Frank Morris

That's what this is in my code above
&skin=bekle.swf'
flashvars list the variables
so.addParam('flashvars','&file=FrankMorrisMix_FL9_480x270.mov&image=FrankMorrisSmall.png&frontcolor= ffffff&lightcolor=cc9900&skin=bekle.swf');

You'll see the name of the file (.mov), the poster frame (.png), the color of the skin (all those color followed by letters and numbers), skin (bekle.swf).

They have a wizard page which allows you to enter in the parameters you want and it generates the code.

Setup Wizard | LongTail Video | Home of the JW Player

[Leonard Levy]

I'm sorry to be a blockhead, but never having taken courses in this tuff I just have kind of learned it on my own.
If I'm too much of a novice tell me to forget it. However I do have a page with lots of quicktime video on it that I can change myself so I'm not a total moron.


I don't understand where this code goes.

For example, I have a table with a cell and in that cell when I was using quicktime the code read like this (BTW its 480 by 380 for a 480x360 video with room for the controller underneath , the video is in a folder called "movies demo versions" - I guess I shouldn't use spaces to avoid the 20% messing things up):

<td align="left" valign="top" bgcolor="#FFFFFF"><embed src="movies%20demo%20versions/broadband%20demo.mov" width="480" height="380" align="right"></embed></td>

Now when I tried to put the Flash player in from longtail i ended up with this:

<td align="left" valign="top" bgcolor="#FFFFFF"><embed
src="player-viral.swf"
width="480"
height="380" loop="false" align="right"
allowscriptaccess="always"
allowfullscreen="true"
/></td>


But that just puts an empty Flash player in that cell

I also tried this from another tutorial on the Longtail page, but this didn't give me anything useful.

<td align="left" valign="top" bgcolor="#FFFFFF">
<p id='preview'>The player will show in this paragraph</p>

<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=video.flv');
s1.write('preview');
</script></td>

Now your telling me to add something else, but I don't know where to add it.
Should I just forget the whole damn thing and hire someone?

Lenny

[Craig Seeman]

Try This:

<td align="left" valign="top" bgcolor="#FFFFFF">
<p id='preview'>The player will show in this paragraph</p>

<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=movies%20demo%20versions/broadband%20demo.mov');
s1.write('preview');
</script></td>

I would definitely get rid of the spaces though. Some servers don't like them.
Make sure you've uploaded to the directory your web page is on:
swfobject.js
player.swf

You need those for the javascript (.js) and for the actual player (.swf) to work.
Make sure the .mov is H.264.

Why not post the link to the page?
I create my pages in Freeway (Mac only)
but any web authoring program will allow you to embed the code.
Sometimes you have to make sure you're uploading
swfobject.js
player.swf
to your website and not just the code you've written.
The script actually uses the above two to run.

Preview the page on your desktop first to make sure the authoring is working

[Leonard Levy]

Thanks Craig, I'll try that next, but the download i got from longtail didn't have

player.swf"

Instead it had

player-viral.swf

If you click on that a it plays opens a "Live type" page.

now hears something else i don't understand .
I copied the file player-viral.swf by using duplicate in the Mac file menu. So I could put one copy in my web folder and leave the other in the downloaded folder with everything else that came form longtail. I intended to just delete the letters "copy" from the file as soon as I moved the original to the web folder. The weird thing is I cannot edit that file name now - I can't delete the word " copy" from that filename.

Lenny

[Craig Seeman]

player-viral.swf
has additional features for linking to viral video sites. I'm trying to keep this simple. Just uncheck the viral version when you download it and you'll get the non viral version.

Sounds like you have a permissions issue if you can't change the name. If they were in the same folder you would have problems changing the name since you can't have two files with the same name in the same folder but you said one copy was in the download folder so that shouldn't be an issue.

There's some strange file identifier/creator issues that causes it to think the file was created with Live Type. I've also had .xml files that think they should open in Color. Don't worry about it. You shouldn't be double clicking on the player.swf file anyway.

[Leonard Levy]

Hey by gum , it almost works.
I'm getting picture but no sound and the frame rate is slow. By that I mean it looks like 15f /sec or so maybe even lower.

Actually - perhaps it is stuttering but whether its frame rate or stuttering it happens in Safari, but not in Firefox. In Firefox the speed is fine, but still no audio

Correction:
Rebooted, reinstalled the newest Flash, and emptied cache - now the speed is OK but no sound in either firefox or safari.
The problem with not being able to change a file name disappeared on the reboot .

All would be fine if I had sound. No quick start either though.