|A detailed tutorial about getting compatible video on your website.|
Web video player and compression tutorial
| 12:11 am on Oct 5, 2010 (gmt 0)|
Here is a great solution I have found for providing video on my video production website that most people can play without using a paid hosting plan like Vimeo. I use a local swf player (JW Player) instead of a player hosted on the Flash site. I also used a fallback to a basic Quicktime embed (instead of a fallback to html5 with mpeg4 and OGV files). I'll explain why I think that's better in a minute.
Here is the process I used:
I used MPEG Streamclip to encode. Main settings are as follows:
- File Format = H.264 Video w/ AAC audio in an MPEG-4 Container!
- Audio = MPEG-4 AAC, Stereo, Khz (Auto), 128 kbps
- Use ďFast StartĒ (Itís greyed out in MPEG Streamclip, however itís still enabled)
- No B-Frames
- Limit data rate to 700 Kbps.
- Better Downscaling
- Lower Field First
- Deinterlace Video (only if interlaced)
- Size = 320x240 (SD) or 320x180 (HD)
1. Download the Flash player from JW player at [longtailvideo.com...]
2. It doesn't include the expressinstall.swf for some reason so make sure you download it. Instructions and a download link are located here:
Make sure you use the expressinstall.swf from SWFObject version 1.5 because that is the version JW Player uses (and recommends) in it's code wizard. All you need from all the files that download is just the expressinstall.swf.
3. Upload the swfobject.js and the player.swf from JW Player download to the top level of your root directory on your server. Then do the same with the expressinstall.swf from deconcept download.
4. Create an ID DIV for the fallback video. If the Flash expressinstall fails (such as on an iphone or ipad that doesn't use Flash) then it will FALLBACK to the video in the ID DIV.
5. Use the code wizard from JW player to point to your video and player files (you must use the complete paths) and make the other settings you want. MAKE SURE YOU SELECT THE EMBED USING "SWFOBJECT 1.5 CODE" NOT "EMBED CODE" (located above the generated code) that way we can use the fallback and expressinstall features, then copy the code and paste it right after the ID DIV in your body. Full instructions are located on the JW player site and on the deconcept page above. The code wizard is located on the JW Player site here:
6. Now you have to manually add the expressinstall.swf code into your code. I will show a full example below but instructions are on the deconcept site I gave the link to. Express install will automatically prompt the user to install a newer version of Flash if the designated version is not found. The first version of Flash to play H.264 was 9.0.115 so you can see where I inputted that below. I also used autoplay parameters because I wanted my videos to auto play.
7. Now see the code inside the DIV ID below? That is where you put the fallback video or videos. Many people suggest putting the html5 "video" tag here with an MP4 first and an OGV of the same video second. Instead I used a simple Quicktime embed of the same MP4 file I used for the Flash player. That way I didn't have to re-encode all my files for OGV and iphones and ipads can still play it!
8. Use the following video player sizes in your code.
JW Flash Player (Controller is 24 pixels tall):
SD = 320x264
HD = 320x204
Quicktime Player (Controller is 16 pixels tall):
SD = 320x256
HD = 320x196
If someone comes to my page and they have an older version of Flash than 9.0.115 then expressinstall.swf will prompt them to download a newer version. If they don't have Flash installed or have an iphone or ipad then the Quicktime player will play the same file.
Here is my code. Notice the difference in size between the Quicktime player and JW Flash Player in the respective parts of the code:
<embed src="../media/doubletree.mp4" width="320" height="256" autoplay="true" pluginspage="http://www.apple.com/quicktime/download/"></embed>
var so = new SWFObject('http://www.playroomcreative.com/player.swf','mpl','320','264','9.0.115');
To see it in action, click on one of the video thumbnails on my page:
Other great resources:
[edited by: travelin_cat at 8:04 pm (utc) on Oct 5, 2010]
[edit reason] Removed Signature Link [/edit]
| 1:21 pm on Oct 11, 2010 (gmt 0)|
The field selection has to do with interlacing, select the wrong one and you'll get a ghosting effect during a section where there is lot of action. Video encoded using DV material is always lower. I believe anything recording MPEG uses top as do many other devices like capture cards.
Lastly if your source is progressive select frame based.
| 2:57 pm on Oct 11, 2010 (gmt 0)|
I haven't researched this, but I can almost guarantee there's software out there that will convert a whole folder of files to the video format you require.
I would suggest getting away from Flash and moving to a format supported by everyone, especially with the ever increasing users of iPads/iPhones.
| 2:55 am on Oct 12, 2010 (gmt 0)|
Yes thecoalman you are correct. The field order must match what was captured. If it's starts progressive (not interlaced) do not de-interlace at all.
Inregards to StoutFiles comment,
|I would suggest getting away from Flash and moving to a format supported by everyone, especially with the ever increasing users of iPads/iPhones. |
please read my original post above completely and you will see that is my whole point.
| 4:07 am on Oct 13, 2010 (gmt 0)|
|I would suggest getting away from Flash and moving to a format supported by everyone |
MPEG1 is the closest and only format that could be considered universal however it's about 5X the bitrate/file size of modern codec. Embedding the player is a whole other problem itself.
Flash and Silverlight players eliminate the codec issue and both support modern codecs for much smaller files.Until HTML5 goes mainstream realistically it's best alternative.