GIF vs webM/MP4

This is a test for using webM/MP4 videos. It would be awesome if you could write me feedback if it does/doesn’t works for you (mail, twitter, facebook). The general advantages would be:

  • Loads faster because if smaller file size
  • You can start/stop the animation if it annoys you while reading (just hover over the video with your cursor)
  • You can fast-forward/rewind the video or jump to a special point for a deeper look
GIF

Size: 5.70 MB

webM

Size: 0.91 MB

  • Not supported by Safari/IE
MP4

Size: 0.67 MB

  • Supported by every Browser i tested
  • But on Chrome/FF i saw a blank/empty frame everytime the animation starts again/loops
webM/MP4

Let’s try to let the browser choose which format is the best. I hand him webM and MP4 and if the one isn’t supported, it should choose the other one:

  • Works well because Chrome/FF use webM which works very well there
  • Safari/IE should use MP4 instead which works perfect there

Here’s the code which makes the browser choose the correct format:

<video width=”100%” autoplay controls loop>
<source src=”https://data.simonschreibt.de/share/mgr_dynamic_skeleton.webm” type=’video/webm;codecs=”vp8″‘></source>
<source src=”https://data.simonschreibt.de/share/mgr_dynamic_skeleton.mp4″ type=”video/mp4″></source>
</video>

If you have any problems (or a strong opinion about webM), please contact me (mail, twitter, facebook) and tell me what browser you’re using.

Thank you!

4 thoughts on “GIF vs webM/MP4

  1. René

    Doesn’t work on OSX :(
    Firefox 30 beta -> “Kein Video mit unterstütztem Format und MIME-Typ gefunden.”
    Chromium -> empty, grey box
    Safari -> video box with ‘Loading…’ and nothing happens

    Reply
    1. Simon Post author

      Thx for testing! I added MIME tags and the correct codec to the HTML tag. But IE doesn’t work either. Have to check tomorrow.

      Reply
  2. Eric Chadwick

    Chrome 34: None of the videos can be paused by clicking on the video, only on the play button itself. The MP4 alone won’t scrub and refuses to re-play after pausing. The webm becomes a mess when scrubbing, though it cleans up when re-playing. The webm/mp4 is playing webm, so same problems.

    Firefox 28: All 3 videos play/pause/scrub perfectly.

    Internet Explorer 10: None of the videos can be paused by clicking on the video, only on the play button itself. The webm is black with an error message. MP4 plays and scrubs fine, same for webm/mp4.

    Reply
    1. Simon Post author

      Thank you for all the testing! Scrubbing/Pausing is cool but in comparision with the vanilla GIF it’s already awesome when it just plays/loops (but of course with smaller filesize). Your video setup is really cool! But i think for my blog it’s better to have the videos played automatically. :) By the way, this MMO stuff looks really cool!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *