How to (pseudo) stream H.264 video - in a cross browser and html5 way?

Question

I want embed MP4 video (H.264) in a way that should work cross browser but uses html5 if available for better performance. Firefox should fall back to Flash as long as I don't provide an WebM version.

The problem:

Firefox downloads the whole video before starting to play, while Chrome and other browsers play while still downloading.

That's what I did:

<video poster="poster.jpg" preload="auto" autobuffer autoplay loop >
  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

To implement the Flash fallback i used jMediaElement:

jQuery(function(){
  jQuery('video').jmeEmbed();
});

I tried some alternatives to jMediaElement, but I had problems hiding the controls and using autoplay/loop in the flash player. jMediaElement uses JWplayer as fallback and all these things just work when declared in the video tag.

The dev version is currently at: http://acn.lws-service.de/

The video is delivered with MIME type "video/mp4" as it is supposed to. The problem might be related to JWplayer/jMediaElement - or could it be the video (encoding) itself?

An alternative to jMediaElement which still allows the video to autoplay, loop and hide the controls would be appreciated as well.

alexander farkas alexander farkas · Accepted Answer · 2011-07-13T17:17:08

The problem is your video. Your video has no atom moov data, so it has to be fully downloaded, to get it played with flash (no progressive download). There is a simple solution. There is an Adobe Air App, which should add your moov data at the start of the file.

You can download it here. You can find more information here.

About the changes you made to your Markup. You should always add a type attribute. About autobuffer and preload. autobuffer is indeed not HTML5 compilant and was changed to preload. FF3.6 does support autobuffer, but not preload, luckily jMediaElement will detect this and will automatically set autobuffer to true, if preload=""/preload="auto" is attached. But in case you are using autoplay, you automatically set the behavior of the player to download the video as soon as possible. loop is also normalized by jMediaElement, so no problem here. Your HTML code should look like this:

<video poster="poster.jpg" autoplay loop >
  <source src="video.mp4" type="video/mp4" />
</video>

or a little bit shorter:

<video poster="poster.jpg" src="video.mp4" type="video/mp4" autoplay loop ></video>

How to (pseudo) stream H.264 video - in a cross browser and html5 way?

2 Answers