Should Discourse convert GIFs to mp4 video files?

Just read about this neat trick that Twitter is doing with 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 « J'aime »

http://gfycat.com also does this.

Live example with both formats automatically offered

Gif Size: 13M
Gfy Size: 2M
Compression: 2.7 to 1 (Bandwidth saved: 17G)
Views: 2082
Original: Video
Reddit comments: /r/battlefield_4
1 « J'aime »

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 « J'aime »

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 « J'aime »

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 « J'aime »

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

1 « J'aime »

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 « J'aime »

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 « J'aime »

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 « J'aime »

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

8 « J'aime »

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 « J'aime »

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

1 « J'aime »

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 « J'aime »

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 « J'aime »

Je viens de créer le composant Discourse Gifs qui utilise la technique

2 « J'aime »

Est-ce que cela a jamais vu le jour ? Je vois

Mais aucun de ces éléments ne précise si la solution a été mise en œuvre.

La raison de ma question est que, sauf erreur de ma part, l’effet lightbox ne semble pas compatible avec les GIF. Autrement dit, je ne peux pas cliquer sur un GIF pour le passer en plein écran. Lorsque le GIF contient du texte détaillé, l’utilisateur ne peut pas zoomer sans ouvrir l’image dans un autre onglet.

Cependant, si le GIF est converti en MP4 lors du téléchargement, nous bénéficions alors de la fonctionnalité plein écran du lecteur vidéo existant, ainsi que de la barre de progression — des avantages considérables lorsque vous regardez un court clip tutoriel !

Cette possibilité de conversion est-elle déjà disponible ? J’ai également recherché « gif » dans les paramètres et j’ai trouvé :

1 « J'aime »

C’est comme dire « Je devrais pouvoir cliquer sur n’importe quelle image et la voir en plein écran », ce qui n’a pas beaucoup de sens pour moi ? :confounded_face:

Lors de la comparaison de différents styles de documentation – tout texte, uniquement vidéo, texte + gifs – l’option texte + gifs s’est avérée largement supérieure. Par conséquent, nous prévoyons d’utiliser des gifs pour démontrer des choses dans les articles de tutoriel. Cependant, si nous ne pouvons pas passer en plein écran ou en lightbox le gif, le texte écrit peut souvent être difficile à voir

gifstoosmall

Et comme vous le voyez lorsque vous survolez, vous n’avez que l’option de mettre en pause

Mais ce dont nous avons vraiment besoin, c’est de pouvoir agrandir le gif. La solution de contournement consiste à faire un clic droit et à ouvrir dans un nouvel onglet, ce qui convient à nos utilisateurs les plus expérimentés, mais on ne peut pas s’attendre à ce que les 90 % restants s’adaptent à cela. Nous avons donc besoin soit d’un moyen de faire en sorte que les gifs téléchargés utilisent la mise en lumière afin qu’ils s’affichent en taille réelle lorsqu’ils sont cliqués, soit simplement de les convertir en mp4 afin que Discourse fournisse la fonctionnalité plein écran.

De plus, la fonctionnalité des tableaux développés est :ok_hand: :star_struck: