CODEWITHSUNDEEP
javascriptvideo-encodinghtml5-videovideo-embedding
TheWebGuy
TheWebGuy

Reputation: 12575

Video encoding for websites

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

Upvotes: 2

Views: 5064

Answers (4)

heff
heff

Reputation: 3239

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.

Upvotes: 3

Ashley Williams
Ashley Williams

Reputation: 6840

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.)

Upvotes: 6

Jack Marchetti
Jack Marchetti

Reputation: 15754

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/

Upvotes: 1

TomTom
TomTom

Reputation: 62101

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.

Upvotes: -1

Related Questions