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.

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>

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>

Answer 3

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.

Answer 4

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

Answer 5

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.