chrome for PC problem

[manar-mk]

Hi, I was using your plugin(its awesome!) for transparent video and faced a problem which I can't understand.
Video is with moving alpha channel.(http://www.kamilakurbani.com)

On laptops it works fine, but on PC there is a little transparency there. Versions of chrome are the same(35). In other browsers it also looks fine. Here the screens:

Chrome:

Opera:

Chrome on laptop:

[m90]

Hi!

This looks like there is some problem in the way you are converting the video source / the way the browser is interpreting the video's blackness.

The way your screenshot looks the "alpha channel" will probably not be pure black but a dark grey in the areas that are supposed to be transparent.

What kind of video formats are you using? Do you have any kind of video editing software / hardware installed on your PC that is not installed on your laptop (there are some software packages that mess with your system's gamma settings)?

Cheers!

[m90]

FWIW: the video looks ok on my machine (Chrome on Windows 8) as well!

[manar-mk]

Thanks for answer!)

video was converted to m4v and ogv with 'Easy HTML5 video' software from mp4 format.
Actually problem is not about my video, cause the example(http://m90.github.io/jquery-seeThru/moving-alpha/) also had black color overlay.

About additional software, there is no such a difference. we tried a few of laptops and PCs with almost same and different software installed.

[m90]

Well as I have written it seems to be that the computer that is displaying the overlay is interpreting the video's black as dark grey (therefore it is not fully transparent).

I cannot reproduce this on any machine that I can test it on though, neither PC or Mac.

How many computers are affected by this in your case? Do you use any kind of color management software? Is there QuickTime installed on one of the computers? Can you spot any other difference in the setup?

When you open the m4v in the machine's standard playback software and take a screenshot, will the black area be rgb(0,0,0)?

[manar-mk]

ok, will try tomorrow)

[m90]

Btw what will happen when you use webm- instead of m4v-video for playback in Chrome?

[manar-mk]

Last one was true, I used webm instead of m4v, and it's worked. Thanks for help

[m90]

Great to hear!

I'll add that to the documentation for others who get bitten by this.

Cheers!

[JeskeJL02]

I have also faced this problem, with other browsers like IE11. Its very strange because my colleague has the save version of IE11 but different video cards, and his machine will show the grey box where mine does not. Either way what I have been doing, and you may have already thought of this, is set the image data = 0 (transparent), when the RBG falls below a preset threshold. In my instance I have found success with 30.
So I am replacing line 263 (https://github.com/m90/seeThru/blob/master/src/seeThru.js#L263) located in the for loop:
image.data[i] = options.alphaMask ? alphaData[i - 1] : Math.max(alphaData[i - 1], alphaData[i - 2], alphaData[i - 3]);

With this:
if (options.alphaMask)
image.data[i] = alphaData[i - 1];
else {
var max = Math.max(alphaData[i - 1], alphaData[i - 2], alphaData[i - 3]);
image.data[i] = (max < 30) ? 0 : max;
}

It seems to get rid of the grey box, cross browser. The only trade off I found is that the edges of the alpha channeled element are slightly not as smooth, but most do not seem to notice.

live example: http://www.masonrywi.com/ (!published today, DNS may not be resolved yet!)

Let me know what you think, not sure if there may be other downsides to this approach, but I have yet to find more.

[m90]

While this suggestion surely is an appropriate patch for the problem, I
wouldn't want to ship it as standard behavior.

Why 30? This value might differ from machine to machine.

What about people who need full 8 Bits of Alpha? This would mean I'd have
to supply a LUT and enter the world of logarithmic color spaces (let's
avoid that).

What about people with setups that display Gamma values correctly? They'd
be losing quality here.

I don't want to say that this isn't an issue worth investigating, but I
think it'd be much more interesting to find out if there's a way to
normalize Gamma interpretation across browsers and formats.
Am 12.09.2014 22:54 schrieb "JeskeJL02" notifications@github.com:

I have also faced this problem, with other browsers like IE11. Its very
strange because my colleague has the save version of IE11 but different
video cards, and his machine will show the grey box where mine does not.
Either way what I have been doing, and you may have already thought of
this, is set the image data = 0 (transparent), when the RBG falls below a
preset threshold. In my instance I have found success with 30.
So I am replacing line 263 (
https://github.com/m90/seeThru/blob/master/src/seeThru.js#L263) located
in the for loop:
image.data[i] = options.alphaMask ? alphaData[i - 1] :
Math.max(alphaData[i - 1], alphaData[i - 2], alphaData[i - 3]);

With this:
if (options.alphaMask)
image.data[i] = alphaData[i - 1];
else {
var max = Math.max(alphaData[i - 1], alphaData[i - 2], alphaData[i - 3]);
image.data[i] = (max < 30) ? 0 : max;
}

It seems to get rid of the grey box, cross browser. The only trade off I
found is that the edges of the alpha channeled element are slightly not as
smooth, but most do not seem to notice.

live example: http://www.masonrywi.com/ (!published today, DNS may not be
resolved yet!)

Let me know what you think, not sure if there may be other downsides to
this approach, but I have yet to find more.

—
Reply to this email directly or view it on GitHub
#12 (comment).

[JeskeJL02]

30 is just a number that seemed to work well after playing around with this threshold for a while. And yes it is an unfair trade off to those who can display the Gamma values correctly. I will have to do some research on the full 8 Bits of Alpha, I'm not so proficient in the video world, I am more of a front end developer than a video guy. Thanks for the feed back!