Skip to main content Link Menu Expand (external link) Document Search Copy Copied
ffmpeg-tests

Color Metadata and Web Color Preservation

There are a number of metadata flags designed to help the player know what colorspace the media is in, so it can correctly interpret it for playback. We do recommend adding the metadata tags to media, particularly if you are reviewing it on a web browser, however there are a lot of gotchas here.

The NCLC/NCLX is defined as a ISO spec here (see ISO-23091 ). The numbers below are part of the definition. NCLC stands for Non-Consistent Luminance Coding, a brief overview of its history is here. For MP4 files, its also known as NCLX. Additionally this metadata can also be represented in the h264 metadata stream in the video usability Information (VUI) block.

You can read the metadata using mp4box.js which is a visual browser of the mp4 metadata, and look at moov/trak/mdia/minf/stbl/stsd/avc1/colr property.

NOTE: None of the flags below affect the encoding of the source imagery, they are meant to be used to guide how the mp4 file is decoded.

The docs are pretty sparse for this, some of the better info is FFmpeg/pixfmt.h at master

There are four possible tags that you can apply to movies:

For a detailed breakdown of what browsers support what flags see: here

Transfer function tests (color_trc flag)

This is setting the transfer function, which is typically going to be related to the gamma of the display. There are a number of existing gamma profiles, e.g. bt709 or sRGB, as well as gamma 2.2, and 2.8. Having said that, bt709 is frankly rather useless, consequently we recommend using sRGB as a default.

For more details see: here

sRGB

Using the -color_trc iec61966-2-1 flag (the sRGB spec is defined as iec61966-2-1 ). This appears to be the most reliable one, working across all machines and browsers that support it. It’s a shame that the flag has to be so cryptic.

Source SRGB PNG
Mp4 Video should match PNG

bt709

Using the -color_trc bt709 flag (AKA rec709). This is often the default tag, however producers the most confusing results. On Chrome this will actually match sRGB, but on safari it will match the camera bt709 parameters, which roughly match gamma 1.95. NOTE, there is no support at all for BT1886, which is what we would conventionally use for the TV gamma of 2.4, the closest you can get is using quicktime on OSX.

This is the bt709 mp4.
This is a quicktime with a gamma of 1.95. This should be nearly identical to the above bt709 mp4, which implies OSX is correctly interpreting camera bt709.
This is the srgb.mp4 which may match the bt709 result. For chrome on windows, this should match bt709, which implies its treating it as sRGB.

Screenshots

Screenshot of mp4 of chrome on windows
Screenshot of mp4 of safari on OSX

Gamma 2.2

Using the -color_trc gamma22 flag. This does not work correctly on safari.

Source gamma 2.2 PNG
Mp4 Video should match PNG

Gamma linear

Using the -color_trc linear flag. This is unlikely to ever be used for video, however it does make for a good test that something is working.

Source linear PNG
Mp4 Video should match PNG

Summary

We recommend the use of -color_trc iec61966-2-1 to use sRGB. There is no support for a gamma 2.4, if you still need it, we recommend that you use -color_trc unknown and ensure that your monitor is set correctly

Gamut colorprimaries

Normally web browsers use the bt709 color gamut (which is different to the bt709 gamma), but in theory you could define your media as having a wider gamut, e.g. DCI-P3 or rec2020. The files below show a PNG and MP4 file defined using the rec2020 gamut, so depending on which monitor you are using it will show different text. This is similar to the excellent WIDE>Gamut test page.

PNG fileMp4 file (which should match PNG file)
What the image should look like if nothing is working, or you have a rec2020 monitor.
What the image should look like if you have a display-p3 monitor.

Chrome on windows, and Safari and Chrome on IOS will always assume the display is sRGB. In theory chrome://flags/#force-color-profile should give you some settings for this, but it seems to be ignored.

Web Review

See: