H.264 / FLV best practices for HTML

Question

I run a website that has as part of it about 700 reference videos (And no, it's not porn -- get your mind out of the gutter :-) ).

The videos are currently in FLV format. We use the JWPlayer to render those videos. IIS6 hosted. Everything works just fine.

As I understand it, H.264 (not FLV and likely not OGG) is the emerging preferred HTML5 video standard. Today, the iPad really only respects H.264 or YouTube. Presumably, soon many more important browsers will follow Apple's lead and respect only the HTML5 tag.

OK, so I think I can figure out how to convert my existing videos into the proper H.264 format. There are various tools available, including ffmpeg.exe. I haven't tried it yet, but I don't think that's going to be a problem after fiddling with the codec settings.

My question is more about the container itself -- that is, planning graceful transition for all users. What's the best-practice recommendation for rendering these videos? If I just use the HTML5 tag, then presumably any browser that doesn't yet support HTML5 won't see the videos. And if I render them in Flash format via the JWPlayer or some other player, then they won't be playable on the iPad. Do I have to do ugly UserAgent detection here to figure out what to render?

I know the JWPlayer supports H.264 media, but isn't the player itself a Flash component and therefore not playable on the iPad? Sorry if I'm not being clear, but I'm scratching my head on a graceful transition plan that will work for current browsers, the iPad and the upcoming HTML5 wave. I'm not a video expert, so any advice would be most welcome, thanks.

Solipsism

An update -- it looks like the JWPlayer team is well aware of this issue and is working on an HTML5 update: longtailvideo.com/support/forums/jw-player/feature-suggestions/… Still would love any suggestions. The JWPlayer is indeed a Flash App, and I don't quite know their HTML5 approach but it looks like they are trying to handle graceful failover. – Solipsism

H.264 (MPEG4) companies sued for patent infringement bit.ly/9vNGZW – Examen

Answer 1

Be aware Firefox does not support H.264 with the Video Tag, so if you want a graceful fallback then you should render your video tag like below and have an OGG version of the video.

       <video controls id="video" width="320" height="240" preload autobuffer >
            <source src="http://mycdn.com/videos/vid1.ogg" type="video/ogg" />
            <source src="http://mycdn.com/videos/vid1.mp4" type="video/mp4" />
            <!--RENDERED ON BROWSERS WITH NO HTML5 VIDEO SUPPORT-->
            <object width="320" height="240">
            <param name="movie" value="myplayer.swf">
            <embed src="myplayer.swf" width="550" height="400">
            </embed>
            </object>
             <!---->
        </video>

Sismondi

Very interesting -- these format wars seem determined to have us website operators/publishers use up hard disk space with multiple encodings of the same video... :-) – Solipsism

Flash can play H.264 video, so I'm not sure how much that'd be an issue, the only extra content would be the swf video player, which hopefully shouldn't be too large. – Vanillic

Answer 2

I'm not sure if this is an answer or just a comment, but I really need to challenge one of the assumptions of the original question: "Presumably, soon many more important browsers will follow Apple's lead and respect only the HTML5 tag."

This just isn't backed up by anything that I can see.

1. All desktop browsers support plugins, including Flash. Most non-Apple smartphones/tablets support Flash, support abitrary plugins, or support alternative browsers.
2. All browsers, even the iPhone OS one, support the object tag and at least attempt to do something with it. They even support things like marquee and font tags! The object tag will be around for a long long time yet, and as far as I know is even part of HTML5.
3. Firefox, probably the #2 browser after the various IE versions, is not supporting H.264 at this time.
4. Microsoft has made it clear that they dislike Flash and would prefer people to use Silverlight, backing up my feeling that the object tag is here to stay. They have vaguely committed to supporting native HTML5 video tags only in IE9. In the meantime, they ship the Flash plugin as part of the OS on Vista and Win7.

Anyway, to get to the real meat of the question: "My question is more about the container itself -- that is, planning graceful transition for all users. What's the best-practice recommendation for rendering these videos"

The HTML5 video tag supports naming multiple sources, so you can put the native H.264 video as the 'primary' and the Flash player as the 'fallback' to be used if the browser does not have support for the straight H.264 video stream.

<video>
<source src="../videos/primary.mp4" type="video/mp4" />
<object>
    <param name="movie" value="fallbackplayer.swf">
    <embed src="../videos/fallbackplayer.swf">
    </embed>
</object>
</video>

Oiler

Thanks much for taking the time -- I'm not really paying close attention to WC3/HTML5/H.264 stuff and appreciate the background above. – Solipsism

The solution above I think is a pretty good one for our needs. Didn't realize the new <video> tag allows a list of failback options, thanks much! – Solipsism

I'm pretty sure Flash is not included in Windows - it's always a separate download. But the way IE handles ActiveX makes it almost seamless (click the yellow info bar, "Install component", and it works) – Degeneracy

Oh, wait a minute -- that seems to work fine for the future, since the <video> tag is an HTML5 tag... But presumably to work in today's browsers that don't yet support HTML5 and respect <video/>, I'd have to do some useragent trapping and instead spit out the Flash object? – Solipsism

Browsers that don't support the <video> tag should just ignore it and spot the <object> inside. To them, it'd be like wrapping the <object> inside a <gobbledegook> tag: they just ignore stuff they don't know about. – Degeneracy

"The object tag will be around for a long long time yet, and as far as I know is even part of HTML5." Well, it's been part of HTML4 since inception. – Examen

This won't work on the latest version of Firefox because of the lack of H.264 support, it's not going to fallback to the Object tag either, it will just show a grey area where the video should be and a big "X". – Sismondi

Answer 3

Suggest you read video for everybody for good cross browser implementation. You can use the H.264 for Flash fallback too but as Lachlan says you should render with Ogg too for full cross browser compatibility.

Luht

Answer 4

The support in each browser for video codecs is like this:

• Firefox: Ogg Theora/Vorbis
• Opera: Ogg Theora/Vorbis
• Chrome: Ogg Theora/Vorbis and h.264
• Safari: h.264 (Ogg Theora/Vorbis with XiphQT components installed)
• IE9: h.264

I would recommend prividing an Ogg Theora alternative as well. I know it's not idea if you're concerned about disk space, but with all thanks to patent royalties and fear of patent trolls, it's the situation we're stuck with.

Refractive

Answer 5

Doesn't answer your question directly, but doom9.org has loads of great tutorials on video conversion/processing. could be useful for you

Mum

Answer 6

Since Chrome never actually pulled the plug out for h264 support, Firefox kept it as well and is planning better support of the format.

https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats (about 1/3rd of the way down the page)

Divisibility

As of March 2014 Firefox on OSX still does not support h264. This is on the page you link to as well. – Cano