2

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.

Marcelo
  • 11,218
  • 1
  • 37
  • 51
Matt
  • 425
  • 1
  • 5
  • 6

2 Answers2

3

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>
alexander farkas
  • 13,754
  • 4
  • 40
  • 41
  • Thank YOU! After I processed the video with this AIR app (QTIndexSwapper2) everything works fine. Thanks a lot for the clarification and simplification of the html part - so after all (and with jme) html5 video is not that complicated. – Matt Jul 13 '11 at 22:21
  • I even found a PHP version of that AIR app, but while the AIR app works fine with my video, the PHP script just tells me that "The moov-atom isn't located at the end of the file, the file is allready ready for progressive download or it is a invalid file." - so we seem to have to stick with the AIR app or use encoding software which has an option for this... – Matt Jul 13 '11 at 22:24
0

autobuffer is no longer a valid attribute, it has been replaced with preload (the settings are none, metadata and auto)

loop currently isn't supported by Firefox.

Try leaving out the codec declaration in the source and see how that works?

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73
  • I removed the codec declaration - and the `autobuffer` parameter - still the same problem. I think, jwPlayer is to blame... – Matt Jul 13 '11 at 15:45