Should Discourse convert GIFs to mp4 video files?

AI-generated summary

The discussion revolves around converting GIFs to MP4 video files in Discourse. erlend_sh suggests mimicking Twitter’s approach, while codinghorror mentions gfycat.com, which automatically converts GIFs to WebM. lidel proposes using gfycat’s API or replicating the functionality with ffmpeg.

Imgur is also discussed, with lidel mentioning their introduction of GIFV, which automatically converts uploaded GIFs to MP4. sam suggests using a similar approach, with a video element and fallbacks, and proposes actionable steps, including forcing a click to download large GIFs, converting animated GIFs to WebM and MP4, and integrating with Imgur.

lidel suggests replacing GIFs with looped videos from common providers, while lightyear suggests using the onebox to add a whitelist for these providers. codinghorror is fine with special MP4 handling for these services.

The discussion also touches on the issue of large GIFs causing problems on mobile devices and the benefits of converting GIFs to MP4, including better compression and fullscreen functionality. Tris20 asks if the solution was implemented, and codinghorror responds that clicking a GIF to go fullscreen doesn’t make sense. Tris20 explains the need for fullscreen functionality, and codinghorror suggests adding a notice to inform users how to make GIFs full size.

Just read about this neat trick that Twitter is doing with GIFs:

http://blog.embed.ly/post/89265229166/what-twitter-isnt-telling-you-about-gifs

Perhaps this is something Discourse would like to mimic in the future.

And for the watercooler: If a video format does everything GIF does and more, and with better compression, are the days of the GIF numbered?

12개의 좋아요

http://gfycat.com also does this.

Live example with both formats automatically offered

http://gfycat.com/HonorableAdolescentFowl

Gif Size: 13M
Gfy Size: 2M
Compression: 2.7 to 1 (Bandwidth saved: 17G)
Views: 2082
Original: Video
Reddit comments: /r/battlefield_4
1개의 좋아요

Yep, it seems to have built up a fair bit of traction, mostly thanks to the Reddit crowd. There’s an API of sorts too. If Discourse did its automatic grab-the-file-and-self-host-it I suppose this might work in the short term.

I really think this kind of workaround ought to be open source though. A lot of articles I’ve read describe Gfy as a new format, which is very misleading. There’s only one way to make a “Gfy”, and that’s through Gfycat.com. Gfy is a service.

4개의 좋아요

Some communities would benefit from such functionality.
Especially ones with download remote images to local setting enabled :stuck_out_tongue:, but faster page loads alone is a good reason to think about it.

Quick hack would be to just use gfycat.com API.
Assuming one does not mirror remote images, I think it is achievable even with pure Javascript which you can add via /admin/customize/css_html. Lets say JS iterates over posts and if it finds .gif image. HTTP GET is performed:
http://upload.gfycat.com/transcode?fetchUrl=i.imgur.com/jGMtJIb.gif
It downloads&converts remote image (if not already present) and returns JSON with video details. At this point you replace .gif with video in post (see section “How can I embed these or link to them?”)
Custom plugin which bakes .webm into posts via background job would be of course more elegant.

Anyway,
I don’t think they (gfycat) do anything magical beside handling hight traffic quite well.
We can replicate functionality with ffmpeg alone (see 4chan’s guide to converting GIF to WebM).

If we plan to self-host .webm it would be just an extension to already existing download remote images to local feature. We would have an additional setting replace .gifs with optimized .webm versions (we could add another setting: convert only .gifs bigger than..).

Such native functionality requires ffmpeg as a dependency and comes with additional security risks.
It does not sound like a good default for Discourse: maybe it is possible to create it as a plugin?

7개의 좋아요

A related development, Imgur is introducing GIFV:

The cornerstone of Project GIFV is a platform-wide upgrade to automatically convert uploaded GIF files on the fly into the MP4 video format. [..]

The .GIFV Extension: With all these improvements, Imgur will now denote converted MP4s with a “.gifv” extension. The intention is to signal to users throughout the Internet that these links will feature a GIF experience that incorporates all the current and future enhancements made through Project GIFV. Imgur plans to submit an accompanying specification to relevant standards organizations before the end of the year.

5개의 좋아요

The “gifv” “files” are actually just a HTML page that runs some Javascript to pick the GIF or MP4 file.

1개의 좋아요

Exactly! :smile_cat:
Discourse already has onebox for MP4 files.
So the only missing piece is some kind of a sidekick job that does the conversion and slight modification to the onebox to loop by default (if mp4 was created from gif).

You can do view video and share the gifv link, but you can’t save it. Facebook is embedding givf files nicely.

The problems I have read so far is poor display on some devices. Plus comment about this case:

If you upload to gfycat, you can actually get an .mp4 link that discourse will show inline :smile:

[removed broken link]

edit: hmm, this mp4 stopped working for me, but if I open in incognito or restart chrome it works again – not sure what’s up.

2개의 좋아요

It works for imgur.
For example something like https://i.imgur.com/mYNXTPw.gif can be requested as https://i.imgur.com/mYNXTPw.webm which gives:

It would be nice if Discourse detected .gif URLs from common providers such as imgur/gfycat
and just replaced image with looped video (already provided by site), as it saves a lot of bandwidth.

1개의 좋아요

That sounds like something that could easily be done using the onebox, adding a white list either in the image or video engine. I am happy to build that, if such a PR is wanted (could also be behind a configuration setting, if needed).

3개의 좋아요

I am fine with special MP4 handling onebox for these services that specialize in it.

8개의 좋아요

A quick update,

Chrome does a terrible job with huge gif files, they can choke the web browser and cause all sorts of nasties not to mention mobile paying a hefty price on traffic and blowing data plans.

Gifv technique championed by imgur is good

https://i.imgur.com/zvATqgs.gifv

<video id="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop" poster="//i.imgur.com/zvATqgsh.jpg">
        
     <source src="//i.imgur.com/zvATqgs.webm" type="video/webm">
     <source src="//i.imgur.com/zvATqgs.mp4" type="video/mp4">
     
     <object type="application/x-shockwave-flash" height="370" width="660" data="//s.imgur.com/include/flash/gifplayer.swf?imgur_video=//i.imgur.com/zvATqgs.mp4&amp;imgur_width=660&amp;imgur_height=370&amp;imgur_url=//imgur.com/zvATqgs">
         <param name="movie" value="//s.imgur.com/include/flash/gifplayer.swf?imgur_video=//i.imgur.com/zvATqgs.mp4&amp;imgur_width=660&amp;imgur_height=370&amp;imgur_url=//imgur.com/zvATqgs">
         <param name="allowscriptaccess" value="never">
         <param name="flashvars" value="height=370&amp;width=660">
         <param name="width" value="370">
         <param name="height" value="660">
         <param name="version" value="0">
         <param name="scale" value="scale">
         <param name="salign" value="tl">
         <param name="wmode" value="opaque">
     </object>
 </video>

It’s really just a video element with a bunch of fallbacks.

I see a few actionable things we can do here:

  1. If people hotlink anything larger than say 10mb force a “click” to actually download the image and hide it behind a preview

  2. get ffmpeg into our base image and do the webm and mp4 conversion for all animated gifs, don’t worry about the flash fallback.

  3. Offer an integration piece with imgur that uses imgur to do this … any gif larger than X gets sent to imgur for recompression. (or use a different service)

7개의 좋아요

Another huge advantage is that you get no auto play on mobile with the technique above

1개의 좋아요

One thing to consider is how Slack deals with this:

http://img0.joyreactor.cc/pics/post/%D0%B3%D0%B8%D1%84%D0%BA%D0%B8-superjail-%D0%BC%D1%83%D0%BB%D1%8C%D1%82%D1%81%D0%B5%D1%80%D0%B8%D0%B0%D0%BB-%D0%A1%D0%B2%D0%BE%D1%8F-%D0%B0%D1%82%D0%BC%D0%BE%D1%81%D1%84%D0%B5%D1%80%D0%B0-1886210.gif (Not automatically expanded because 30MB is too large. You can expand it anyway or open it in a new window. You can also change your preferences to allow images of any file size to auto expand.)

4개의 좋아요

We do handle enormo gif links now in a sane way. One thing we don’t yet offer is the “expand it anyway” option :thinking:

3개의 좋아요

방금 해당 기법을 사용하는 Discourse Gifs 컴포넌트를 만들었습니다

2개의 좋아요

이 기능이 실제로 구현된 적이 있는지 궁금합니다. 다음을 확인했습니다.

하지만 이 둘 모두 솔루션이 실제로 구현되었는지를 명확히 하지 않습니다.

이렇게 묻는 이유는, 제가 잘못 알고 있는 것이 아니라면 라이트박싱(lightboxing)이 GIF와 호환되지 않는 것 같기 때문입니다. 즉, GIF를 클릭하여 전체 화면으로 전환할 수 없습니다. GIF에 상세한 텍스트가 포함된 경우, 사용자는 새 탭에서 이미지를 열지 않고는 확대할 수 없습니다.

그러나 업로드 시 GIF가 MP4로 변환된다면, 기존 비디오 플레이어의 전체 화면 기능과 시간 바를 활용할 수 있어 큰 이점이 있습니다. 짧은 튜토리얼 클립을 볼 때 특히 그렇습니다!

이 변환 기능이 이미 사용 가능한가요? 설정에서 "gif"를 검색해 보았지만,

1개의 좋아요

이건 "어떤 이미지가든 클릭하면 전체 화면으로 전환되어야 한다"는 것과 비슷해서, 제 생각에는 좀 말이 안 되는 것 같아요? :confounded_face:

다양한 문서 스타일(텍스트만, 영상만, 텍스트 + GIF)을 비교해 본 결과, 텍스트 + GIF 옵션이 압도적으로 우수했습니다. 따라서 튜토리얼 게시물에서 GIF를 사용하여 내용을 시연할 계획입니다. 하지만 GIF를 전체 화면으로 표시하거나 라이트박스(lightbox)로 열 수 없다면, 작성된 텍스트가 잘 보이지 않는 경우가 많습니다.

gifstoosmall

마우스를 올리면 보시겠지만, 선택지가 일시정지뿐입니다.

하지만 우리가 정말 필요한 것은 GIF를 전체 크기로 만들 수 있는 기능입니다. 우클릭하여 새 탭에서 여는 방식은 숙련된 사용자에게는 괜찮지만, 나머지 90%의 사용자에게는 그렇게 적응하라고 기대할 수 없습니다. 따라서 업로드된 GIF가 클릭 시 전체 화면으로 확대되는 라이트박스 기능을 지원하거나, 단순히 MP4로 변환하여 Discourse의 전체 화면 기능을 활용할 수 있도록 해야 합니다.

또한, 확장된 테이블 기능은 정말 좋습니다:ok_hand: :star_struck: