What is the most compatible compression/Codec to in Handbrake use for video that will be played in Chrome and Safari browsers? I am going to re-sample a bunch of videos to be played through web browsers.
(Current video is large, 3 MB for a 4s clip. Hoping to compress by 90%).

Use:  These videos will be played in a web-based eduational app. They'll be up to about 5 seconds and be played in the latest Chrome or (on iOS/Mac) Safari browser.

I'm using Handbrake (.9.9.5530, latest) . These must be playable in Chrome and Safari (latest versions) browsers without any pluggins (and would be nice to be playable in the latest FireFox and IE).
(I'm also open to using another free or cheap encoding software that will let me do batch processing.

What are the recommended settings (Video Codec, Quality (and constant or avg bit rate, etc.)
My top priority is compatibility.
If compatibility is your top priority, then you should include two alternative versions of your video on your website, like in this HTML example.

As for the exact formats I would suggest:


H.264 and AAC in MP4: Chrome, Firefox 22+ on Windows, IE9, Safari 3.1
VP8 and Vorbis in WebM: Firefox fallback for Mac and older versions on Windows.
(If you need support for even older browsers (IE6-8), and mobile (Android, WP7), you could add mediaelement.js to your website.)


Make sure to put them in that order to make the fallback work. H.264 or MPEG-4 are recommended because they are the only formats to have hardware acceleration on newer devices. 

Compression settings: start by using constant quality with default settings for video and 128 Kbps VBR audio. For H.264 make sure to not exceed Main Profile and Level 4.0. And since Handbrake doesn't do the WebM format, you could try Miro Video Converter.