Video encoding for websites

Question

I am a little new to embedding videos on a website. What is the best way to go about it? I just started reading up on it.

I read that I should use HTML5 and the browser's native player. -- Does anyone know of a javascript library that will use the browser's player and detect if the browser is not using HTML5 to downgrade to a flash player?

As far as encoding what is the best approach? I am planning on writing a little console app to use FFMPEG to convert the videos. But what encoding should I use? I heard H.264 is promising? But

Answer 1

This is what you're looking for: http://videojs.com/

Encoding wise, I think H.264 and WebM is a wise choice. That way you'll satisfy all modern browsers and mobile devices (incl. iOS and Android), and only fall back to Flash for older, pre-HTML5 browsers (and FF 3.6, which only supports Theora.)

Answer 2

The DIY approach would be to use the Video For Everybody embed code. That will lead with HTML5 video and fallback to flash. Then for video encoding, you can use FFmpeg like you said.

To make your life easier, you should check out VideoJS for your HTML5 video player. It handles a lot of cross browser issues and some extra features that browsers don't support yet. For video encoding, if you're planning to use FFmpeg specifically for automating encoding, you should check out Zencoder's video encoding API. It could save you some set up time and compatibility issues.

For codecs, #1 priority should be h.264, specifically using the baseline profile so it will work on smartphones. After that, ogg and webm are both good choices. WebM is higher quality for file size, but Ogg can be viewed by way more users because older version of Firefox support it. And just to note, if you only do h.264, the Video For Everybody code won't fallback to Flash in Firefox and Opera (that don't support h.264) so you'll need to use a player like VideoJS.