Video encoding for websites

Question

Hello,

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

I read that I should use HTML5 and the browser's native player

Which idiot told you that? Given that you will loose out on a significant portion of the client population you either run a monoculture of HTML 5 browsers, of whoever said that should be serving burgers at McDonalds, not give advice to people. HTML 5 and the integrated player are nice, but not there yet for the general public. In a couple of years, yes. Now - if I hire a web company for putting videos on a website and they do that, they get sued for gross neglect and incompetence.

Today, playback is mostly flash - that has a high penetration. A flash video player is also what sites like youtube currently use. If you go for less (penetration), Silverlight is very good and has the complete backend infrastructure.

I heard H.264 is promising?

So what? FIRST you need to fix the playback side, then you use whatever format is most efficient given your playback decision.

Answer 2

Use Handbrake for video encoding, especially for HTML 5 support.

HTML 5 is an awesome way of embedding video, however it hasn't been standardized yet. You definitely want to use it if you're supporting iOS devices, as they of course don't support Flash which is the most mainstream way of embedding video.

HTML5 is pretty awesome because this is how simple it is:

<video src="video.m4v" />

Here is a fantastic link you will find useful: http://www.robwalshonline.com/posts/tutorial-serving-html5-video-cross-browser-including-ipad/

Answer 3

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 4

Downgrading is easy ...

<video ... > your browser does not support html5 video </video>

Place the downgrade code in between the opening and closing of the video tags ... non html5 browsers will ignore the video tag and render the flash or any html code between the opening and closing video tags. HTML5 browsers will render the video and ignore the html code.

This feature can also be used to let people know about chromeframe http://wsmithdesign.wordpress.com/2010/10/03/using-html5-video-tag-with-ie8/ which works with IE 6-8 and allows them to use HTML5 video.

Video format is still a problem; not all browsers support mp4, not all browsers support ogv.