One of the most important parts of putting video on the web is to ensure it has been rendered properly. We would like to lend some best practices that we have learned during our tenure of creating web video. File size, quality, bit rate and more, all come into play. There is no all inclusive guide out there that has all of the answers. Testing is the primary way you can get your render settings just right.

Video on website is a balance between quality and file size. Yes, the majority of people have good connections. However, something like DSL can stutter even a well rendered file.

In this document we will outline video rendering best practices that will help you avoid issues with file buffering and more.

Video Editing Software

There are many desktop video editing suites and packages out there. Most are capable of creating video that will work with Flash (Our players are created with Flash). We use Adobe Premiere to edit video. Information and screen shots provided below will be based off of Adobe Premiere CS4 but, the values mentioned are industry standard terms that usually apply cross platform.

Working with Web Video – Exporting from Your Video Program.

When working with web videos there are several properties that need to be addressed for a streaming file to play correctly. I recommend using FLV or H.264 (MP4) formats to create your streaming web videos. MOV does work but we have seen issues with those files. FLV and MP4 videos are smaller in file size and offer the same if not better quality then the MOV files.

The ‘pixel aspect ratio’ of your video is important to maintain when encoding your timeline.
1920×1080 (High Definition)
720×480 (NTSC, 4:3 and 16:9)

- Our flash player plays videos best at 720×480 for NTSC and 800×450 for HD

- You can render your video any size you want as long as you keep it the same ratio.

The bitrate setting can vary depending on the overall production requirements.

- Our bitrate settings range from 500 – 1229kbps.

The audio settings are stereo, 32 – 128kbps. For longer videos, reducing this setting will help reduce file size. Changing this value usually can be done without noticeable quality loss unless one is working with extremely high fidelity gear, which would be seriously hampered by most Internet connections any way.

When working on an NTSC timeline, I’ve found that Premiere creates black bars on the right/left sides of the outputted FLV to accommodate for ratio differences. To eliminate this, render out a full quality .mpeg2 and use the Adobe flash encoder or embed the new mpeg into a timeline and then proceed to export the FLV/MP4.

High Definition

We find that MP4 files typically work best for High Definition. This term is thrown around in the web world, but the truth is the only way you can really get high definition is by having a 24in monitor. The files you play through the SinglePlayer or MultiPlayer that are labeled High Definition will be much better quality than your standard render, but there is no possible way to render a 1920X1080 file and send it to users unless you are using the Google or Yahoo vehicles . File size becomes a real problem here – a 5 minute video can become hundreds of MB’s. If you plan to offer a High Definition render be sure you offer an alternate option for users who have trouble. Ensure your web host is capable of sending these files to the viewer fast enough. Don’t forget to watch your bandwidth and storage usage with your web host – these files will eat it up. In our opinion we are not yet ready for the regular person/business to display HD web video. 50MBps home lines are coming so it won’t be long. I expect that in the next 1 or 2 years HD video will become more prevalent.

The other thing to keep in mind – FLV/MP4, etc are all rendered and compressed. The viewers computer must decode the video. If people have a slow computer, they are low on RAM, and have a lot of programs running, it can cause the computer to hiccup. This is no fault of the flash player, but the fact that the person’s computer is unable to handle that high quality of video.

Video Size & Long Videos

From the above example you can see that video file size starts to add up quickly. For this reason you want to have the right kind of render to fit your web hosting provider and your visitor’s Internet connections.

30-50Mb for a 5 minute file is typically ideal. It is also a good idea to split up videos. In other words, running a 30 minute video may not be the best idea if you are using HTTP download (which most use). The reason why – each time the user clicks play the entire file starts downloading. If they only watch 5 minutes there would have been a lot of unnecessary file transfer.

You can easily use the SinglePlayer or the MultiPlayer to split up files into “chapters” and allow the viewer an easy way to see the parts of the video they desire. 5-10 minutes is your standard Internet Video Length.

Making videos short can ensure your viewers run into less viewing problems.

Buffering

In order for the user to watch the video, it must download to their computer. There has to be a little bit of a buffer for the video to play smoothly. If your video can’t buffer as fast as you can watch it, your video will stop until the buffer catches up, only to stop again. You can see the SinglePlayer buffer below. Since this is a long video I feel confident it will buffer fine for most. I have tested these videos from DSL connections in rural locations and it has a hard time keeping up. There is still a LOT of people living in remote areas with slow DSL or Satellite connections. You don’t want to forget about them.

Clear your cache

Once the video fully downloads to your computer, it may store that and not try to download your new version next time. Be sure to empty your Browser cache each time you upload a new video. This forces your computer to go through the download process again.

Hosting your Video Files

It is important to use a fast web hosting provider. You will need at least 100KB bandwidth to send people video files. The easiest way to find out how fast your host is – upload a file that is larger than 10 MB to your host. Then download it through your FTP or HTTP and see how fast it is. This shows my web host is sending me 275KB/Second which is fast enough to handle several downloads at a time.

I have my web content on one host, and my video content on another. I use http://www.streamhoster.com/ but there are many out there.

Flash Streaming

Do you have large and lengthy video files? Your next step will be using a Flash Media Server host. Flash Media Server will stream web video in real time. This is different than HTTP download – instead of sending the user the entire file, a Flash Media Server streams it to the user as they view it. In addition, you can have multiple render settings within one file. It is possible to have an HD file, a standard render and, a small render all in one file. The Flash Media Server determines which stream it can send them and handles it automatically. This is of course more complicated to setup, render, and use but may be necessarily if you have large files or lengthy content. Click here to get an easy to use RTMP Video Player.

Adobe CS4 Example Render Settings:

H.264, Wide Screen.	H.264 4:3

 We hope you found this tutorial helpful! Thanks for visiting!

Clint Pollock
President | EZWebPlayer.com
The Non-Tech solution to putting videos online
www.EZWebPlayer.com

 

Connect with me !

More Web Video articles you might like…

• How to export High Definition video files to upload and stream on your website.

• WordPress and EZWebPlayer: Uploading Web Video to Your Blog is Better than Ever!

• Camtasia Tip: Create a High Quality Web Video Without Black Bars