webM files shows green and purple effects on mobile

Question

I have converted several GIFs to webM files using ffmpeg on my Ubuntu 14.04 server.

Heres the code I used for conversation.

ffmpeg -i your_gif.gif -c:v libvpx -crf 12 -b:v 500K output.webm

source https://gist.github.com/ndarville/10010916

The problem is converted webM files shows perfectly fine on PCs but on my mobile it shows with green and purple shadows.

PC

Mobile

mobile

I tried changing -crf and -b:v values to their max but nothing happens.

webM file: http://d1pnsuxwa0it39.cloudfront.net/uploads/comments/webm/4673555.webm

edit:

also I can see webM files on some other sites fine. I think this has to do something with the way I convert files.

edit:

I have tried another code I found on stackoverflow but still the same.

ffmpeg -f gif -i infile.gif outfile.mp4

EDIT:

If anyone think this has something to do with the way I installed FFMPEG, I followed the steps on FFMPEG official docs.

https://trac.ffmpeg.org/wiki/CompilationGuide/Ubuntu

EDIT:

Input file:

http://d1pnsuxwa0it39.cloudfront.net/test/1.gif

Output file:

http://d1pnsuxwa0it39.cloudfront.net/test/output.webm

FFMPEG CLI output

 /home/naveencg/bin/ffmpeg -i 1.gif -c:v libvpx -crf 12 -b:v 500K output.webm
ffmpeg version 2.5.git Copyright (c) 2000-2014 the FFmpeg developers
  built on Dec 31 2014 14:37:15 with gcc 4.8 (Ubuntu 4.8.2-19ubuntu1)
  configuration: --prefix=/home/naveencg/ffmpeg_build --extra-cflags=-I/home/naveencg/ffmpeg_build/include --extra-ldflags=-L/home/naveencg/ffmpeg_build/lib --bindir=/home/naveencg/bin --enable-gpl --enable-libass --enable-libfdk-aac --enable-libfreetype --enable-libmp3lame --enable-libopus --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx264 --enable-nonfree
  libavutil      54. 15.100 / 54. 15.100
  libavcodec     56. 19.100 / 56. 19.100
  libavformat    56. 16.102 / 56. 16.102
  libavdevice    56.  3.100 / 56.  3.100
  libavfilter     5.  6.100 /  5.  6.100
  libswscale      3.  1.101 /  3.  1.101
  libswresample   1.  1.100 /  1.  1.100
  libpostproc    53.  3.100 / 53.  3.100
Input #0, gif, from '1.gif':
  Duration: N/A, bitrate: N/A
    Stream #0:0: Video: gif, bgra, 350x169, 25 fps, 25 tbr, 100 tbn, 100 tbc
[libvpx @ 0x1e2bf60] v1.3.0
Output #0, webm, to 'output.webm':
  Metadata:
    encoder         : Lavf56.16.102
    Stream #0:0: Video: vp8 (libvpx), yuva420p, 350x169, q=-1--1, 500 kb/s, 25 fps, 1k tbn, 25 tbc
    Metadata:
      encoder         : Lavc56.19.100 libvpx
Stream mapping:
  Stream #0:0 -> #0:0 (gif (native) -> vp8 (libvpx))
Press [q] to stop, [?] for help
frame=   21 fps=0.0 q=0.0 size=      58kB time=00:00:00.84 bitrate= 569.7kbits/sframe=   44 fps= 41 q=0.0 size=     110kB time=00:00:01.76 bitrate= 512.4kbits/sframe=   62 fps= 39 q=0.0 size=     153kB time=00:00:02.48 bitrate= 505.9kbits/sframe=   84 fps= 40 q=0.0 size=     210kB time=00:00:03.36 bitrate= 510.8kbits/sframe=   88 fps= 41 q=0.0 Lsize=     218kB time=00:00:03.52 bitrate= 508.3kbits/s
video:216kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.971527%

green/purple effects usually mean pixel format mismatch (pix_fmt option). I don't understand why this error not showing in PC. — 9dan, Dec 30 '14 at 10:43
@9dan I agree, I tried splitting the GIF into JPEGs using imagemagick and use ffmpeg to create a webM file off those JPEGs but no change. I had to find an online api to do this but still looking for a solution as I hate depending on other services.. — Naveen Gamage, Dec 30 '14 at 20:22
@NaveenGamage Can you also give us the input files so we can test the conversion process. — Ortomala Lokni, Dec 31 '14 at 13:00
@OrtomalaLokni: Sure! Input file http://d1pnsuxwa0it39.cloudfront.net/test/1.gif — Naveen Gamage, Jan 01 '15 at 01:59
@OrtomalaLokni Output file http://d1pnsuxwa0it39.cloudfront.net/test/output.webm — Naveen Gamage, Jan 01 '15 at 01:59
@OrtomalaLokni I have also updated the question with above info. — Naveen Gamage, Jan 01 '15 at 02:04
@OrtomalaLokni I'm temporary using gfycat.com API as an alternative. — Naveen Gamage, Jan 01 '15 at 02:06
Can you also say precisely which mobile and which os/browser version you have? — Ortomala Lokni, Jan 01 '15 at 13:32
And if you try to convert it with this site? https://cloudconvert.com/gif-to-webm — Gilko, Jan 05 '15 at 21:30
@NaveenGamage I put an answer to your question and I'm not even sure you've seen it! — akmozo, Jan 08 '15 at 23:46

Ortomala Lokni · Answer 1 · 2015-10-11T13:49:29.740

0

To solve it you have to tweak the quality settings.

Try the following:

Improve the bitrate

-b:v 1M
Change the minimum and maximum quantizer lower generally means "better quality"

-qmin 0 -qmax 50.
Change the constant quality CRF parameter lower values mean better quality

-crf 5

Here is the command you can start with:

ffmpeg -i your_gif.gif -c:v libvpx -qmin 0 -qmax 50 -crf 5 -b:v 1M -c:a output.webm

edited Oct 11 '15 at 13:49

answered Jan 03 '15 at 11:10

Ortomala Lokni

56,620
24
188
240

score 0 · Answer 2 · answered Jan 06 '15 at 02:31

I tested your webm video in 5 browsers in my Android 4.1.1 tablet and I got the same behavior mentioned in your question in all browsers except the exceptional Firefox. Browsers used in the test : Chrome 39, Dolphin 11, Firefox 34, Opera 26 and UC Browser 10.

I tested your gif and different video formats and I got in many cases the same behavior, that's why I think that the behavior mentioned in your question is not a special problem of converting gif to webm but it's related to the browser (the 5 tested android browsers at least, I don't know for browsers of other mobile os) and the webm encoding preset.

To more understand that the behavior is not special to gif files, of course we can use any video format, but in my case, I will use an avi movie ( downloaded from here ). I will convert this video (10 seconds, from 00:00:10 to 00:00:20 ) to webm using 4 ffmpeg commands :

ffmpeg -i b.avi -ss 00:00:10.000 -to 00:00:20.000 -c:v libvpx -crf 4 - b:v 500K -vf scale=640:359 -an 1.webm
ffmpeg -i b.avi -ss 00:00:10.000 -to 00:00:20.000 -c:v libvpx -crf 4 - b:v 500K -vf scale=639:360 -an 2.webm
ffmpeg -i b.avi -ss 00:00:10.000 -to 00:00:20.000 -c:v libvpx -crf 4 - b:v 500K -vf scale=639:359 -an 3.webm
ffmpeg -i b.avi -ss 00:00:10.000 -to 00:00:20.000 -c:v libvpx -crf 4 - b:v 500K -vf scale=640:360 -an 4.webm

Here everyone can see that the unique difference between all these commands is the scale filter, and in reality this is the point that can resolve the "problem" ( problem here is between quotes because I think that is a browser bug ). Why ?

Because in the case where the height of our webm video is odd, we can see the behavior, otherwise the video playing without any problem. Here of course we don't speak about Firefox because in all cases it can play the video without any issue.

So, because your gif was 350x169 px size, you got that behavior, and to avoid that, you can use the scale filter to fix the dimension of your webm like this :

ffmpeg -i your_gif.gif -c:v libvpx -crf 12 -b:v 500K -vf scale=350:170 output.webm

Or in a general way to avoid calculation and if you want keep the same dimension :

ffmpeg -i your_gif.gif -c:v libvpx -crf 12 -b:v 500K -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.webm

The "scale=trunc(iw/2)*2:trunc(ih/2)*2" will give you always an even width and height without a real scaling.

You can test yourself all videos that I tested here and see the result as snapshots here ( snapshots only for 4 browsers except UC Browse in which we can not see all videos in the same time), of course you can also see the result of the conversion of your gif to webm using your original ffmpeg command and my last one with the scale filter.

Hope all that can help you.

webM files shows green and purple effects on mobile

2 Answers2