HTML Video color not accurate

Question

I have a video, converted from a mov file to a h264 mp4, and also an ogg file.

On my PC the blue background and general colors are quite bright (not exactly the same as original though), and when I put the video in HTML5 tags it goes very dull and loses a bit of quality.

How can I fix this?

http://bit.ly/1lg2uXF

Answer 1

Looks like the video is not in the same color space as the background you have.

When converting to h264, in your video editor, look for a checkbox to preserve or embed color profile. If there's still a problem, try making the compression quality higher. The colors may be getting changed as a way for the compressor to save space.

When I inspect the videos in Adobe Bridge, the color profile for both the mp4 and webm are "untagged".

Cool motion graphic by the way.

Answer 2

One thing that worked for me was to sample a specific location, say top left corner using the canvas. You'll need to wait until the video has loaded and is displaying the first frame.

const sampleVideoColor = videoElement => {
  const canvas = document.createElement('CANVAS')
  const ctx = canvas.getContext('2d')
  const { videoWidth, videoHeight } = videoElement
  canvas.width = videoWidth
  canvas.height = videoHeight

  ctx.drawImage(videoElement, 0, 0, videoWidth, videoHeight)
  const [r, g, b] = ctx.getImageData(1, 1, 1, 1).data ///top left corner

  return `rgb(${r},${g},${b})`
}

someBackgroundElement.style.backgroundColor = sampleVideoColor(someVideoElement)