Link to .webm instead of .mp4 for http://giant.gfycat.com

[jeffjose]

First off, thanks so much for redditp!

I just noticed that redditp.com links to .mp4 version of gfycat videos, when it should be linking to .webm versions of it.

The *.mp4 versions are significantly larger with no appreciable visual gains. Here's an example -

http://gfycat.com/AcceptableWebbedBedbug

mp4 (13.5M) - http://giant.gfycat.com/AcceptableWebbedBedbug.mp4 webm (4.5M) - http://giant.gfycat.com/AcceptableWebbedBedbug.webm

That's almost 3x times savings. I'm sure your users would appreciate snappier gfy loads!

---

ffmpeg info of mp4 vs webm

mp4

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '/tmp/sfw.test.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf54.63.100
  Duration: 00:00:08.96, start: 0.000000, bitrate: 12609 kb/s
    Stream #0:0(eng): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 1920x1080 [SAR 1:1 DAR 16:9], 12608 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc
    Metadata:
      handler_name    :

webm

Input #0, matroska,webm, from '/tmp/sfw.test.webm':
  Duration: 00:00:08.96, start: 0.000000, bitrate: 4191 kb/s
    Stream #0:0: Video: vp8, yuv420p, 1920x1080, SAR 1:1 DAR 16:9, 30 fps, 30 tbr, 1k tbn, 1k tbc (default)

[0xE282B0]

Good point!

[ubershmekel]

Wow. I had no idea . I've been doing some work on improving gifv and gfycat support on redditile. Thank you for the information! There needs to be some browser support for webm sniffing done but if there's a preferred codec - let's use that. Do you have information on more videos? Often codecs are specialized and you don't get a complete "picture" until you compare many examples.

[jeffjose]

Both webm and mp4 are part of HTML5 video standards. This means users dont need any specific plugin to render them (think flash).

https://en.wikipedia.org/wiki/HTML5_video

webm is something that Google (bought and) open sourced, and its my preferred HTML5 video streaming format. webm was very specifically built for the internet, so its super lean and supports streaming. (Aside: Google also open sourced webp as an alternate to jpeg/png which again has savings without loss of visual quality)

Long story short - webm should be supported by all modern browsers without any additional plugins/addons because its part of HTML5 standard.

[jeffjose]

Another nice thing about HTML5 video is you can provide multiple sources and the browser will pick the right one. This is what gfycat.com is internally doing as well.

From the source of http://gfycat.com/AcceptableWebbedBedbug

         <video .... >
            <source id="webmsource" src="//giant.gfycat.com/AcceptableWebbedBedbug.webm" type="video/webm">
            <source id="mp4source" src="//giant.gfycat.com/AcceptableWebbedBedbug.mp4" type="video/mp4">
            Sorry, you don't have HTML5 video and we didn't catch this properly in javascript.  
            You can try to view the gif directly: <a href="http://giant.gfycat.com/AcceptableWebbedBedbug.gif">http://giant.gfycat.com/AcceptableWebbedBedbug.gif</a>. 
        </video>

Notice how the <video> tag has both mp4 and webm. My browser picks up webm but if I were on a browser that doesnt understand webm it'll pick up mp4.

[ubershmekel]

From https://github.com/ubershmekel/redditile/blob/master/EmbedIt.js#L3

Imgur is annoying and when you use the tags it tries to redirect you to the gifv page instead of serving video. We can only circumvent that by putting the src on the

It's unfortunate but my testing showed I need to use the src for imgur. I can still prefer webm though..

[jeffjose]

I see what you're saying, but I think you can still make imgur serve webm/mp4 instead of the slower gif (which is I think what you're doing now) by reverse engineering what imgur itself is doing.

gifv as you'd know isnt a format, but a new extension that imgur made up. If you look at the source of any gifv url you'll see they are doing <video> with links to webm and mp4. The only difference between hitting the webm directly and them doing it is the headers. I dont have the necessary infrastructure to test this but if you send the exact headers that imgur is sending, their serves should respond with the video instead of redirecting you to gifv page.

Request webm directly, resulting in a 302 redirect

GET /szseeIj.webm HTTP/1.1
Host: i.imgur.com
Connection: keep-alive
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.104 Safari/537.36
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,id;q=0.6,ms;q=0.4
Range: bytes=0-441
If-Range: "b63d4bb03c3151ad2d601c03f812d716"

What imgur is doing when they request webm

GET /szseeIj.webm HTTP/1.1
Host: i.imgur.com
Connection: keep-alive
Accept-Encoding: identity;q=1, *;q=0
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.104 Safari/537.36
Accept: */*
Referer: http://i.imgur.com/szseeIj.gifv
Accept-Language: en-US,en;q=0.8,id;q=0.6,ms;q=0.4
Range: bytes=0-

My guess is you use Accept-Encoding and/or Range headers when you make the request imgur servers should return the video instead of the redirect.

[jeffjose]

Sorry to be a pest, but any updates on this one?

[ubershmekel]

Sorry it's taken me so long to respond. I'm not sure what caused imgur to redirect my video elements but I wasn't able to reproduce it when I tried more recently.

A pull request to fix this is more than welcome. Though I do warn that the long-term plan is to somehow unite redditp image/gif embedding with redditle's https://github.com/ubershmekel/redditile/blob/master/EmbedIt.js

[jeffjose]

I just fix this over at PR - https://github.com/ubershmekel/redditp/pull/47

[ubershmekel]

I believe this is fixed. Thank you Jeff.