Forum Groups
  All forums
    Help & Feedback
      Work in progress
      Finished Art
      Non-Max related

Maxunderground news unavailable

Web Browsers and video Colour Management..
show user profile  ScotlandDave
I`m exporting an animation from AE and cannot get the background colour of the video to match the webpage that it is being embedded in ( via HTML5 Video tag ) - does anybody have experience of this?

Basically, within AE the background colour is exactly the same as the webpage background, but when exported ( have tried .mov h264 and .mp4 h264 ) there`s always a slight difference when embedded in the website and played back..

I`m pretty sure it`s something to do with Workspace and Colour Management but i`ve tried a few different variations and can`t get it to match up with the browser.

I am aware that different video players handle colour management differently, but there must be a way to get them to match up surely..

Any advice appreciated!

Website | Blog | Contact | Vimeo

read 832 times
1/30/2014 7:53:34 PM (last edit: 1/30/2014 7:54:03 PM)
show user profile  Garp
I'd like to know the answer too. I've had similar problems a few times.

read 829 times
1/30/2014 8:02:04 PM (last edit: 1/30/2014 8:02:04 PM)
show user profile  ScotlandDave
It is a real pita and involves both quicktime mov and h264/mp4 files..

What i`ve discovered is as follows:

Embedding both .mp4 and .mov (h264) files into a webpage are washed-out / gamma-shifted in both Chrome & Firefox, but IE seems to play them ok.

From what i can gather it seems like the videos are being displayed as Rec.709 (16-235) as opposed to the standard 0-255 and basically trimming the low blacks and high whites to produce a washed out look. So what i`ve did is applied the Color Profile Converter in AfterEffects to the main composition and forced it to convert the input from HDTV (Rec.709) 16-235 to the HDTV (Rec.709). What that`s doing is basically pretending that the composition is 16-235 and converting it to 0-255 ( effectively making it darker by precisely the amount that h264 is being lightened when embedded and played back )..

So essentially that bakes the colour profile onto the composition as an effect. It can then be exported and plays back when embedded in the web-page ALMOST exactly as it should. I say almost because here`s an example of how close it is, very very close but not 100%:

The real solution as far as i understand would be to metatag the video when exporting with the correct Colour Space / Work Space so that the playback software ( ie quicktime etc ) knows exactly how to display it - but that doesn`t seem to work.. It also burdens the player with extra overhead as it`s trying to convert the video as it plays back to a different colour space..

The problem i think i`m now going to have is that because there is no colourspace metadata in the video ( ie its just basically baked into the video itself by making it darker ) there might not be consistency between different browsers and platforms. Some might choose to interpret it properly and some not, it might display fine on Chrome or Firefox on Windows but not on a Mac..

Which is a real fucking pita, because what other options are there other than mp4/h264. As far as i can see even Vimeo is screwing with the colours and so embedding from there has the same issues..

Anyway, that is all :)

Website | Blog | Contact | Vimeo

read 807 times
1/31/2014 2:21:57 AM (last edit: 1/31/2014 2:22:51 AM)
show user profile  Garp
Thanks for sharing your experiments, but... >:(

read 797 times
1/31/2014 4:05:06 AM (last edit: 1/31/2014 4:05:19 AM)
show user profile  gogodr
what are you trying to do? maybe a video is not the way to go.
you know you can play an image sequence in canvas no problem right?

Hello there

beautiful ;3

read 794 times
1/31/2014 4:08:00 AM (last edit: 1/31/2014 4:08:00 AM)
show user profile  ScotlandDave
Yeah i know it`s a bit of a headfcuk, sorry :)

Gogo: Just trying to show a video on a webpage, in a way that works across platforms, and where the video background matches the webpage background colour. Which is easier said than done apparently!

So to achieve cross platform i`ve chosen .mp4 (h264) as it is supported by almost all browsers. The other two HTML 5 supported alternatives are WebM and Vorbis which aren`t widely supported. But with the HTML5 Video tag i can supply a version of the video in mp4 and wbm formats so the browser can choose..

But basically the issue is down to how mp4 video is interpreted and displayed - ie it gets washed out and colours change slightly.

I`m reading up on using handbrake to encode mp4 using the x264 codec which i THINK possibly gets around the issue..

Website | Blog | Contact | Vimeo

read 784 times
1/31/2014 10:31:22 AM (last edit: 1/31/2014 10:31:56 AM)
#Maxforums IRC
Open chat window